簡單易操作的跨瀏覽器JavaScript單元測試解決方案
關(guān)于單元測試
前端的單元測試也可以稱為自動化測試，測試驅(qū)動開發(fā)，單元測試對于前端模塊化、框架和功能庫的開發(fā)是非常有必要的，只要做好模塊的解耦和功能劃分，單元測試就可以愉快地進行。好的單元測試(全面的功能、拋錯和邊緣覆蓋)可以成為項目開發(fā)或修改完成后是否能“安全上線”的重要判斷依據(jù)之一。
引進跨平臺測試
開發(fā)和運行單元測試通常是在開發(fā)人員的電腦上完成，而任何一臺電腦上所能安裝的瀏覽器是遠遠不能滿足測試兼容性需求的，如果需要配備各種平臺的電腦也是非常浪費人力物力。那么有沒有工具能自動把本地的測試代碼在所有平臺上都跑一遍，并且追蹤完整的測試過程，把 log 信息反饋回本地?有!那就是云測試工具。
目前國內(nèi)外的云測試工具和方案有很多，因為云測試的實質(zhì)是運行遠程虛擬機，需要大量的服務器和齊全的設備，所以大多數(shù)都是收費的。這里推薦 SauceLabs，它雖然也是收費的，但是新注冊的賬號可以提供 8 個并發(fā)測試，免費 90 個小時的自動測試時長，而且操作簡單，用戶體驗非常友好，很多著名的前端框架比如 Vue 等也在使用它進行兼容性測試。
這篇文章就詳細介紹一下如何利用 SauceLabs 這個云測試工具進行跨平臺的 JavaScript 單元測試，讓你的代碼可以輕松的通過所有版本的 Windows IE, Mac Safari 以及各種移動設備瀏覽器的測試評估，測試后還可以生成瀏覽器測試狀態(tài)矩陣圖：
主流的 JavaScript 測試框架在 SauceLabs 上都有文檔和配置說明，其中 Karma 是配置最為簡單易懂的測試框架之一，下文就詳細介紹下 Karma + SauceLabs 進行跨平臺單元測試的整個流程，以及我自己在使用中遇到的一些問題和解決方法，如果你不用 Karma，可以在 這里 查找其他測試框架的配置方法。
以下步驟的前提是你已經(jīng)寫好了測試用例，如果你還不知道如何編寫和組織單元測試，可以參考 js-test-workflows 的簡單例子來開始學習 JavaScript 單元測試。
配置步驟
1. 安裝 Karma
整個 SauceLabs 測試都是基于 Karma 配置文件 karma.sauce.js 完成的，通過插件 karma-sauce-launcher 自動完成遠程服務器的連接和測試代碼的提交。如果你的項目已經(jīng)配備好了 Karma 和斷言庫，可以忽略此步驟。
安裝測試框架 Karma
- npm install karma -g
安裝測試斷言庫 jasmine (也可以選擇其他庫如 assert, should 等)
- npm install karma-jasmine
2. 安裝 karma-sauce-launcher
這個工具是讓 Karma 和 SauceLabs 建立連接的橋梁，它的作用是把本地的測試代碼提交到云端測試虛擬機上，告訴 SauceLabs 要啟動哪個系統(tǒng)哪個版本的瀏覽器來跑我們的測試代碼，并且把測試結(jié)果、錯誤信息和追蹤棧返回到本地的終端，一旦測試不通過，可以根據(jù)返回的信息來調(diào)試出錯的代碼。
- npm install karma-sauce-launcher --save-dev
3. 注冊 SauceLabs 并獲取 accessKey
- SauceLabs 免費注冊地址：https://saucelabs.com/signup/...
- 注冊完成后，登陸賬號，進入 Dashboard, 點擊右下角的用戶名，彈出菜單選擇 User Setting 進入用戶設置：
- 找到 USERNAME 和 Access Key：
- 在項目目錄下建立一個 sauce.json 文件來記錄上面的 userName 和 accessKey，這兩個字段的作用是連接 SauceLabs 服務器的身份驗證。
- {
- "username": "xxxx",
- "accesskey": "xxx"
- }
4. 編寫測試配置文件
在項目目錄下添加測試配置文件 karma.sauce.js 該文件是整個跨平臺測試的主要文件，也是 Karma 的入口文件，配置內(nèi)容如下：
- var sauce = require('./sauce.json'); // 引進 userName 和 key
- // 生成一個 SauceLabs 瀏覽器配置信息，可以指定運行的系統(tǒng)和瀏覽器版本
- function createCustomLauncher (browser, platform, version) {
- return {
- base: 'SauceLabs',
- browserName: browser,
- platform: platform,
- version: version
- };
- }
- // 定義所有需要在云端測試的平臺和瀏覽器
- // 名字的定義是隨意的，SauceLabs 只會根據(jù)配置內(nèi)容來啟動對應的瀏覽器
- // 所有完整的平臺設備列表：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 配置參數(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;
- }
- // 設置測試的超時時間
- 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: {
- // 測試結(jié)果是否公開，如果希望生成矩陣圖，必須是 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 個并發(fā)的測試連接，但并不意味著一次只能測試 8 種瀏覽器，上面的 customLaunchers 一共定義了 13 中不同的瀏覽器，他們會先執(zhí)行 8 個，空閑后再執(zhí)行余下的，直至全部運行完畢。
云端測試完畢后的信息如下：
- 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. 獲取測試狀態(tài)和矩陣圖
等所有瀏覽器都運行測試完畢后 SauceLabs 會生成狀態(tài)和矩陣 svg 方便檢查和公布代碼測試狀態(tài)，也可以在https://saucelabs.com/u/YOUR_... 上查看狀態(tài)結(jié)果。
- 狀態(tài)圖標
- <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>
然后可以把這兩個狀態(tài)圖標放到項目的 README 中，讓人一看就知道目前項目的測試狀態(tài)和瀏覽器兼容性了(SauceLabs 的 svg 的更新有點慢)：
總結(jié)
簡單總結(jié)下 SauceLabs 的優(yōu)點：
- 提供幾百種平臺設備，基本上可以滿足所有的兼容性測試需求;
- 配合 Karma 進行單元測試，操作簡單易于部署;
- 提供測試、錯誤信息的及時反饋，便于查找錯誤;
- 免費使用 90 個小時的測試時長!
另外，分享下我自己使用 SauceLabs 遇到的幾個問題：
- 偶爾遇到 Disconnect 和 Timeout 的情況，可能是由于國內(nèi)網(wǎng)絡原因，多試幾次就好了。
- 配置參數(shù)里面的 captureTimeout 和 browserNoActivityTimeout 可以設得稍長些，有些連接超時也是因為這兩個的默認時長太小了，另外如果不需要記錄錄像和圖像，可以將 recordVideo 和 recordScreenshots 設為 false 可以縮短運行時間。
- 如果總是遇到 Disconnect 的情況，一個就是可能你的代碼有問題(有些錯誤警告在某些瀏覽器下是不會拋出的，比如 Safari)還有一個就是 Karma 的版本問題，v0.13.x 經(jīng)常出現(xiàn)鏈接超時，升到***版本即可。
- 對于錯誤產(chǎn)生的 Disconnect 并且沒有拋錯的情況，可以安裝 karma-spec-launcher 并且把 Karma 的測試處理報告程序改成reporters: ['spec', 'saucelabs'] 這樣就可以在終端很清晰的看到運行到哪個測試用例導致的 Disconnect，方便排查出錯的地方。
- 如果是開源項目，記得把 sauce.json 文件放到 .gitignore 中，不要暴露你的 AccessKey 到 git 提交中。
