所以今天我一直致力于使用 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>)
,但这似乎具有相同的效果。有人能指出我做错了什么以及为什么没有发生重定向?我在这里遗漏了一些明显的东西吗?提前致谢!
最佳答案
如果您的登录页面不是 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 上写了更多关于状态导航和页面对象的内容。
关于angularjs - 单击按钮后,Angular Protractor end-2-end 测试失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31944118/