前端測試，或者UI測試一直是業界一大難題。最近
Q.js使用Karma作為測試任務管理工具，本文在回顧前端測試方案的同時，也分析下為什么Q.js選用Karma而不是其他測試框架。
像素級全站對比
曾今有一批人做過這樣的UI測試，即最終頁面圖像是否符合預期，通過圖片差異對比來找出可能的問題。
如圖所示，所謂像素級站點對比，即利用截屏圖像前后對比來找出，站點前后差異，從而發現問題。
Q: 為什么需要這種測試呢？
A: CSS容易被破壞，在大型響應式重構案例中，像素級全站對比是一個比較好的測試方案。
目前常用的兩大工具：
錄制型測試
比較經典的有Selenium，本質上提供了編碼型測試，但是因為提供了錄制功能，所以廣泛被用於錄制測試。
編碼測試
即通過編寫代碼來測試UI，但由於各種兼容性問題，這里出現了各種方案。
JsTestDriver式
即啟用一個服務器，然后讓測試瀏覽器鏈接該服務器，便可自動運行測試任務，下面是BusterJS中的一個演示：
- 啟動服務器
- 打開測試瀏覽器，並連上服務器，按下按鈕使得服務器捕獲該瀏覽器
- 在服務器發起一次測試，則每個被捕獲的瀏覽器都會跑一次測試用例
靜態測試
即通常的打開一個頁面進行測試，下面是Mocha的靜態測試頁面例子：
無頭瀏覽器測試
即通過無頭瀏覽器，如：PhantomJS、SlimerJS來進行測試
持續集成測試
這個就需要看持續集成系統能提供什么瀏覽器支持了，一般至少可以提供PhantomJS來進行測試，比較優秀的持續集成系統有：
下面是Backbone在Sauce Labs里的測試，可見，可使用各種瀏覽器進行測試：
Karma
Karma是一個測試任務管理工具，可以很容易和Jasmine、Mocha等市面上常用的測試框架打通，通過其插件可以快速集成到各種環境中。例如：本地環境、持續集成環境。
她可以使我們只需輸入一行命令就就行測試，並在文件進行修改后，重跑一次用例，過程就像用NodeJS進行測試一樣一樣的。
所以目前在各大開源項目中使用，下面是使用Q.js進行測試的完整輸出：
bogon:Q.js miniflycn$ gulp test
[23:58:30] Using gulpfile ~/github/Q.js/gulpfile.js
[23:58:30] Starting 'test'...
INFO [framework.browserify]: 70617 bytes written (0.30 seconds)
INFO [framework.browserify]: bundle built
INFO [karma]: Karma v0.12.35 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [launcher]: Starting browser PhantomJS
INFO [Chrome 41.0.2272 (Mac OS X 10.10.2)]: Connected on socket YFLQOvttbrfH9Mmxvqeu with id 10368837
WARN [web-server]: 404: /favicon.ico
INFO [PhantomJS 1.9.8 (Mac OS X 0.0.0)]: Connected on socket E1mb7b7zs7Ugi4u-vqev with id 68559341
Start:
data
✔ should able to get a vm data
✔ should able to set a vm data
✔ should able to pop a vm data
✔ should able to unshift a vm data
✔ should able to shift a vm data
✔ should able to call indexOf for a DataArray
✔ should able to call splice for a DataArray
✔ should return itself when key is undefined
✔ should able to watch vm change
✔ should able traversing a array which has some property
✔ should able to watch push method
class
✔ should able to define & require a hello component
✔ should able to create a child component
✔ should able to set the data of a children component
custom
✔ should able to create a custom filter
✔ should able to toggle class
✔ should able to set a class
if
✔ should able to use if directive
attrbute
✔ should able to set src
✔ should able to set attribute
on
✔ should able bind event
repeat
✔ should able repeat
✔ should able push a data
✔ should able splice a data
✔ should able multiple repeat
✔ should not throw a error when repeat element has been modified
✔ should throw a error when a filter hasn't implemented
✔ should able to use double repeat
utils
✔ should find a element
✔ should able to copy a array use slice
✔ should able check contains
✔ should able to set and get data
✔ should able to add & remove event
✔ should able to extend objects
✔ should able to extend from multiple srouces
✔ should able to add & remove class
✔ should able to check a object
Finished in 2.447 secs / 2.318 secs
SUMMARY:
✔ 78 tests completed
在這個構成中，Karma會根據我們設定的配置，自動在本地啟動Chrome和PhantomJS進行測試。
那么我們為什么選擇用Karma來測試呢？
- 方便集成測試
- 較為通用的開源解決方案，google出品
- Q.js 是一個js庫，不需要像素級測試，由於是程序員我們也不需要錄制測試，我們需要的是靜態測試（開發階段）、以及持續集成測試（集成階段）
- 可以根據不同環境，選擇不同瀏覽器進行測試。例如原來我們只能使用
PhantomJS進行測試，現在我們可以在集成系統中使用Firefox和PhantomJS進行測試，在本地環境我們還可以Chrome、IE進行自動化測試。如果有錢，我們更可以購買Sauce Labs（關鍵沒錢＝ ＝）的服務來得到更多瀏覽器支持。