前端測試回顧及咱們爲何選擇Karma

前端測試，或者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進行測試的完整輸出：

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（關鍵沒錢＝ ＝）的服務來獲得更多瀏覽器支持。