搭建自己的前端自动化测试脚手架(一)

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

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

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

目的

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

工具选择

可能有朋友以前听过或使用过 Phantom.js 进行测试,用起来是不是很(酸)爽的感觉啊?

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

  • 就是测界面的,没界面,心虚啊;

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

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

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

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

  • 调试不方便;

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

  • ……

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

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

  • API 功能足够,且扩展性强;

  • 能够使用 ES2015;

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

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

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

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

  • ……

回答是,有!

为了满足以上需求,我们将使用 SeleniumNightwatch 搭建我们的测试脚手架。前者是一款 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.

准备出发

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

下一篇:搭建自己的前端自动化测试脚手架(二)

你可能感兴趣的文章

jrainlau · 2016年08月04日

这么棒的文章竟然只有一丢丢热度!!感谢作者!!!

回复

逐风_57e8cd42052e2 · 2016年10月10日

写得太详细啦!这篇对我们这些小白十分友好,希望作者多写点这样的文章。

回复

载入中...
LancerComet LancerComet

674 声望

发布于专栏

随记

# Carry Your World #

13 人关注