Question

我有一系列测试，关闭模态并检查以确保模态消失。这些最初是在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）存在问题。

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

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

关闭同步并再次打开（如果这是一个受测试的角应用程序）：

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％的问题）

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

测试以关闭量角器中间歇性失效的模态

1 个答案: