在量角器中定义页面对象的规范方法答案

【问题标题】：Canonical way to define page objects in Protractor在量角器中定义页面对象的规范方法
【发布时间】：2015-07-17 00:02:15
【问题描述】：

我们使用Page Object pattern 已经有一段时间了。它绝对有助于组织端到端测试并使测试更具可读性和简洁性。

正如Using Page Objects to Organize Tests Protractor 文档页面向我们展示的那样，我们将每个页面对象定义为一个函数并使用new 来“实例化”它：

"use strict";

var HeaderPage = function () {
    this.logo = element(by.css("div.navbar-header img"));
}

module.exports = HeaderPage;

用法：

"use strict";

var HeaderPage = require("./../po/header.po.js");

describe("Header Look and Feel", function () {
    var header;

    beforeEach(function () {
        browser.get("/#login");
        header = new HeaderPage();
    });

    it("should show logo", function () {
        expect(header.logo.isDisplayed()).toBe(true);
    });

});

但是，最近在Protractor: Angular testing made easy Google 测试博客文章中，我注意到页面对象被定义为对象：

var angularHomepage = {
    nameInput : element(by.model('yourName')),
    greeting : element(by.binding('yourName')),
    get : function() {
        browser.get('index.html');
    },
    setName : function(name) {
        this.nameInput.sendKeys(name);
    }
};

这两种引入Page Objects的方式有什么区别？我应该更喜欢一个吗？

【问题讨论】：

我们正在制定新的风格指南。它应该很快就会发布。

标签： javascript angularjs testing protractor pageobjects

【解决方案1】：

最终，我认为这是个人喜好问题。

是的，您可以使用构造函数模式并在每个测试套件中实例化一个单例...是的，您可以使用上面的简单对象文字...是的，您可以使用工厂函数...

通过“类”（无论是伪语法还是 ES2015 语法）使用继承来构建代码与通过 mixins 扩展的对象在一般应用程序开发中是一个更广泛的争论，更不用说 e2e 测试了！

主要是在您的测试套件中进行清晰、一致的实践，并尽可能提高代码的可重用性。

【讨论】：

【解决方案2】：

Alecxe，我也有同样的问题。对我来说，答案归结为扩展基于构造函数的页面对象的能力。对于我不需要扩展的东西（例如，使用 basePage），我使用对象文字。

这只是基于我阅读和尝试的内容...我很乐意了解更好/不同的模式。

我期待阅读风格指南，Andres。

【讨论】：