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

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

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

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

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

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

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

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

安裝測(cè)試框架 Karma

npm install karma -g

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

npm install karma-jasmine

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

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

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

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

找到 USERNAME 和 Access Key：

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

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

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

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

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

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

    // 移動(dòng)設(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è)置測(cè)試的超時(shí)時(shí)間
    var maxExecuteTime = 5*60*1000;
    KarmaConfig.set({
        // 加載測(cè)試文件的根目錄
        basePath: "",
        // 使用的斷言庫(kù)
        frameworks: ["jasmine"],
        // 告訴 Karma 要將哪些 js 文件加載到瀏覽器運(yùn)行測(cè)試
        files: [
            "../src/**/*.js",
            "../test/**/*.js"
        ],
        // SauceLabs 的配置，這里只需要配置幾個(gè)重要的字段即可，完整的字段可以參考：
        // https://wiki.saucelabs.com/display/DOCS/Test+Configuration+Options
        sauceLabs: {
            // 測(cè)試結(jié)果是否公開，如果希望生成矩陣圖，必須是 public
            public: "public",
            // 是否在測(cè)試過(guò)程記錄虛擬機(jī)的運(yùn)行錄像
            recordVideo: false,
            // 是否在測(cè)試過(guò)程記錄虛擬機(jī)的圖像
            recordScreenshots: false,
            // 測(cè)試名稱
            testName: "Cross browsers test",
            // 測(cè)試的記錄號(hào)，可以為任意字符，如果希望生成矩陣圖，build 不能為空
            build: "build-" + Date.now()
        },
        // 自定義運(yùn)行測(cè)試的 SauceLabs 瀏覽器
        customLaunchers: customLaunchers,
        browsers: Object.keys(customLaunchers),
        // 測(cè)試處理的報(bào)告程序
        reporters: ["progress", "saucelabs"],
        // 最大超時(shí)時(shí)間
        captureTimeout: maxExecuteTime,
        browserNoActivityTimeout: maxExecuteTime
    });
}

在終端輸入：

karma start karma.sauce.js

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

云端測(cè)試完畢后的信息如下：

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)行測(cè)試完畢后 SauceLabs 會(huì)生成狀態(tài)和矩陣 svg 方便檢查和公布代碼測(cè)試狀態(tài)，也可以在 https://saucelabs.com/u/YOUR_... 上查看狀態(tài)結(jié)果。

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

瀏覽器矩陣圖

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

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

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

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

提供測(cè)試、錯(cuò)誤信息的及時(shí)反饋，便于查找錯(cuò)誤；

免費(fèi)使用 90 個(gè)小時(shí)的測(cè)試時(shí)長(zhǎng)！

另外，分享下我自己使用 SauceLabs 遇到的幾個(gè)問(wèn)題：

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

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

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

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

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