在量角器中测试关闭模式间歇性失败答案

【问题标题】：Test to close modal intermittently failing in protractor在量角器中测试关闭模式间歇性失败
【发布时间】：2015-11-13 10:23:42
【问题描述】：

我进行了一系列测试，这些测试会关闭模态并检查以确保模态已消失。这些最初是在 Chrome 中检查的，但它们会间歇性地失败。这是一个这样的例子（我在其他地方采取了类似的方法）：

'use strict';
describe('Modal', function() {
    var page;

    beforeEach(function() {
    browser.get('/#/components');
    page = require('./modal');
    page.ermAddErrorBtn.click();
    page.ermAddErrorBtn.click();
    page.ermAddInfoBtn.click();
    });

    it('should close the modal on clicking the modals cross icon', function () {
    page.ermAlertBox.click().then(function() { //this just opens the modal
        browser.wait(protractor.ExpectedConditions.presenceOf(page.ermModalEl), 30000, 'Modal never appeared');
        browser.executeScript("$('.erm-modal').removeClass('fade');");
        page.ermModalCloseBtn.click().then(function () {
            browser.wait(protractor.ExpectedConditions.stalenessOf(page.ermModalEl), 30000, 'Modal never disappeared');
            expect(page.ermModalEl.isPresent()).toBe(false);
        });
    });
});
});

模式间歇性地超时并且永远不会关闭（这会给出Modal never disappeared 消息）。稍后在我们的构建管道中，这也使用 PhantomJS 进行检查。我已经尝试了上述代码的多个版本，但其中一个（Chrome/PhantomJS）有问题。

我怀疑这可能是某种时间错误问题，它试图关闭尚不存在的东西。

【问题讨论】：

您确定关闭点击有效吗？可能是关闭按钮在被点击时没有完全/正确连接，因此没有做任何事情。

标签： angularjs google-chrome phantomjs protractor

【解决方案1】：

无论如何，这将是在黑暗中尝试，但这里有一些事情可以尝试：

在点击按钮之前等待关闭按钮to become clickable：

var EC = protractor.ExpectedConditions;
page.ermAlertBox.click().then(function() { //this just opens the modal
    browser.wait(EC.presenceOf(page.ermModalEl), 30000, 'Modal never appeared');
    browser.executeScript("$('.erm-modal').removeClass('fade');");

    browser.wait(EC.elementToBeClickable(page.ermModalCloseBtn), 30000, 'Close button has not become clickable');
    page.ermModalCloseBtn.click().then(function () {
         browser.wait(EC.stalenessOf(page.ermModalEl), 30000, 'Modal never disappeared');
         expect(page.ermModalEl.isPresent()).toBe(false);
     });
});

move to the close button and then click:

browser.actions().mouseMove(page.ermModalCloseBtn).click().perform().then(function () {
     browser.wait(EC.stalenessOf(page.ermModalEl), 30000, 'Modal never disappeared');
     expect(page.ermModalEl.isPresent()).toBe(false);
 });

检查invisibility 而不是陈旧性：

browser.wait(EC.invisibilityOf(page.ermModalEl), 30000, 'Modal never disappeared');

在弹出窗口打开后引入artificial delay：

var EC = protractor.ExpectedConditions;
page.ermAlertBox.click().then(function() { //this just opens the modal
    browser.sleep(1000);

    browser.wait(EC.presenceOf(page.ermModalEl), 30000, 'Modal never appeared');
    browser.executeScript("$('.erm-modal').removeClass('fade');");

    page.ermModalCloseBtn.click().then(function () {
         browser.wait(EC.stalenessOf(page.ermModalEl), 30000, 'Modal never disappeared');
         expect(page.ermModalEl.isPresent()).toBe(false);
     });
});

关闭同步并再次打开（如果这是一个正在测试的 Angular 应用）：

var EC = protractor.ExpectedConditions;
browser.ignoreSynchronization = true;

page.ermAlertBox.click().then(function() { //this just opens the modal
    browser.wait(EC.presenceOf(page.ermModalEl), 30000, 'Modal never appeared');
    browser.executeScript("$('.erm-modal').removeClass('fade');");

    page.ermModalCloseBtn.click().then(function () {
         browser.wait(EC.stalenessOf(page.ermModalEl), 30000, 'Modal never disappeared');
         expect(page.ermModalEl.isPresent()).toBe(false);

         browser.ignoreSynchronization = false;
     });
});

禁用所有动画：见How to disable animations in protractor for angular js application
don't really use PhantomJS for end-to-end testing（您的问题减少了 50%）

或者，您可以尝试合并这些建议。

【讨论】：