angularjs - 单击按钮后，Angular Protractor end-2-end 测试失败

Question

所以今天我一直致力于使用 Protractor 为 Angular JS 应用程序设置端到端测试。为了编写更清晰的测试，我使用了 Protractor 网站上描述的 Page Object 模式。

测试场景: 用户进入网站时，需要先登录。通过填写他们的凭据并单击按钮，用户将被重定向到验证页面。在那里，他们需要输入通过电子邮件发送给他们的代码。在这种情况下，运行 end-2-end 测试 ( 123456 ) 时，验证代码始终相同。当用户输入他/她的代码后，需要点击验证按钮才能进入登录页面( organisations )。有一个组织列表呈现给用户。

Protractor 测试:

organisations.spec.js

'use strict';

describe('when selecting organisation', function () {
  var page;

  var util = require('../../util');

  browser.get('/#/login');

  // login before each test case
  beforeEach(function () {
    page = require('./organisations.po');
    util.login('username', 'password');
  });

  // logout after each one
  afterEach(function () {
    page.logoutButton.click();
  });

  it('should have a list of organisations', function () {
    expect(browser.getCurrentUrl()).toEqual('http://localhost:9111/#/organisations');
    expect(page.organisationList.isPresent()).toBe(true);
  });
});

organisations.po.js (the page object)

'use strict';

var MainPage = function () {
  // organisations
  this.organisationList = element(by.css('.select-list'));
  this.logoutButton = element(by.css('.logout-button'));
};

module.exports = new MainPage();

util.js (code for login process)

'use strict';

var Util = function () {
  this.login = function login(username, password) {
    browser.get('/#/login');

    var loginPage = require('./spec/login/login.po');
    var validationPage = require('./spec/login/validate.po');

    // fill in login form
    loginPage.username.sendKeys(username);
    loginPage.password.sendKeys(password);

    // submit login form and navigate to validation page
    loginPage.loginButton.click();

    // fill in validation form
    validationPage.validationCode.sendKeys('123456');

    // submit validation form and navigate to landing page
    validationPage.submitValidateBtn.click();
  }
};

module.exports = new Util();

运行测试时会发生什么: Protractor 能够填写用户凭据并单击登录按钮。但是，不会发生到验证页面的相应重定向，导致预期失败，因为 Protractor 无法定位页面对象，因为这些对象位于另一个页面上。 Here 是 Protractor 产生的错误消息的一部分。以防万一， here 可以看到正在使用的 Protractor 配置文件。

我尝试在按钮点击周围放置显式等待( browser.wait(<condition>) ，但这似乎具有相同的效果。有人能指出我做错了什么以及为什么没有发生重定向？我在这里遗漏了一些明显的东西吗？提前致谢!

Answer 1

如果您的登录页面不是 Angular，请仔细检查是否需要在 Protractor 中将 browser.ignoreSynchronization 设置为 false。

如果它们是 Angular，我认为您需要在登录后等待 click promise 完成？以下是否有效？

loginPage.loginButton.click().then(function () {
  validationPage.validationCode.sendKeys('123456');
  ...
}

通过这种方式，Protractor 自己执行 wait(在其他答案中建议)，前提是登录/验证页面确实是在 Angular 中完成的。

作为相关说明，在您的 beforeEach 和 afterEach 中，您可能还想使用可选的 done 回调，以便实际测试仅在登录成功后开始:

beforeEach(function (done) {
    ...
    util.login(user, pw).then(done);
}

但是，这确实需要您的 login 方法实际上返回验证单击的 promise 。 (我通常让我所有的页面对象方法返回 promise )。

还与您的页面对象相关，与其使用仅包含元素查找器作为字段的 Login 页面对象，为什么不为该页面对象提供现在位于 util 类中的更抽象的登录方法？

此外，我倾向于给每个页面对象一个“自检”方法，允许检查浏览器确实在预期的页面上。单击登录页面上的登录后，我希望在验证页面上。因此，我做的第一件事就是检查(断言)我确实在验证页面上。只有这样我才真正按下验证按钮。如果您的应用程序的路由被破坏，这往往会提供更清晰的错误消息。

我在 my blog 上写了更多关于状态导航和页面对象的内容。