量角器测试AngularJS app的传递/失败不一致

Question

我的量角器e2e测试不一致传递和失败.

这似乎可能是由于异步javascript,如下所述: 量角器:如何在单击按钮后等待页面完成？.

但是,这里提到了Protractor测试自动顺序/同步执行:https: //github.com/angular/protractor/issues/909

我的测试脚本:

describe('Login', function() {

  var ptor;

  beforeEach(function() {
    browser.get('https://127.0.0.1:8443');
    ptor = protractor.getInstance();
    element(by.id('splash')).click();
    browser.ignoreSynchronization = true;  // <-- to proceed beyond splash screen
  });

  describe('with correct email and password', function() {

    beforeEach(function() {
        element(by.id('email')).sendKeys('admin@email.com');
        element(by.id('password')).sendKeys('adminpassword');
        element(by.id('loginButton')).click();
    });

    afterEach(function() {
        ptor.findElement(by.id('logout')).then(function(elem) {
            elem.click();
        });
    });

    it('does not show alert', function() {  // <-- sometimes passes, sometimes fails
        expect(browser.isElementPresent(by.css('.alert-danger'))).toBe(false);
    });

    it('changes route to /admin', function() {  // <-- sometimes passes, sometimes fails
        expect(browser.getCurrentUrl()).toMatch(/\/admin/);
    });
  });
});

在上面的两个测试中,两个测试都将通过,或者这些消息中的一个/两个测试都将失败:

Failures:

1) Login with correct email and password does not show alert
Message:
  NoSuchElementError: no such element
...
==== async task ====
WebDriver.findElement(By.id("logout"))
...

要么

Failures:

1) Login with correct email and password changes route to /admin
Message:
  NoSuchElementError: no such element
...
==== async task ====
WebDriver.findElement(By.id("logout"))
...

思想/帮助非常感谢.

Answer 1

我能够根据以下内容解决问题:

• Avishay在这里回答关于添加ptor.waitForAngular():
  没有找到使用locator的元素:by.model()错误

• 将浏览器 .get 更改为ptor .get,如Harri Siirak在此处的回答:
  使用$ resource时,量角器等待与页面同步

• juliemr在这里评论ignoreSynchronization是一个实例变量,并将浏览器 .ignoreSynchronization = true 更改为ptor .ignoreSynchronization = true:https:
  //github.com/angular/protractor/issues/49

• glepretre关于使用.then()的答案:
  量角器:点击按钮后如何等待页面完成？

正如Nguyen Vu Hoang对原始问题的评论所提到的,我正在测试一个纯粹的Angular应用程序,我认为它是纯粹的Protractor(没有webdriver调用).我知道在这种情况下不应该要求ptor.ignoreSynchronization = true,但由于某种原因,没有此设置,测试不会在按钮单击时继续.

我的新规格:

describe('Login', function() {

  var ptor;

  beforeEach(function() {
    ptor = protractor.getInstance();
    ptor.ignoreSynchronization = true;
    ptor.waitForAngular();
    ptor.get('https://127.0.0.1:8443');
    ptor.findElement(by.id('splash')).then(function(elem) {
        elem.click();
    });
  });

  describe('with correct email and password', function() {

    beforeEach(function() {
        ptor.findElement(by.id('email')).then(function(elem) {
            elem.sendKeys('admin@email.com');
        });

        ptor.findElement(by.id('password')).then(function(elem) {
            elem.sendKeys('adminpassword');
        });

        ptor.findElement(by.id('loginButton')).then(function(elem) {
            elem.click();
        });
    });

    afterEach(function() {
        ptor.findElement(by.id('logout')).then(function(elem) {
            elem.click();
        });
    });

    it('does not show alert', function() {
        expect(ptor.isElementPresent(by.css('.alert-danger'))).toBe(false);
    });

    it('changes route to /admin', function() {
        expect(ptor.getCurrentUrl()).toMatch(/\/admin/);
    });
  });
});

Answer 2

还有另一种技术可以使您的测试更稳定:显式等待和预期条件(docs).

我发现在对非角度页面或涉及大量动画的角度应用程序进行测试时,使用预期条件特别有用.

例如,您可以在点击之前等待元素可点击:

var EC = protractor.ExpectedConditions;
var link = element(by.id("mylink"));

browser.wait(EC.elementToBeClickable(link), "10000", "The link is still not clickable");
link.click();

还有其他内置的预期条件,例如:

• presenseOf()
• visibilityOf()
• alertIsPresent()
• textToBePresentInElementValue()
• 等等

并且,编写自定义预期条件很容易,示例用例:

• 测试链接样式更改

您还可以结合预期时使用and,or并且not,如:

var urlChanged = function() {
  return browser.getCurrentUrl().then(function(url) {
    return url != 'http://www.angularjs.org';
  });
};

// condition to wait for url to change, title to contain 'foo', and $('abc') element to contain text 'bar'
var condition = EC.and(urlChanged, EC.titleContains('foo'), EC.textToBePresentInElement($('abc'), 'bar'));
$('navButton').click();
browser.wait(condition, 5000); //wait for condition to be true.