搭建自己的前端自动化测试脚手架（一）
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.
准备出发
有了以上的初步了解，我们就可以准备着手搭建我们自己的测试环境了，让我们短暂休息一下，下一章见！
