前端测试，或者 UI 测试一直是业界一大难题。最近 Q.js 使用 Karma 作为测试任务管理工具，本文在回顾前端测试方案的同时，也分析下为什么 Q.js 选用 Karma 而不是其他测试框架。

像素级全站对比

曾今有一批人做过这样的 UI 测试，即最终页面图像是否符合预期，通过图片差异对比来找出可能的问题。

如图所示，所谓像素级站点对比，即利用截屏图像前后对比来找出，站点前后差异，从而发现问题。

Q: 为什么需要这种测试呢？

A: CSS 容易被破坏，在大型响应式重构案例中，像素级全站对比是一个比较好的测试方案。

目前常用的两大工具：

• BackstopJS
• PahntomCSS

录制型测试

比较经典的有 Selenium，本质上提供了编码型测试，但是因为提供了录制功能，所以广泛被用于录制测试。

编码测试

即通过编写代码来测试 UI，但由于各种兼容性问题，这里出现了各种方案。

JsTestDriver 式

即启用一个服务器，然后让测试浏览器链接该服务器，便可自动运行测试任务，下面是 BusterJS 中的一个演示：

• 启动服务器

• 打开测试浏览器，并连上服务器，按下按钮使得服务器捕获该浏览器

• 在服务器发起一次测试，则每个被捕获的浏览器都会跑一次测试用例

静态测试

即通常的打开一个页面进行测试，下面是 Mocha 的静态测试页面例子：

无头浏览器测试

即通过无头浏览器，如：PhantomJS、SlimerJS 来进行测试

持续集成测试

这个就需要看持续集成系统能提供什么浏览器支持了，一般至少可以提供 PhantomJS 来进行测试，比较优秀的持续集成系统有：

• Sauce Labs
• Travis

下面是 Backbone 在 Sauce Labs 里的测试，可见，可使用各种浏览器进行测试：

Karma

Karma 是一个测试任务管理工具，可以很容易和 Jasmine、Mocha 等市面上常用的测试框架打通，通过其插件可以快速集成到各种环境中。例如：本地环境、持续集成环境。

她可以使我们只需输入一行命令就就行测试，并在文件进行修改后，重跑一次用例，过程就像用 NodeJS 进行测试一样一样的。

所以目前在各大开源项目中使用，下面是使用 Q.js 进行测试的完整输出：

在这个构成中，Karma 会根据我们设定的配置，自动在本地启动 Chrome 和 PhantomJS 进行测试。

那么我们为什么选择用 Karma 来测试呢？

• 方便集成测试
• 较为通用的开源解决方案，google 出品
• Q.js 是一个 js 库，不需要像素级测试，由于是程序员我们也不需要录制测试，我们需要的是静态测试（开发阶段）、以及持续集成测试（集成阶段）
• 可以根据不同环境，选择不同浏览器进行测试。例如原来我们只能使用 PhantomJS 进行测试，现在我们可以在集成系统中使用 Firefox 和 PhantomJS 进行测试，在本地环境我们还可以 Chrome、IE 进行自动化测试。如果有钱，我们更可以购买 Sauce Labs（关键没钱＝ ＝）的服务来得到更多浏览器支持。