Protractor - 对象

---

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

什么是页面对象？

页面对象是一种在编写 e2e 测试时流行的设计模式，以增强测试维护并减少代码重复。它可以被定义为一个面向对象的类，充当 AUT（被测应用程序）页面的接口。但是，在深入研究页面对象之前，我们必须了解自动化 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: 'http://localhost: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