搭建自己的前端自动化测试脚手架（一）

搭建自己的前端自动化测试脚手架（一）

LancerComet at 17:55, 2016.07.17.
欢迎转载，转载时还请保留作者署名。

随着前端项目规模的日益膨胀，自动化测试越来越受到广大前端与测试朋友关注，不过可惜的是目前中文社区关于自动化测试的内容还不是很多，这对自动化测试的推广而言带来了一定阻力。在下希望通过简短的文章，给更多的朋友一个简单的入门，能够接触到自动化测试的世界。

前端的测试可以简单地看成 单元测试 与 端到端测试 ，在此我们讨论的是后者。

目的

释放双手，缓解压力，让浏览器在那儿自嗨，我们盯着屏幕喝点水看测试是不是全通过就好，哈。
图片略大，请耐心等待……

工具选择

可能有朋友以前听过或使用过 Phantom.js 进行测试，用起来是不是很（酸）爽的感觉啊？

在下觉得 Phantom.js 目前作为测试工具的不足之处：

• 就是测界面的，没界面，心虚啊；

• API 有时还不能满足测试需求；

• 不能使用 ES2015 编写测试代码；

• 不能良好和现有项目代码结合，不能随心所欲引入外部组件；

• evaluate 函数内不能引用外部变量；

• 调试不方便；

• 有测试朋友表示这货需要专职前端维护；

• ……

有没有什么方案能够做到：

• 我能一遍喝着茶一边看着它跑；

• API 功能足够，且扩展性强；

• 能够使用 ES2015；

• 能够和现有项目结合，引入项目配置与外部模块；

• 调试方便，比如能使用 Webstorm 或 VS Code 的控制台；

• 能够调取 IE、Firefox、Chrome 这种外部浏览器；

• 使用 BDD 与 TDD 编写测试案例；

• ……

回答是，有！

为了满足以上需求，我们将使用 Selenium 与 Nightwatch 搭建我们的测试脚手架。前者是一款 Web 的自动化测试环境，它将帮我们搭建好测试环境，调取系统安装的浏览器，在浏览器里执行一切自动化行为；后者是一款 Test Runner，可以简单理解为前者的控制软件，它将提供一系列接口供我们编写测试案例，同时也是与现有前端项目结合的桥梁。

我们将使用 selenium-standalone 安装和管理 Selenium 而不是手工设置原版程序。selenium-standalone 是一款基于 Node.JS 的 Selenium 管理工具包，对于前端而言更加友好。

另外，Selenium 与 Nightwatch 也是 Vue-cli 生成的 Vue Webpack 项目的标配组件，所以如果您在使用 Vue + Webpack 构建项目，本文对您也会有所帮助，同时您可以使用 Vue-cli 帮您自动配置好测试环境，非常方便。

Vue-cli 还可以自动完成 单元测试 的配置，工具选型为 Karma + Mocha + Chai.

准备出发

有了以上的初步了解，我们就可以准备着手搭建我们自己的测试环境了，让我们短暂休息一下，下一章见！

下一篇：搭建自己的前端自动化测试脚手架（二）