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

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

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.

准备出发

有了以上的初步了解，咱们就能够准备着手搭建咱们本身的测试环境了，让咱们短暂休息一下，下一章见！

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