javascript - Protractor 中的嵌套页面对象

Question

问题:

在 Protractor 中定义嵌套页面对象的规范方法是什么？

用例:

我们有一个复杂的页面，由多个部分组成:过滤面板、网格、摘要部分、一侧的控制面板。将所有元素和方法定义放入单个文件和单个页面对象中是行不通的，也无法扩展——它变得一团糟，难以维护。

Answer 1

当涉及到页面对象以及如何维护它们时，这更像是一个一般性的话题。前段时间我偶然发现了一种我喜欢的页面对象设计模式技术，它对我来说很有意义。

与其在父页面对象中实例化子页面对象，不如遵循 javascript 的原型(prototype)继承 概念。这有很多好处，但首先让我展示一下我们如何实现它:

首先我们将创建我们的父页面对象ParentPage:

// parentPage.js
var ParentPage = function () {
// defining common elements
this.someElement = element(by.id("someid"));

// defining common methods
ParentPage.prototype.open = function (path) {
browser.get('/' + path)
}
}

module.exports = new ParentPage();  //export instance of this parent page object

We will always export an instance of a page object and never create that instance in the test. Since we are writing end to end tests we always see the page as a stateless construct the same way as each http request is a stateless construct.

现在让我们创建我们的子页面对象 ChildPage，我们将使用 Object.create 方法来继承我们父页面的原型(prototype):

//childPage.js
var ParentPage = require('./parentPage')
var ChildPage = Object.create(ParentPage, {
/**
 * define elements
 */
username: { get: function () { return element(by.css('#username')); } },
password: { get: function () { return element(by.css('#password')); } },
form:     { get: function () { return element(by.css('#login')); } },
/**
 * define or overwrite parent page methods
 */
open: { value: function() {
    ParentPage.open.call(this, 'login'); // we are overriding parent page's open method
} },
submit: { value: function() {
    this.form.click();
} }
});
module.exports = ChildPage

we are defining locators in getter functions, These functions get evaluated when you actually access the property and not when you generate the object. With that you always request the element before you do an action on it.

Object.create 方法返回该页面的一个实例，因此我们可以立即开始使用它。

// childPage.spec.js
var ChildPage = require('../pageobjects/childPage');
describe('login form', function () {
it('test user login', function () {
    ChildPage.open();
    ChildPage.username.sendKeys('foo');
    ChildPage.password.sendKeys('bar');
    ChildPage.submit();
});

请注意，在我们的规范中，我们只需要子页面对象并利用/覆盖父页面对象。以下是这种设计模式的好处:

• 消除父子页面对象之间的紧密耦合
• 促进页面对象之间的继承
• 延迟加载元素
• 方法和 Action 的封装
• 比 parentPage.childPage.someElement.click();
更清晰、更容易理解元素关系

我在 webdriverIO's 中找到了这个设计模式开发人员指南，我解释的上述大部分方法都来自该指南。随意探索它，让我知道你的想法!