摘要：好的單元測試全面的功能拋錯和邊緣覆蓋可以成為項目開發(fā)或修改完成后是否能安全上線的重要判斷依據(jù)之一。目前國內(nèi)外的云測試工具和方案有很多，因為云測試的實質(zhì)是運(yùn)行遠(yuǎn)程虛擬機(jī)，需要大量的服務(wù)器和齊全的設(shè)備，所以大多數(shù)都是收費(fèi)的。

前端的單元測試也可以稱為自動化測試，測試驅(qū)動開發(fā)，單元測試對于前端模塊化、框架和功能庫的開發(fā)是非常有必要的，只要做好模塊的解耦和功能劃分，單元測試就可以愉快地進(jìn)行。好的單元測試（全面的功能、拋錯和邊緣覆蓋）可以成為項目開發(fā)或修改完成后是否能“安全上線”的重要判斷依據(jù)之一。

開發(fā)和運(yùn)行單元測試通常是在開發(fā)人員的電腦上完成，而任何一臺電腦上所能安裝的瀏覽器是遠(yuǎn)遠(yuǎn)不能滿足測試兼容性需求的，如果需要配備各種平臺的電腦也是非常浪費(fèi)人力物力。那么有沒有工具能自動把本地的測試代碼在所有平臺上都跑一遍，并且追蹤完整的測試過程，把 log 信息反饋回本地？有！那就是云測試工具。

目前國內(nèi)外的云測試工具和方案有很多，因為云測試的實質(zhì)是運(yùn)行遠(yuǎn)程虛擬機(jī)，需要大量的服務(wù)器和齊全的設(shè)備，所以大多數(shù)都是收費(fèi)的。這里推薦 SauceLabs，它雖然也是收費(fèi)的，但是新注冊的賬號可以提供 8 個并發(fā)測試，免費(fèi) 90 個小時的自動測試時長，而且操作簡單，用戶體驗非常友好，很多著名的前端框架比如 Vue 等也在使用它進(jìn)行兼容性測試。

這篇文章就詳細(xì)介紹一下如何利用 SauceLabs 這個云測試工具進(jìn)行跨平臺的 JavaScript 單元測試，讓你的代碼可以輕松的通過所有版本的 Windows IE, Mac Safari 以及各種移動設(shè)備瀏覽器的測試評估，測試后還可以生成瀏覽器測試狀態(tài)矩陣圖：

主流的 JavaScript 測試框架在 SauceLabs 上都有文檔和配置說明，其中 Karma 是配置最為簡單易懂的測試框架之一，下文就詳細(xì)介紹下 Karma + SauceLabs 進(jìn)行跨平臺單元測試的整個流程，以及我自己在使用中遇到的一些問題和解決方法，如果你不用 Karma，可以在 這里 查找其他測試框架的配置方法。

以下步驟的前提是你已經(jīng)寫好了測試用例，如果你還不知道如何編寫和組織單元測試，可以參考 js-test-workflows 的簡單例子來開始學(xué)習(xí) JavaScript 單元測試。

整個 SauceLabs 測試都是基于 Karma 配置文件 karma.sauce.js 完成的，通過插件 karma-sauce-launcher 自動完成遠(yuǎn)程服務(wù)器的連接和測試代碼的提交。如果你的項目已經(jīng)配備好了 Karma 和斷言庫，可以忽略此步驟。

安裝測試框架 Karma

npm install karma -g

安裝測試斷言庫 jasmine (也可以選擇其他庫如 assert, should 等)

npm install karma-jasmine

這個工具是讓 Karma 和 SauceLabs 建立連接的橋梁，它的作用是把本地的測試代碼提交到云端測試虛擬機(jī)上，告訴 SauceLabs 要啟動哪個系統(tǒng)哪個版本的瀏覽器來跑我們的測試代碼，并且把測試結(jié)果、錯誤信息和追蹤棧返回到本地的終端，一旦測試不通過，可以根據(jù)返回的信息來調(diào)試出錯的代碼。

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

SauceLabs 免費(fèi)注冊地址：https://saucelabs.com/signup/...

注冊完成后，登陸賬號，進(jìn)入 Dashboard, 點擊右下角的用戶名，彈出菜單選擇 User Setting 進(jìn)入用戶設(shè)置：

找到 USERNAME 和 Access Key：

在項目目錄下建立一個 sauce.json 文件來記錄上面的 userName 和 accessKey，這兩個字段的作用是連接 SauceLabs 服務(wù)器的身份驗證。

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

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

var sauce = require("./sauce.json"); // 引進(jìn) userName 和 key

// 生成一個 SauceLabs 瀏覽器配置信息，可以指定運(yùn)行的系統(tǒng)和瀏覽器版本
function createCustomLauncher (browser, platform, version) {
    return {
        base: "SauceLabs",
        browserName: browser,
        platform: platform,
        version: version
    };
}

// 定義所有需要在云端測試的平臺和瀏覽器
// 名字的定義是隨意的，SauceLabs 只會根據(jù)配置內(nèi)容來啟動對應(yīng)的瀏覽器
// 所有完整的平臺設(shè)備列表：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"),

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

在終端輸入：

karma start karma.sauce.js

本地的測試代碼就會在 SauceLabs 云端跑起來了，注意的一點是，雖然免費(fèi)用戶只有 8 個并發(fā)的測試連接，但并不意味著一次只能測試 8 種瀏覽器，上面的 customLaunchers 一共定義了 13 中不同的瀏覽器，他們會先執(zhí)行 8 個，空閑后再執(zhí)行余下的，直至全部運(yùn)行完畢。

云端測試完畢后的信息如下：

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)

等所有瀏覽器都運(yùn)行測試完畢后 SauceLabs 會生成狀態(tài)和矩陣 svg 方便檢查和公布代碼測試狀態(tài)，也可以在 https://saucelabs.com/u/YOUR_... 上查看狀態(tài)結(jié)果。

狀態(tài)圖標(biāo)

瀏覽器矩陣圖

然后可以把這兩個狀態(tài)圖標(biāo)放到項目的 README 中，讓人一看就知道目前項目的測試狀態(tài)和瀏覽器兼容性了（SauceLabs 的 svg 的更新有點慢）：

簡單總結(jié)下 SauceLabs 的優(yōu)點：

提供幾百種平臺設(shè)備，基本上可以滿足所有的兼容性測試需求；

配合 Karma 進(jìn)行單元測試，操作簡單易于部署；

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

免費(fèi)使用 90 個小時的測試時長！

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

偶爾遇到 Disconnect 和 Timeout 的情況，可能是由于國內(nèi)網(wǎng)絡(luò)原因，多試幾次就好了。

配置參數(shù)里面的 captureTimeout 和 browserNoActivityTimeout 可以設(shè)得稍長些，有些連接超時也是因為這兩個的默認(rèn)時長太小了，另外如果不需要記錄錄像和圖像，可以將 recordVideo 和 recordScreenshots 設(shè)為 false 可以縮短運(yùn)行時間。

如果總是遇到 Disconnect 的情況，一個就是可能你的代碼有問題（有些錯誤警告在某些瀏覽器下是不會拋出的，比如 Safari）還有一個就是 Karma 的版本問題，v0.13.x 經(jīng)常出現(xiàn)鏈接超時，升到最新版本即可。

對于錯誤產(chǎn)生的 Disconnect 并且沒有拋錯的情況，可以安裝 karma-spec-launcher 并且把 Karma 的測試處理報告程序改成 reporters: ["spec", "saucelabs"] 這樣就可以在終端很清晰的看到運(yùn)行到哪個測試用例導(dǎo)致的 Disconnect，方便排查出錯的地方。

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