AngularJs E2E Testing 详解

在开发应用程序的过程中，我们需要确保这些程序在部署后正常运行。为了验证这些应用程序的功能，我们需要进行端到端 (End to End, E2E) 测试。

E2E 测试是一个自动化的过程，通过验证应用程序的模拟场景来模仿真实用户的行为。通过这种方式我们可以测试到所有层级，包括用户界面、功能、维护性、性能等。AngularJS 通过 Protractor 框架来提供 E2E 测试的支持。

简介

Protractor 是一个由 AngularJS 社区开发的 E2E 测试框架。Protractor 利用 Selenium WebDriver 来自动化用户操作，如点击按钮、键入输入、滚动窗口等，来验证应用程序的功能是否正常。当应用程序发生更改时，我们可以确保测试内容的覆盖范围，以便迅速识别和解决问题。

Protractor 能够使用 Jasmine 或 Mocha 来进行测试。测试可以在远程浏览器或本地浏览器中运行。另外，Protractor 还提供了对 AngularJS 页面的支持，以及一些与 AngularJS 相关的特性，比如 AngularJS 表达式、指令等的测试和验证。

安装

要使用 Protractor，需要先安装 Node.js 和 npm。然后，我们可以使用 npm 安装 Protractor：

npm install -g protractor

安装成功后，我们需要使用以下命令进行运行：

webdriver-manager update

该命令将会下载和安装 Selenium Server 和 Chrome Driver。这些组件可以让 Protractor 在浏览器中自动化执行测试。别忘了，我们需要保持 webdriver-manager 的运行状态。

配置

Protractor 的配置文件有以下属性：

seleniumAddress：Selenium Server 的地址，webdriver-manager 启动后会在该端口监听，Protractor 则通过该地址和端口连接 Selenium Server。
specs：测试规范，指定测试文件的位置。
capabilities：浏览器参数，指定测试所使用的浏览器。
baseUrl：测试基础 URL，指定测试将要使用的基础 URL。

以下是一个 Protractor 的配置文件例子：

// protractor.conf.js

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['example_spec.js'],
  capabilities: {
    browserName: 'chrome'
  },
  baseUrl: 'http://localhost:8000'
}

在上面的例子中，我们指定了 Selenium Server 的地址和端口、测试规范的文件位置、测试所使用的浏览器、以及测试的基础 URL。当我们运行 protractor protractor.conf.js 命令时，Protractor 会使用这些配置信息来执行测试。

示例

我们将在下面的示例中使用 Protractor 配置文件来验证 AngularJS 应用程序的一个标准示例。首先，在项目根目录下创建一个名为 protractor.conf.js 的配置文件, 然后，我们需要创建一个名为 example_spec.js 的测试规范来测试我们的示例应用程序。

示例应用程序

下面是我们要测试的简单应用程序：

// index.html

<!doctype html>
<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="MyController">
      <h1>{{hello}} world</h1>
      <button ng-click="changeGreeting()">Change greeting</button>
    </div>
  </body>
</html>

我们的应用程序使用了 AngularJS 模块 myApp 和控制器 MyController 。控制器包括一个变量 hello 和一个函数 changeGreeting()，其中，变量 hello 初始值为 "Hello"。当用户点击 "Change greeting" 按钮时， changeGreeting() 函数将会更改问候语的文本。

// app.js

angular.module('myApp', [])
  .controller('MyController', ['$scope', function($scope) {
    $scope.hello = 'Hello';

    $scope.changeGreeting = function() {
      $scope.hello = 'Hola';
    }
  }]);

编写测试

让我们开始编写我们的测试规范。测试规范是基于 Jasmine 的，我们需要使用 Jasmine 的测试方法来编写我们的应用程序测试用例。

// example_spec.js

describe('Protractor Demo App', function() {
  it('should display the correct greeting', function() {
    // 导航到 index.html 页面
    browser.get('http://localhost:8000');

    // 获取问候语的元素
    var greeting = element(by.binding('hello'));

    // 验证问候语的文本
    expect(greeting.getText()).toEqual('Hello world');

    // 更改问候语内容
    element(by.buttonText('Change greeting')).click();

    // 验证问候语的文本
    expect(greeting.getText()).toEqual('Hola world');
  });
});

在上面的测试规范中，我们首先指定了两个期望值。然后，我们使用 browser.get(url) 命令导航到 index.html 页面。接着，我们使用 element(by.binding('hello')) 命令获取问候语的元素，然后我们使用 expect(greeting.getText()).toEqual('Hello world') 命令验证问候语的初始文本是否正确。

接下来，我们使用 element(by.buttonText('Change greeting')).click() 命令更改问候语的内容。最后，我们再次验证问候语的文本，确保他得到正确的更新。

运行测试

Protractor 的测试可以通过以下方式运行：

启动 Selenium Server

webdriver-manager start

启动应用程序
在新的终端中输入以下命令：

protractor protractor.conf.js

此时，Protractor 将会运行我们的测试规范，并且在浏览器中执行所指定的操作。测试完成后，Protractor 会输出测试结果。

结论

在这篇文章中，我们了解了 AngularJS E2E 测试和 Protractor 框架，学习了如何创建 Selenium Server 和 Chrome Driver ，安装、配置并使用 Protractor ，并创建了一个测试示例来验证 AngularJS 应用程序的功能。在我们的测试规范中，我们使用了 Jasmine 的各种测试命令来确认测试的正确性。希望这篇文章可以帮助你更好的理解 E2E 测试，提高你进行 E2E 测试的技能和质量。