簡(jiǎn)單易操作的跨瀏覽器JavaScript單元測(cè)試解決方案
關(guān)于單元測(cè)試
前端的單元測(cè)試也可以稱為自動(dòng)化測(cè)試，測(cè)試驅(qū)動(dòng)開發(fā)，單元測(cè)試對(duì)于前端模塊化、框架和功能庫(kù)的開發(fā)是非常有必要的，只要做好模塊的解耦和功能劃分，單元測(cè)試就可以愉快地進(jìn)行。好的單元測(cè)試(全面的功能、拋錯(cuò)和邊緣覆蓋)可以成為項(xiàng)目開發(fā)或修改完成后是否能“安全上線”的重要判斷依據(jù)之一。
引進(jìn)跨平臺(tái)測(cè)試
開發(fā)和運(yùn)行單元測(cè)試通常是在開發(fā)人員的電腦上完成，而任何一臺(tái)電腦上所能安裝的瀏覽器是遠(yuǎn)遠(yuǎn)不能滿足測(cè)試兼容性需求的，如果需要配備各種平臺(tái)的電腦也是非常浪費(fèi)人力物力。那么有沒(mé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è)試。
配置步驟
1. 安裝 Karma
整個(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
2. 安裝 karma-sauce-launcher
這個(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
3. 注冊(cè) SauceLabs 并獲取 accessKey
- 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"
- }
4. 編寫測(cè)試配置文件
在項(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
- });
- }
5. 啟動(dòng) SauceLabs 測(cè)試
在終端輸入：
- 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)
6. 獲取測(cè)試狀態(tài)和矩陣圖
等所有瀏覽器都運(yùn)行測(cè)試完畢后 SauceLabs 會(huì)生成狀態(tài)和矩陣 svg 方便檢查和公布代碼測(cè)試狀態(tài)，也可以在https://saucelabs.com/u/YOUR_... 上查看狀態(tài)結(jié)果。
- 狀態(tài)圖標(biāo)
- <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>
然后可以把這兩個(gè)狀態(tài)圖標(biāo)放到項(xiàng)目的 README 中，讓人一看就知道目前項(xiàng)目的測(cè)試狀態(tài)和瀏覽器兼容性了(SauceLabs 的 svg 的更新有點(diǎn)慢)：
總結(jié)
簡(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 并且沒(méi)有拋錯(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 提交中。
