大页面对象文件量角器的最佳实践

Question

在我之前的量角器 JS 项目中（我将使用 TS 完成这个新项目）我为我的所有元素创建了一个 class，为我的函数创建了另一个，如下所示：

specs
|_reportPage
  |_lib
    |_pageElements.js
    |_pageFunctions.js

然后我根据需要导入文件，这样很容易找到信息，因为元素列表很长。

到目前为止，量角器 TS 项目的所有在线示例都是带有几个元素和方法的短 pageObject 文件，但我想知道当页面需要很多元素并且 functions/methods .

例如，假设我们在同一个文件夹下有 5 个规范测试同一个页面，而这个页面充满了字段和表格。

此处的最佳做法是什么？为每个规范创建 1 个页面对象，创建一个包含所有元素和功能的长 class...?

感谢您的宝贵时间！

Answer 1

根据Infern0的回答，我对类做了依赖注入：

class HeaderElements {
  foo = element(by.id("foo"));
  //List goes on...
}

class HomePageElements {
  foo = element(by.id("foo"));
  //List goes on...
}


export class MainCommonElementsPage {
  headerElements: HeaderElements;
  homePageElements: HomePageElements;
  constructor() {
    this.headerElements = new HeaderElements();
    this.homePageElements = new HomePageElements();
  }    

}

Answer 2

要扩展我的答案，您可以添加附加层作为服务，它可以在不同页面中执行流程中的多个操作。

代码示例：

export class E2EService {
    mainPage: MainPage = new MainPage();
    innerPage: InnerPage = new InnerPage();

    doSomethingE2E() {
        this.mainPage.headerPage.weDoSomething();
        this.mainPage.contentPage.weDoSomething()

        this.innerPage.somethingComplicated();
    }
}
export class MainPage {
    public readonly headerPage: HeaderPage;
    public readonly contentPage: ContentPage;

}

export class InnerPage {
    headerPage: InnerHeaderPage;
    contentPage: InnerContentPage;

    public somethingComplicated() {
        this.headerPage.weDoSomething();
        this.contentPage.weDoSomething();
    }
}

export class ContentPage {
    private readonly elements = {
        // elements
    };

    public weDoSomething() {
        // code
    }

    public getElements() {
        return this.elements;
    }
}

export class HeaderPage {
    private readonly elements = {
        btn1: element(by.id('')),
        div: element(by.id('')),
        h2: element(by.id(''))
    };

    public weDoSomething() {
        // code
    }

    public getElements() {
        return this.elements;
    }
}

Answer 3

最佳实践，即使对于大型页面对象也是如此：

每个页面应该只有 1 个页面对象 class。访问该页面所需的所有工具都应位于此处。将您的页面对象视为 API.

不要将 PO 分成不同的部分，尤其是对于大页面。您最终需要修改 PO 以适应内容更改。您愿意更改 1 个文件还是 12 个文件？这也确保您的每个 e2e 测试在您更新 PO 后都将保持功能。

我有一个 PO 处理一个表单很长的页面。该表单有 12 个控件和三个按钮（取消、重置和提交）。我有大约 30 个处理表单的函数。我不喜欢在我的测试中有超过 1-2 个方法，所以如果它变得更复杂，我会添加到 PO。

大页面对象文件量角器的最佳实践

Best practices in protractor for big pageObject files

protractor