量角器 – 对象

本章详细讨论了量角器中的对象。

什么是页面对象？

页面对象是一种设计模式，在编写 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