代码之家 › 专栏 › 技术社区 › Alexandre

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

protractor

Alexandre · 技术社区 · 6 年前

在我以前的量角器JS项目(这个新项目我将用TS来完成)中,我为我的所有元素创建了一个类,为我的函数创建了另一个类,如下所示:

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

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

到目前为止,所有的例子在线量角器TS项目是简短的pageObject文件与一些元素和方法,但我想知道如何正确地进行时,页面需要大量的元素和函数/方法。

谢谢你的时间!

0 回复 | 直到 6 年前

Infern0 6 年前

为了扩展我的答案,你可以添加额外的层作为服务它可以从不同页面中的流执行多个操作。

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;
    }
}

Alexandre 6 年前

根据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();
  }    

}

ChadESmith42 6 年前

即使对于大型页面对象,最佳做法也是:

每个页面只能有一个页面对象类。访问该页面所需的所有工具都应位于此处。把你的页面对象想象成一个API。

不要把采购订单分成不同的部分,尤其是大的页面。您最终需要修改PO以适应内容的变化。您想更改1个文件还是12个文件?这还可以确保在更新PO后,每个e2e测试都将保持正常。

我有一个订单,处理一个冗长的表格页。表单有12个控件和3个按钮(取消、重置和提交)。我有大约30个函数来处理表单。我不喜欢在我的测试中有超过1-2个方法,所以如果它变得更复杂,我会添加到PO中。