Angular 2 e2e Testen

Question

Ich habe gerade mit Angular 2 und e2e Tests begonnen und ich versuche, ein Bootstrap 4 modal zu schließen, indem ich mit dem Protractor in einen leeren Bereich klicke. Ich habe versucht:

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

... und ich habe sogar versucht:

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

Ich bin neu die die Winkel 2 Welt, so die Antwort ist wohl offensichtlich. Vielen Dank im Voraus für jede Hilfe.

Answer 1

Ich habe Ihren HTML nicht gesehen, aber ich denke, dass das passieren wird. Eine click -Aktion für ein Element führt einen Klick auf die Mitte des Elements aus, siehe actions docs.

Es hängt davon ab, wie Ihr Modal auf der Seite positioniert ist, aber in normalen Situationen befindet sich ein Modal in der Mitte der Seite. Wenn wir das als eine gegebene und wir den ersten Klick-Befehl ausführen Sie oben beschreiben, werden wir die folgenden

• klicken Sie auf den body, der Körper das Vollbild, das Zentrum des Körpers erhalten wird auf der klicken modal =>modal nicht geschlossen

Der zweite Klick Befehl, den Sie nicht beschreiben, weil Sie ein Objekt zur Verfügung stellen müssen, sehen here, so braucht es

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

sein

Answer 2

Danke für die Rückmeldung, die mich zur Antwort geführt hat. Ich hätte mitteilen sollen, dass dies ein Bootstrap-Modal ist, das relevant ist. Wenn es aufgerufen wird, bedeckt das Modal die ganze Seite, nicht nur das Rechteck in der Mitte. Indem ich meine Koordinaten auf x: 0, y: 0 setze, war ich im "leeren" Bereich des Modals.