簡單易操做的跨瀏覽器 JavaScript 單元測試解決方案

關於單元測試

前端的單元測試也能夠稱爲自動化測試，測試驅動開發，單元測試對於前端模塊化、框架和功能庫的開發是很是有必要的，只要作好模塊的解耦和功能劃分，單元測試就能夠愉快地進行。好的單元測試（全面的功能、拋錯和邊緣覆蓋）能夠成爲項目開發或修改完成後是否能「安全上線」的重要判斷依據之一。

引進跨平臺測試

開發和運行單元測試一般是在開發人員的電腦上完成，而任何一臺電腦上所能安裝的瀏覽器是遠遠不能知足測試兼容性需求的，若是須要配備各類平臺的電腦也是很是浪費人力物力。那麼有沒有工具能自動把本地的測試代碼在全部平臺上都跑一遍，而且追蹤完整的測試過程，把 log 信息反饋回本地？有！那就是雲測試工具。

目前國內外的雲測試工具和方案有不少，由於雲測試的實質是運行遠程虛擬機，須要大量的服務器和齊全的設備，因此大多數都是收費的。這裏推薦 SauceLabs，它雖然也是收費的，可是新註冊的帳號能夠提供 8 個併發測試，免費 90 個小時的自動測試時長，並且操做簡單，用戶體驗很是友好，不少著名的前端框架好比 Vue 等也在使用它進行兼容性測試。

這篇文章就詳細介紹一下如何利用 SauceLabs 這個雲測試工具進行跨平臺的 JavaScript 單元測試，讓你的代碼能夠輕鬆的經過全部版本的 Windows IE, Mac Safari 以及各類移動設備瀏覽器的測試評估，測試後還能夠生成瀏覽器測試狀態矩陣圖：

主流的 JavaScript 測試框架在 SauceLabs 上都有文檔和配置說明，其中 Karma 是配置最爲簡單易懂的測試框架之一，下文就詳細介紹下 Karma + SauceLabs 進行跨平臺單元測試的整個流程，以及我本身在使用中遇到的一些問題和解決方法，若是你不用 Karma，能夠在 這裏 查找其餘測試框架的配置方法。

如下步驟的前提是你已經寫好了測試用例，若是你還不知道如何編寫和組織單元測試，能夠參考 js-test-workflows 的簡單例子來開始學習 JavaScript 單元測試。

配置步驟

1. 安裝 Karma

整個 SauceLabs 測試都是基於 Karma 配置文件 karma.sauce.js 完成的，經過插件 karma-sauce-launcher 自動完成遠程服務器的鏈接和測試代碼的提交。若是你的項目已經配備好了 Karma 和斷言庫，能夠忽略此步驟。

1. 安裝測試框架 Karma

   npm install karma -g

2. 安裝測試斷言庫 jasmine (也能夠選擇其餘庫如 assert, should 等)

   npm install karma-jasmine

2. 安裝 karma-sauce-launcher

這個工具是讓 Karma 和 SauceLabs 創建鏈接的橋樑，它的做用是把本地的測試代碼提交到雲端測試虛擬機上，告訴 SauceLabs 要啓動哪一個系統哪一個版本的瀏覽器來跑咱們的測試代碼，而且把測試結果、錯誤信息和追蹤棧返回到本地的終端，一旦測試不經過，能夠根據返回的信息來調試出錯的代碼。

npm install karma-sauce-launcher --save-dev

3. 註冊 SauceLabs 並獲取 accessKey

1. SauceLabs 免費註冊地址：https://saucelabs.com/signup/...

2. 註冊完成後，登錄帳號，進入 Dashboard, 點擊右下角的用戶名，彈出菜單選擇 User Setting 進入用戶設置：

3. 找到 USERNAME 和 Access Key：

4. 在項目目錄下創建一個 sauce.json 文件來記錄上面的 userName 和 accessKey，這兩個字段的做用是鏈接 SauceLabs 服務器的身份驗證。

   {
       "username": "xxxx",
       "accesskey": "xxx"
   }

4. 編寫測試配置文件

在項目目錄下添加測試配置文件 karma.sauce.js 該文件是整個跨平臺測試的主要文件，也是 Karma 的入口文件，配置內容以下：

var sauce = require('./sauce.json'); // 引進 userName 和 key

// 生成一個 SauceLabs 瀏覽器配置信息，能夠指定運行的系統和瀏覽器版本
function createCustomLauncher (browser, platform, version) {
    return {
        base: 'SauceLabs',
        browserName: browser,
        platform: platform,
        version: version
    };
}

// 定義全部須要在雲端測試的平臺和瀏覽器
// 名字的定義是隨意的，SauceLabs 只會根據配置內容來啓動對應的瀏覽器
// 全部完整的平臺設備列表：https://saucelabs.com/platforms
var customLaunchers = {
    // 主流瀏覽器
    sl_win_chrome: createCustomLauncher('chrome', 'Windows 7'),
    sl_mac_chrome: createCustomLauncher('chrome', 'OS X 10.10'),
    sl_win_firefox: createCustomLauncher('firefox', 'Windows 7'),
    sl_mac_firefox: createCustomLauncher('firefox', 'OS X 10.10'),
    sl_mac_safari: createCustomLauncher('safari', 'OS X 10.11'),

    // 移動設備瀏覽器
    sl_ios_8_safari: createCustomLauncher('iphone', null, '8.4'),
    sl_ios_9_safari: createCustomLauncher('iphone', null, '9.3'),
    sl_android_4_2: createCustomLauncher('android', null, '4.2'),
    sl_android_5_1: createCustomLauncher('android', null, '5.1'),

    // Microsoft Edge
    sl_edge: createCustomLauncher('MicrosoftEdge', 'Windows 10'),

    // IE 瀏覽器
    sl_ie_9: createCustomLauncher('internet explorer', 'Windows 7', '9'),
    sl_ie_10: createCustomLauncher('internet explorer', 'Windows 8', '10'),
    sl_ie_11: createCustomLauncher('internet explorer', 'Windows 10', '11')
};

// Karma 配置參數
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (KarmaConfig) {
    // 將 SauceLabs 提供的 username 和 accesskey 放到環境變量中
    if (!process.env.SAUCE_USERNAME || !process.env.SAUCE_ACCESS_KEY) {
        process.env.SAUCE_USERNAME = sauce.username;
        process.env.SAUCE_ACCESS_KEY = sauce.accesskey;
    }
    
    // 設置測試的超時時間
    var maxExecuteTime = 5*60*1000;
    KarmaConfig.set({
        // 加載測試文件的根目錄
        basePath: '',
        // 使用的斷言庫
        frameworks: ['jasmine'],
        // 告訴 Karma 要將哪些 js 文件加載到瀏覽器運行測試
        files: [
            '../src/**/*.js',
            '../test/**/*.js'
        ],
        // SauceLabs 的配置，這裏只須要配置幾個重要的字段便可，完整的字段能夠參考：
        // https://wiki.saucelabs.com/display/DOCS/Test+Configuration+Options
        sauceLabs: {
            // 測試結果是否公開，若是但願生成矩陣圖，必須是 public
            public: 'public',
            // 是否在測試過程記錄虛擬機的運行錄像
            recordVideo: false,
            // 是否在測試過程記錄虛擬機的圖像
            recordScreenshots: false,
            // 測試名稱
            testName: 'Cross browsers test',
            // 測試的記錄號，能夠爲任意字符，若是但願生成矩陣圖，build 不能爲空
            build: 'build-' + Date.now()
        },
        // 自定義運行測試的 SauceLabs 瀏覽器
        customLaunchers: customLaunchers,
        browsers: Object.keys(customLaunchers),
        // 測試處理的報告程序
        reporters: ['progress', 'saucelabs'],
        // 最大超時時間
        captureTimeout: maxExecuteTime,
        browserNoActivityTimeout: maxExecuteTime
    });
}

5. 啓動 SauceLabs 測試

在終端輸入：

karma start karma.sauce.js

本地的測試代碼就會在 SauceLabs 雲端跑起來了，注意的一點是，雖然免費用戶只有 8 個併發的測試鏈接，但並不意味着一次只能測試 8 種瀏覽器，上面的 customLaunchers 一共定義了 13 中不一樣的瀏覽器，他們會先執行 8 個，空閒後再執行餘下的，直至所有運行完畢。

雲端測試完畢後的信息以下：

Chrome 54.0.2840 (Windows 7 0.0.0): Executed 143 of 143 SUCCESS (1.365 secs / 1.176 secs)
IE 10.0.0 (Windows 8 0.0.0): Executed 143 of 143 SUCCESS (1.313 secs / 1.118 secs)
IE 9.0.0 (Windows 7 0.0.0): Executed 143 of 143 SUCCESS (1.312 secs / 1.113 secs)
Firefox 47.0.0 (Mac OS X 10.10.0): Executed 143 of 143 SUCCESS (2.016 secs / 2.058 secs)
Chrome 54.0.2840 (Mac OS X 10.10.5): Executed 143 of 143 SUCCESS (1.724 secs / 1.485 secs)
Chrome 54.0.2840 (Windows 7 0.0.0): Executed 143 of 143 SUCCESS (1.365 secs / 1.176 secs)
IE 10.0.0 (Windows 8 0.0.0): Executed 143 of 143 SUCCESS (1.313 secs / 1.118 secs)
IE 9.0.0 (Windows 7 0.0.0): Executed 143 of 143 SUCCESS (1.312 secs / 1.113 secs)
Firefox 47.0.0 (Mac OS X 10.10.0): Executed 143 of 143 SUCCESS (2.016 secs / 2.058 secs)
Chrome 54.0.2840 (Mac OS X 10.10.5): Executed 143 of 143 SUCCESS (1.724 secs / 1.485 secs)
IE 11.0.0 (Windows 10 0.0.0): Executed 143 of 143 SUCCESS (2.584 secs / 1.262 secs)
Firefox 49.0.0 (Windows 7 0.0.0): Executed 143 of 143 SUCCESS (2.3 secs / 1.25 secs)
Safari 9.1.2 (Mac OS X 10.11.6): Executed 143 of 143 SUCCESS (1.164 secs / 1.173 secs)
Edge 14.14393.0 (Windows 10 0.0.0): Executed 143 of 143 SUCCESS (1.441 secs / 1.301 secs)
Chrome Mobile 39.0.0 (Android 5.1.0): Executed 143 of 143 SUCCESS (1.815 secs / 1.52 secs)
Android 4.2.0 (Android 4.2.0): Executed 143 of 143 SUCCESS (1.727 secs / 1.153 secs)
Mobile Safari 9.0.0 (iOS 9.3.0): Executed 143 of 143 SUCCESS (2.328 secs / 1.061 secs)

6. 獲取測試狀態和矩陣圖

等全部瀏覽器都運行測試完畢後 SauceLabs 會生成狀態和矩陣 svg 方便檢查和公佈代碼測試狀態，也能夠在 https://saucelabs.com/u/YOUR_... 上查看狀態結果。

• 狀態圖標

  <a href="https://saucelabs.com/u/YOUR_SAUCE_USERNAME">
        <img src="https://saucelabs.com/buildstatus/YOUR_SAUCE_USERNAME" alt="Sauce Test Status"/>
  </a>

• 瀏覽器矩陣圖

  <a href="https://saucelabs.com/u/YOUR_SAUCE_USERNAME">
        <img src="https://saucelabs.com/browser-matrix/YOUR_SAUCE_USERNAME.svg" alt="Sauce Test Status"/>
  </a>

  而後能夠把這兩個狀態圖標放到項目的 README 中，讓人一看就知道目前項目的測試狀態和瀏覽器兼容性了（SauceLabs 的 svg 的更新有點慢）：

總結

簡單總結下 SauceLabs 的優勢：

1. 提供幾百種平臺設備，基本上能夠知足全部的兼容性測試需求；

2. 配合 Karma 進行單元測試，操做簡單易於部署；

3. 提供測試、錯誤信息的及時反饋，便於查找錯誤；

4. 無償使用 90 個小時的測試時長！

另外，分享下我本身使用 SauceLabs 遇到的幾個問題：

1. 偶爾遇到 Disconnect 和 Timeout 的狀況，多是因爲國內網絡緣由，多試幾回就行了。

2. 配置參數裏面的 captureTimeout 和 browserNoActivityTimeout 能夠設得稍長些，有些鏈接超時也是由於這兩個的默認時長過小了，另外若是不須要記錄錄像和圖像，能夠將 recordVideo 和 recordScreenshots 設爲 false 能夠縮短運行時間。

3. 若是老是遇到 Disconnect 的狀況，一個就是可能你的代碼有問題（有些錯誤警告在某些瀏覽器下是不會拋出的，好比 Safari）還有一個就是 Karma 的版本問題，v0.13.x 常常出現連接超時，升到最新版本便可。

4. 對於錯誤產生的 Disconnect 而且沒有拋錯的狀況，能夠安裝 karma-spec-launcher 而且把 Karma 的測試處理報告程序改爲 reporters: ['spec', 'saucelabs'] 這樣就能夠在終端很清晰的看到運行到哪一個測試用例致使的 Disconnect，方便排查出錯的地方。

5. 若是是開源項目，記得把 sauce.json 文件放到 .gitignore 中，不要暴露你的 AccessKey 到 git 提交中。