Angular 2 e2e Testing

Question

Je viens de commencer les tests Angular 2 et e2e et j'essaye de fermer un modal Bootstrap 4 en cliquant dans une zone vide, en utilisant Protractor. J'ai essayé:

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(); 
    }); 
}); 

... et je l'ai même essayé:

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(); 
    }); 
}); 

Je suis nouveau le monde 2 angulaire, donc la réponse est probablement évidente. Merci d'avance pour toute aide.

Answer 1

Je n'ai pas vu votre HTML, mais je pense que cela arrivera. Un click -action sur un élément va exécuter un clic sur le centre de l'élément, voir le actions docs.

Cela dépend de la position de votre modal sur la page, mais dans les situations courantes, un modal est au centre de la page. Si nous les utilisons comme donné et nous exécutons la première commande de clic que vous décrivez ci-dessus, nous allons obtenir les éléments suivants

• cliquez sur le body, le corps, il le plein écran, le centre du corps cliquera sur la modal =>modale ne sera pas fermé

La deuxième commande clic que vous décrivez échoue parce que vous devez fournir un objet, voir here, donc il doit être

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

Merci pour les commentaires, ce qui m'a conduit à la réponse. J'aurais dû signaler que c'est un modal bootstrap, ce qui est pertinent. Une fois appelé, le modal couvre toute la page, pas seulement le rectangle au milieu. En réglant mes coordonnées sur x: 0, y: 0 j'étais sur la zone "vide" du modal.