在上一篇文章中，我们谈到了ng的单元测试。今天，我们将讨论e2e(端到端)测试。

当我们测试一个模块的单个功能点时，单元测试是最合适的。然而，当用户与多个页面交互时出现错误时，单元测试将会失败。此时，必须使用e2e模拟用户操作来还原问题场景。当然，e2e测试也可以测试程序的健壮性，很多单元测试做不到的事情都可以通过e2e测试来完成。

以前，ng使用角度场景运行器来运行e2e测试，但现在它被量角器代替来运行e2e。

量角器

Prototracker是一个用于在Angularjs中测试e2e的框架。它是一个npm模块，构建在WebDriverJS上。Prototracker真的可以让你的测试用例在浏览器上运行，完全模拟用户的真实行为。

在下面粘贴它的一些资源地址：

1.量角器2提供的测试API。量角器3的简单用法示例。WebDriverJs指南，是量角器的核心，npm模块叫做selenium-webdriver

质子的工作原理

量角器主要依靠以下东西来运行e2e测试：

1.WebDriver APIs，即上面提到的WebDriverJs，与jsapi2相关。Selenium为前端测试提供的selenium服务器，一个后端jar包，负责与浏览器驱动进行通信。3.WebDriver浏览器驱动程序用于显示真实的网站内容并与Selenium Server进行通信。这是传输真实浏览器操作的地方。

整个操作过程如下

如果你想了解更多关于这些组件之前的交互，你可以点击这里

用ng seed项目解释e2e

我们用ng官方提供的种子项目来解释一个真实的e2e例子。首先，我们使用以下命令获取种子项目副本代码如下： gitclone https://github.com/angular/angular-seed.git

然后运行复制代码如下：npm安装

安装与相关的所有依赖文件

在这里，我们来谈谈运行e2e测试所需的配置文件。您可以看到，文件test/test/量角器-conf.js用于配置相关功能，重点关注以下属性

1.specs代表要运行的测试文件的路径。这里，e2e/*.js2.baseUrl代表测试文件中浏览器之间跳转页面的根地址。3.capabilities代表使用哪个浏览器来运行测试用例，比如chrome。您可以按如下方式设置复制代码：功能3360 { ' browser name ' : ' chrome ' }

框架代表使用哪个测试框架，这里使用jasmine

如果您想了解有关此配置文件的更多信息，可以单击此处查看

谈完配置文件，我们再来看看测试用例的编写，先在官网上贴个例子

复制代码如下：“使用严格”；

/* https://github.com/angular/量角器/blob/master/docs/入门. md */

描述('我的应用程序'，函数(){ 0

browser . get(' index . html ')；它('当位置哈希/片段为空时，应自动重定向到/view1 '，函数(){ expect(browser . getlocationaburl())。to match('/view 1 ')；});

description(' view 1 '，function(){ 0

before EACH(function(){ browser . get(' index . html #/view 1 ')；});

它('当用户导航到/view1 '时应该呈现view1 '，function(){ expect(element . all(by . CSS([ng-view]p '))。第一个()。getText())。to match(/partial for view 1/)；});

});

description(' view 2 '，function(){ 0

before EACH(function(){ browser . get(' index . html #/view 2 ')；});

它('当用户导航到/view2 '时应该呈现view2 '，function(){ expect(element . all(by . CSS([ng-view]p '))。第一个()。getText())。to match(/partial for view 2/)；});

});});首先，jasmine框架支持上述语法。如果你不明白它的用法，你可以点击这里

在这里，我只讲一些上面例子中量角器提供的常用方法和属性

1.browser，一个全局对象，代表当前浏览器的一个实例。常用的get方法用于更改浏览器的地址。2.element是一个全局对象，它提供了像jquery一样查找文档元素的功能。它经常与by object连用。3.by是一个全局对象，它提供了一个选择器类型，例如css、model、bind和其他功能来查找元素。

关于元素和by的方法，请参考上述量角器api文档

说到这里，是时候运行上面的测试用例了。命令相对简单

复制代码如下：npm运行update-webdriver

这个负责下载相关的浏览器驱动和硒服务器本地jar包。一般来说，这会失败。因为这两个资源都在google Server中，所以你可以通过翻墙使用浏览器单独下载。地址如下：

1.Chrome驱动地址，一般下载chromedriver_2.9.zip文件.

2.下载selenium-server的本地jar包，一般下载文件selenium-server-standalone-2 . 40 . 0 . jar .

然后将硒服务器复制到量角器包中的硒文件夹中。如果上面的命令超时，文件会出现在这里，但是是空的，可以直接替换；我还想在这里复制chromedriver_2.9.zip的解压缩文件

最后，运行以下命令查看测试结果

复制代码如下：npm运行量角器

要了解有关种子项目中命令行的更多信息，您可以单击此处查看。

摘要

Ng的e2e测试比单元测试配置复杂得多，但是它可以做很多事情，所以如果值得的话可以试试。如果你有任何问题，可以回复评论。