第 13 课：引入 e2e 测试

背景

e2e（end to end）测试也叫功能测试，属于黑盒测试。与单元测试不同，e2e 测试是站在用户的角度上，通过编写测试用例模拟用户的操作。例如自动打开浏览器，测试 dom 元素是否正常渲染，页面是否正常跳转，Ajax 请求是否符合预期。e2e 测试的关注点是功能是否可用，不关注代码细节，开发者可以改变代码的实现方式，用在代码重构后的功能验证非常合适。

本篇将带领大家在前端 Vue 项目中实现 e2e 测试。

配置 nightwatch

前端 e2e 测试框架涌现了很多，比如 Nightwatch、TestCafe、cypress 。Nightwatch 和 cypress 是 Vue 推荐的测试框架，社区活跃度较高，功能都较为完备，不过 cypress 目前支持 Chrome 类的浏览器，所以我们在教程中选用 Nightwatch 来实现 e2e 测试。

安装依赖

Nightwatch 中有一个比较重要的组成部分是 WebDriver 服务器（例如 ChromeDriver 或者 selenium server），WebDriver 服务器负责对浏览器进行一系列的操作控制。Nightwatch 通过 HTTP 接口与 WebDriver 服务器通信来最终实现对浏览器的控制。因此，我们必须安装特定的 WebDriver。比如，如果我们想要测试的浏览器是 Chrome 浏览器，我们需要安装与 Chrome 浏览器相配套的 WebDriver 服务器 chromedriver。

npm install --save-dev nightwatch chromedriver

配置 Nightwatch

Nightwatch 在运行时会加载对应的配置文件，