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

Flat在理论上总是优于嵌套，只有在嵌套事物实际上是对可读性，模块性和可维护性的加分。在页面对象中包含子页面对象时，我没有看到任何错误。当页面对象变得过于复杂并且需要被分割成部分时，这就完美无缺。

我们已经在测试代码库中为几个页面对象完成了这项工作。我们已将这类页面对象定义为 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()是一个实用功能，我们用它来导入＆＃34;页面对象，请参阅：

Using require with relative paths

一维页面对象结构

1 个答案: