一维页面对象结构

Question

我遇到了标准页面对象设计是一维的情况。这些页面非常大，包含许多（大部分是唯一的）页面部分。

现有的页面对象语料库如下所示：

this.pageHeaderLogin = $$('div.header > a.login');
this.pageHeaderSignUp = $$('div.header > a.signup');
this.pageHeaderContact = $$('div.header > a.contact');
this.pageIntroSectionTitle = $$('div.intro > span.title');
this.pageIntroSectionText = $$('div.intro > span.description');

以此类推，有多达 50-100 个元素，this 的所有直接子级。

在我看来，更好的结构不是一维的，而是类似于页面本身的结构的划分。所以我更喜欢做一个页面对象，比如：

this.pageHeader.login = $$('div.header > a.login');
this.pageHeader.signUp = $$('div.header > a.signup');
...
this.pageIntroSection.title = $$('div.intro > span.title');

等等。

不幸的是，有人告诉我这太复杂了。我想提出一个论点，它不仅不复杂，而且实际上更有条理，但是页面对象的所有示例都太小，无法说明一维结构之外的任何内容。

谁能给我指出一个非一维页面对象的好例子，我可以用作参考来展示这种设计的好处？

Answer 1

在理论上，平面总是比嵌套更好，而且只有在使事物嵌套实际上对可读性、模块化和可维护性有好处之前。我认为在页面对象中包含子页面对象没有任何问题。当页面对象变得过于复杂并需要拆分为多个部分时，这非常有意义。

我们已经为我们的测试代码库中的几个页面对象做到了这一点。我们已将此类页面对象定义为 packages - 内部带有 index.js 的目录，示例页面对象目录结构：

- po
  -- somepage.po.js
  -- someotherpage.po.js
  -- page.po
    -- index.js
    -- subpage.po.js

index.js 里面是这样的：

var SubPage = require("./subpage.po"),
var Page = function () {
    this.somefield = element(by.id("myid"));

    this.subPage = new SubPage(this);
}

module.exports = new Page();

请注意，我们在这里将 this 传递给 SubPage 构造函数 - 以便它访问父级的页面对象字段 - 在某些情况下可能很方便。

下面是如何在测试中使用这个嵌套页面对象：

var page = requirePO("page");

describe("Some Test", function () {
    it("should do something good", function () {
        page.somefield.click();
        page.subPage.someotherfield.sendKeys("test");
    });
});

requirePO() 是我们用来“导入”页面对象的实用函数，更多信息请参见：

• Using require with relative paths