Protractor - 对象

本章详细讨论了 Protractor 中的对象。

什么是页面对象？

页面对象是一种设计模式，它在编写端到端测试中变得流行起来，目的是增强测试维护并减少代码重复。它可以定义为一个面向对象的类，作为被测应用 (AUT) 页面接口。但是，在深入研究页面对象之前，我们必须了解自动化 UI 测试的挑战以及处理这些挑战的方法。

自动化 UI 测试的挑战

以下是自动化 UI 测试的一些常见挑战：

UI 更改

使用 UI 测试时非常常见的问题是 UI 中发生的更改。例如，按钮或文本框等经常发生更改，并为 UI 测试带来问题。

缺乏 DSL（领域特定语言）支持

UI 测试的另一个问题是缺乏 DSL 支持。由于这个问题，很难理解正在测试的内容。

大量重复/代码重复

UI 测试中的下一个常见问题是存在大量重复或代码重复。可以通过以下几行代码来理解：

element(by.model(‘event.name’)).sendKeys(‘An Event’);
element(by.model(‘event.name’)).sendKeys(‘Module 3’);
element(by.model(‘event.name’));

维护困难

由于上述挑战，维护变得很头疼。这是因为我们必须找到所有实例，替换为新名称、选择器和其他代码。我们还需要花费大量时间来使测试与重构保持一致。

测试失败

UI 测试中的另一个挑战是测试中发生大量失败。

处理挑战的方法

我们已经看到了一些 UI 测试的常见挑战。处理此类挑战的一些方法如下：

手动更新引用

处理上述挑战的第一个选择是手动更新引用。此选项的问题在于我们必须手动更改代码以及测试。当您只有一个或两个测试文件时，可以这样做，但是如果项目中有数百个测试文件怎么办？

使用页面对象

处理上述挑战的另一个选择是使用页面对象。页面对象基本上是一个简单的 JavaScript，它封装了 Angular 模板的属性。例如，以下规范文件是在没有页面对象和有页面对象的情况下编写的，以便理解其区别：

无页面对象

describe('angularjs homepage', function() {
   it('should greet the named user', function() {
      browser.get('http://www.angularjs.org');
      element(by.model('yourName')).sendKeys('Julie');
      var greeting = element(by.binding('yourName'));
      expect(greeting.getText()).toEqual('Hello Julie!');
   });
});

有页面对象

要使用页面对象编写代码，首先需要创建一个页面对象。因此，上面示例的页面对象可能如下所示：

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.getGreetingText = function() {
      return greeting.getText();
   };
};
module.exports = new AngularHomepage();

使用页面对象组织测试

我们在上面的示例中已经看到了页面对象的使用来处理 UI 测试的挑战。接下来，我们将讨论如何使用它们来组织测试。为此，我们需要修改测试脚本，而无需修改测试脚本的功能。

示例

为了理解这个概念，我们采用上面带有页面对象的配置文件。我们需要修改测试脚本如下：

var angularHomepage = require('./AngularHomepage');
describe('angularjs homepage', function() {
   it('should greet the named user', function() {
      angularHomepage.get();

      angularHomepage.setName('Julie');
   
      expect(angularHomepage.getGreetingText()).toEqual
      ('Hello Julie!');
   });
});

请注意，页面对象的路径相对于您的规范。

同样，我们还可以将测试套件分成多个测试套件。然后可以更改配置文件如下：

exports.config = {
   // The address of a running selenium server.
   seleniumAddress: 'https://127.0.0.1:4444/wd/hub',

   // Capabilities to be passed to the webdriver instance.
   capabilities: {
      'browserName': 'chrome'
   },
   // Spec patterns are relative to the location of the spec file. They may
   // include glob patterns.
   suites: {
      homepage: 'tests/e2e/homepage/**/*Spec.js',
      search: ['tests/e2e/contact_search/**/*Spec.js',
         'tests/e2e/venue_search/**/*Spec.js']
   },

   // Options to be passed to Jasmine-node.
   jasmineNodeOpts: {
      showColors: true, // Use colors in the command line report.
   }
};

现在，我们可以轻松地在运行一个或另一个测试套件之间切换。以下命令将仅运行测试的主页部分：

protractor protractor.conf.js --suite homepage

同样，我们可以使用以下命令运行特定的测试套件：

protractor protractor.conf.js --suite homepage,search

打印页面