页面对象的正确量角器语法是什么? [英] What's the correct Protractor's syntax for Page Objects?

问题描述

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

I've come across different types of syntax for Protractor's Page Objects and I was wondering, what's their background and which way is suggested.

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

This is the official PageObject syntax from Protractor's tutorial. I like it the most, because it's clear and readable:

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;

不过，我也发现了这种:

However, I've also found this kind:

'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 使用这种格式.

What are the pros/cons of those two approaches (apart from readability)? Is the second one up-to-date? I've seen that WebdriverIO uses that format.

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

I've also heard from one guy on Gitter that the first entry is inefficient. Can someone explain to me why?

推荐答案

Page Object Model 框架变得流行主要是因为:

Page Object Model framework becomes popular mainly because of:

1. 减少代码重复
2. 易于长期维护
3. 高可读性

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

So, generally we develop test framework(pom) for our convenience based on testing scope and needs by following suitable framework(pom) patterns. There are NO such rules which says that, strictly we should follow any framework.

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

NOTE: Framework is, to make our task easy, result oriented and effective

就您而言，第一个看起来不错且简单.并且在维护阶段不会导致混乱或冲突.

In your case, 1st one looks good and easy. And it does not leads to confusion or conflict while in maintenance phase of it.

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

Example: 1st case-> element locator's declaration happens at top of each page. It would be easy to change in case any element locator changed in future.

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

Whereas in 2nd case, locators declared in block level(scatter across the page). It would be a time taking process to identify and change the locators if required in future.

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

So, Choose which one you feel comfortable based on above points.

这篇关于页面对象的正确量角器语法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！