鉴于我正在利用页面对象模式构建我的 angularjs Protractor e2e 测试套件。
我尽可能合理地将页面对象代码分离在不同的文件中。
启用页面对象继承的好方法是什么? javascript经典继承?基于 Object.create() 的继承?其他?
我应该将期望保留在页面对象内吗?或者支持马丁·福勒通过将它们移动到断言库来选择 http://martinfowler.com/bliki/PageObject.html?在这种情况下,在这个 javascript-nodejs 技术堆栈中到底会是什么样子?
我准备了一个现场 jsfiddle 游乐场在这里 https://c9.io/elgalu/pageobjects这样你就可以尝试你的改进。
或者只是将代码粘贴到答案中,为了清楚起见,我将粘贴下面的 jsfiddle 内容:
登录页面.js
"use strict";
// A Page Object is a Singleton, so no need to constructors or classic js inheritance,
// please tell me if I'm wrong or what's the utility of creating a (new LoginPage())
// every time a spec need to use this login page.
var loginPage = {
// Page Object Elements
userElm: $('.user.loginPage'),
// Page Object Assertions
// Martin Fowler [doesn't favor](http://martinfowler.com/bliki/PageObject.html)
// assertions in page objects, I'm open to suggestions on how to move
// the assertions away from the Page Object and see how an assertion library
// could like like in protractor.
assertInputsDisplayed: function() {
return ('Assertion: this.userElm: '+this.userElm);
},
// Page Object Actions
get: function () {
return ('navigating to LoginPage with userElm: '+this.userElm);
}
};
module.exports.loginPage = loginPage;
登录对话框.js
"use strict";
var loginPage = require('./loginPage.js').loginPage;
var helpers = require('./helpers.js');
// Inherit properties from another Page Object
var loginDialog = helpers.extend({}, Object.create(loginPage), {
// Page Object Elements
userElm: $('.user.loginDialog'),
// Page Object Actions
get: function () {
return ('navigating to LoginDialog with userElm: '+this.userElm);
},
logout: function () {
return ('logging out of Dialog. user was: '+this.userElm);
}
});
module.exports.loginDialog = loginDialog;
助手.js
"use strict";
// some helper to avoid adding an external dependency for now
var extend = function(target) {
var sources = [].slice.call(arguments, 1);
sources.forEach(function (source) {
for (var prop in source) {
target[prop] = source[prop];
}
});
return target;
};
usage.js
"use strict";
// Mock $() for easy unit testing this on nodejs REPL
global.$ = function(args) { return ('$BUILT '+args); };
var loginPage = require('./loginPage.js').loginPage;
var loginDialog = require('./loginDialog.js').loginDialog;
console.log(loginPage.userElm); //=> '$BUILT .user.loginPage'
console.log(loginDialog.userElm); //=> '$BUILT .user.loginDialog'
console.log(loginPage.get()); //=> 'navigating to LoginPage with userElm: $BUILT .user.loginPage'
console.log(loginDialog.get()); //=> 'navigating to LoginPage with userElm: $BUILT .user.loginDialog'
console.log(loginPage.assertInputsDisplayed()); //=> 'LoginPage assertion: this.userElm: $BUILT .user.loginPage'
console.log(loginDialog.assertInputsDisplayed()); //=> 'LoginPage assertion: this.userElm: $BUILT .user.loginDialog'
//loginPage.logout(); //=> TypeError: Object #<Object> has no method 'logout'
console.log(loginDialog.logout()); //=> 'logging out of Dialog. user was: $BUILT .user.loginDialog'