Angular 2 e2e测试

Question

I just started with Angular 2 and e2e testing and I am trying to close a Bootstrap 4 modal by clicking in a blank area, using Protractor. I've tried:

it('should close the login modal when the blank space outside of the modal is clicked', () => {
  element(by.tagName('body')).click().then(function() {
    browser.sleep(250);
    expect(element(by.id('myModal')).isDisplayed()).toBeFalsy();
  });
});

...and I've even tried:

it('should close the login modal when the blank space outside of the modal is clicked', () => {
  browser.actions()
  .mouseMove(element(by.id('login_modal')), -20, -20)
  .click().then(function() {
    browser.sleep(250);
    expect(element(by.id('login_modal')).isDisplayed()).toBeFalsy();
  });
});

I'm new the the Angular 2 world, so the answer is probably obvious. Thank you in advance for any help.

Answer 1

I haven't seen your HTML, but I think this will happen. A click -action on an element will execute a click on the center of the element, see the actions docs .

It depends on how your modal is positioned on the page, but in common situations, a modal is in the center of the page. If we use that as a given and we execute the first click command you describe above, we will get the following

• click on the body , the body it the full screen, the center of the body will click on the modal => modal will not be closed

The second click command you describe fails because you need to provide an object, see here , so it needs to be

 browser.actions() .mouseMove(element(by.id('login_modal')), { x: toRight, y: toBottom }) .click().then(function() { browser.sleep(250); expect(element(by.id('login_modal')).isDisplayed()).toBeFalsy(); }); 

Answer 2

Thanks for the feedback, which led me to the answer. I should have posted that this is a bootstrap modal, which is relevant. When called, the modal covers the whole page, not just the rectangle in the middle. By setting my coordinates to x:0, y:0 I was on the "blank" area of the modal.