protractor - 页面对象的正确 Protractor 语法是什么？

Question

我遇到过 Protractor 的页面对象的不同类型的语法，我想知道它们的背景是什么以及建议采用哪种方式。

这是 Protractor 教程中的官方 PageObject 语法。我最喜欢它，因为它清晰易读:

use strict;

var AngularHomepage = function() {
  var nameInput = element(by.model('yourName'));
  var greeting = element(by.binding('yourName'));

  this.get = function() {
    browser.get('http://www.angularjs.org');
  };

  this.setName = function(name) {
    nameInput.sendKeys(name);
  };

  this.getGreeting = function() {
    return greeting.getText();
  };
};
module.exports = AngularHomepage;

但是，我也发现了这种:

'use strict';

var AngularPage = function () {
  browser.get('http://www.angularjs.org');
};

    AngularPage.prototype  = Object.create({}, {
      todoText:  {   get: function ()     { return element(by.model('todoText'));             }},
      addButton: {   get: function ()     { return element(by.css('[value="add"]'));          }},
      yourName:  {   get: function ()     { return element(by.model('yourName'));             }},
      greeting:  {   get: function ()     { return element(by.binding('yourName')).getText(); }},
      todoList:  {   get: function ()     { return element.all(by.repeater('todo in todos')); }},
      typeName:  { value: function (keys) { return this.yourName.sendKeys(keys);              }} ,
      todoAt:    { value: function (idx)  { return this.todoList.get(idx).getText();          }},
      addTodo:   { value: function (todo) {
        this.todoText.sendKeys(todo);
        this.addButton.click();
      }}
    });

    module.exports = AngularPage;

这两种方法的优缺点是什么(除了可读性)？第二个是最新的吗？我已经看到 WebdriverIO 使用这种格式。

我还从 Gitter 上的一个人那里听说第一个条目效率低下。有人可以向我解释为什么吗？

Answer 1

页面对象模型 框架变得流行主要是因为:

更少的代码重复

易于长期维护

高可读性

因此，通常我们会根据测试范围和需求，按照合适的框架(pom)模式开发测试框架(pom)，以方便我们使用。没有这样的规则说，我们应该严格遵循任何框架。

注意:框架是为了让我们的任务变得简单、以结果为导向且有效

在你的情况下 ，第一个看起来不错，很容易。并且在维护阶段不会导致困惑或冲突。

示例 :第一种情况-> 元素定位器的声明发生在每个页面的顶部。如果将来更改任何元素定位器，将很容易更改。

而在第二种情况下，定位器在块级别声明(散布在页面上)。如果将来需要，识别和更改定位器将是一个耗时的过程。

所以，根据以上几点选择你觉得舒服的那一个。