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

所以今天我一直在为使用Protractor的Angular JS应用程序设置end-2-end测试.为了编写更干净的测试,我使用了Protractor网站上描述的 Page Object模式.

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

量角器测试：

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无法找到页面对象,因为它们位于另一页面上. Here是Protractor生成的错误消息的一部分.以防万一,here可以看到正在使用的Protractor配置文件.

我尝试在按钮点击周围进行显式等待(browser.wait(< condition>)),但这似乎有相同的效果.有人可以指出我做错了什么以及为什么重定向没有发生？我错过了这里显而易见的事情？提前谢谢！

解决方法

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

如果他们是Angular,我认为您需要等待点击承诺在登录后完成？以下工作如何？

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

通过这种方式,只要登录/验证页面确实在Angular中完成,Protractor就会自行等待(在其他答案中建议).

作为相关注释,在beforeEach和afterEach中,您可能还希望使用可选的完成回调,以便实际测试仅在登录成功后启动：

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

但是,这确实需要您的登录方法实际返回验证单击的承诺. (我通常让我的所有页面对象方法都返回promises).

也与页面对象有关,而不是只有元素查找器作为字段的Login页面对象,为什么不给那个页面对象提供现在在util类中的更抽象的登录方法？

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

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