前端自动化测试工具 overview

本文作者：IMWeb 邝伟科 原文出处：IMWeb社区 未经同意，禁止转载

总结最近了解的前端测试的相关内容，如有问题，欢迎指出。

TDD vs BDD：

TDD(Test Drivin Development)是测试驱动开发，强调的是一种开发方式，以测试来驱动整个项目，即先根据接口完成测试编写，然后在完成功能时要不断通过测试，最终目的是通过所有测试。

BDD(Behavior Drivin Development)行为驱动开发，可以理解为也是TDD的分支，即也是测试驱动，但BDD强调的是写测试的风格，即测试要写得像自然语言，运用一些比如expect、should等跟自然语言相近的断言，让项目的各个成员甚至产品都能看懂测试，甚至编写测试。

前端测试化工具简单汇总和比较

Qunit

jquery出的自动化测试库，没什么好说的，可以想象其跟jquery UI及jquery animation等库结局一样，逃脱不了各种被后来的库全方位的比较和“超越”

Mocha && Jasmine

Mocha 跟 Jasmine 是目前最火的两个单元测试框架，基本上目前前端单元测试就在这两个库之间选了，下面是这两个库的区别，大家可以根据自己的需求进行选择：

mocha：

优点：

• 终端显示友好
• 灵活，扩展性好

缺点：

• 自身集成度不高（没有断言，spy，异步等），而且经常要配合Chai，Sinon等库使用
• 配置相对麻烦一点点

Jasmine:

优点：

• 集成度高，自带BBD，spy，方便的异步支持(2.0)
• 配置方便

缺点：

• 相对不太灵活
• 由于各种功能内建，断言方式或者异步等风格相对比较固定
• 没有自带mockserver， 如果需要这功能的得另外配置

总的来说就是Jasmine功能齐全，配置方便，Mocha灵活自由，自由配置。 两者功能覆盖范围粗略可以表示为：

Jasmine(2.x) === Mocha + Chai + Sinon - mockserver

PS: 个人实际使用后觉得Chai和Sinon毕竟是专门做特定功能的框架，用 Mocha + Chai + Sinon 这种方式会想对舒爽一点。

断言方式

上面说到BDD，就是说测试要写的像自然语言一样，不同的断言方式就相当于不同的判断句的句式而已，现在普遍有下面三种断言方式：

• assert: assert.equal(something, someting)
• should: something.should.equal(something)
• expect: expect(something).to.equal(someting)

上面说Mocha的时候就说到 Chai 就是一个用的最多断言库，另外还有像 shouldjs很容易理解，就是should断言方式的库

无头浏览器测试 Phantomjs && Slimerjs

这两个框架一样，都是提供了无界面的真实浏览器测试环境，可以让你在node中对真实浏览器的dom进行操作和测试，不同的就是Phantomjs基于webkit（chrome），而Slimer则基于 Gecko（firefox）。当我们有需要在真实浏览器环境中测试时可以考虑这两个框架

测试任务管理工具 Karma

Karma 是 Google Angular 团队开源的 JavaScript测试执行过程管理工具，其提供了强大的自动化测试功能，其主要提供能力如下：

1. 提供真实环境，可以配置 各种chrome, firefox等各种浏览器环境或者 Phantomjs等无头浏览器环境
2. 可控制自动化测试流程，比如编辑器保存时自动全部全部测试用例
3. 强大适配器，可以在karma上面配置jasmine，mocha等单元测试框架。
4. 配置方便

参考资料：

• http://www.cnblogs.com/ustbwuyi/archive/2012/10/26/2741223.html
• http://www.techtalkdc.com/which-javascript-test-library-should-you-use-qunit-vs-jasmine-vs-mocha/
• http://thejsguy.com/2015/01/12/jasmine-vs-mocha-chai-and-sinon.html
• http://blog.founddrama.net/2012/09/headless-javascript-testing-with-jasmine-and-phantomjs/
• http://docs.slimerjs.org/0.8/differences-with-phantomjs.html