量角器页面对象继承 [英] Protractor Page Objects Inheritance
问题描述
由于我建设我angularjs量角器端到端测试功能套件充分利用页面对象的模式。
和我在不同的文件中单独的页面对象code尽可能合理的。
-
这将是一个很好的方法，以使页面对象继承？ JavaScript的经典传承？的Object.create（）基于继承？其他？
-
我应该保持页面对象中的期望是什么？或有利于Martin Fowler的 optinion，将它们移到一个断言库？在这种情况下，究竟如何将看起来像在这个JavaScript的技术的NodeJS栈？
我已经prepared href=\"https://c9.io/elgalu/pageobjects\">住在这里的jsfiddle游乐场所以你可以尝试在你的进步。一个 或者简单地粘贴在回答中code，我会粘贴以下的jsfiddle内容清晰： loginPage.js
使用严格的;//页面对象是一个Singleton，所以无需构造或经典的js继承，
//请告诉我，如果我错了或什么是创建的实用程序（新LoginPage（））
//每一次规格需要使用这个登录页面。
VAR loginPage = {
//网页对象元素
userElm：$（'。user.loginPage'）， // Page对象断言
// Martin Fowler的[不利于]（http://martinfowler.com/bliki/PageObject.html）
//在页面对象断言，我愿意就如何移动的建议
//断言远离Page对象，看看如何断言库
//可能喜欢像量角器。
assertInputsDisplayed：功能（）{
回报（'断言：this.userElm：'+ this.userElm）;
}， // Page对象操作
得到：函数（）{
回报（导航与userElm到LoginPage：'+ this.userElm）;
}
};module.exports.loginPage = loginPage;
loginDialog.js
使用严格的;VAR loginPage =要求（'./ loginPage.js'）loginPage。
VAR助手=要求（'./ helpers.js'）;从另一个页面对象//继承性
VAR =的LoginDialog helpers.extend（{}的Object.create（loginPage）{
//网页对象元素
userElm：$（'。user.loginDialog'）， // Page对象操作
得到：函数（）{
回报（导航与userElm到一个LoginDialog：'+ this.userElm）;
}， 注销：功能（）{
回报（'退出对话框用户的是：'+ this.userElm）;
}
}）;module.exports.loginDialog =一个LoginDialog;
helpers.js
使用严格的;//一些帮助，以避免增加一个外部的依赖，现在
VAR延长=功能（目标）{
无功源= [] .slice.call（参数，1）;
sources.forEach（函数（源）{
对于（源VAR道具）{
目标[道具] =源[道具]
}
}）;
返回的目标;
};
usage.js
使用严格的;//模拟$（），便于单位REPL的NodeJS这个测试
。全球$ =功能（参数）{回报（'$内置'+参数）; };VAR loginPage =要求（'./ loginPage.js'）loginPage。
VAR =的LoginDialog要求（'./ loginDialog.js'）一个LoginDialog。的console.log（loginPage.userElm）; // =＆GT; '$内置.user.loginPage
的console.log（loginDialog.userElm）; // =＆GT; '$内置.user.loginDialog
的console.log（loginPage.get（））; // =＆GT; 导航与userElm到LoginPage：$内置.user.loginPage
的console.log（loginDialog.get（））; // =＆GT; 导航与userElm到LoginPage：$内置.user.loginDialog
的console.log（loginPage.assertInputsDisplayed（））; // =＆GT; LoginPage断言：this.userElm：$内置.user.loginPage
的console.log（loginDialog.assertInputsDisplayed（））; // =＆GT; LoginPage断言：this.userElm：$内置.user.loginDialog//loginPage.logout（）; // =＆GT;类型错误：对象＃＆LT;对象＆gt;没有方法'注销'
的console.log（loginDialog.logout（））; // =＆GT; 退出对话框。用户是：$内置.user.loginDialog
下面是链接到一个教程中，我设置了一些训练我的同事对创造良好的量角器测试套件。
这一切都同住，同一个演示网站，你可以参观，游览等。
<一个href=\"https://github.com/Droogans/ProtractorPageObjects\">https://github.com/Droogans/ProtractorPageObjects
这将设置你安装，大纲，组织技术等。
欢迎，如果您有任何问题离开的问题。
Given i'm building my angularjs protractor e2e tesing suite leveraging the page objects pattern.
And i separate page object code in different files as much as reasonable.
What would be a good approach to enable page objects inheritance? javascript classic inheritance? Object.create() based inheritance? Other?
Should i keep expectations within the page object? Or favor Martin Fowler optinion by moving them to an assertion library? in which case how exactly would that look like in this javascript-nodejs technology stack?
I've prepared a live jsfiddle playground here so you can try your improvements on.
Or simply paste code within the answer, i'll paste the jsfiddle content below for clarity:
loginPage.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;
loginDialog.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;
helpers.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'
Here is link to a tutorial I set up for training some of my co-workers on create good Protractor test suites.
It's all live, with a demo site that you can visit, explore, etc.
https://github.com/Droogans/ProtractorPageObjects
This will set you up with installation, outlines, organizational techniques, and more.
Feel free to leave an issue if you have any trouble.
这篇关于量角器页面对象继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
