日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
簡單易操作的跨瀏覽器JavaScript單元測試解決方案

關(guān)于單元測試

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

引進(jìn)跨平臺測試

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

目前國內(nèi)外的云測試工具和方案有很多，因為云測試的實(shí)質(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 單元測試。

配置步驟

1. 安裝 Karma

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

安裝測試框架 Karma

 
 
      
  
  1. npm install karma -g 
    2.

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

 
 
      
  
  1. npm install karma-jasmine 
    2.

2. 安裝 karma-sauce-launcher

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

 
 
      
  
  1. npm install karma-sauce-launcher --save-dev 
    2.

3. 注冊 SauceLabs 并獲取 accessKey

  • SauceLabs 免費(fèi)注冊地址：https://saucelabs.com/signup/...
  • 注冊完成后，登陸賬號，進(jìn)入 Dashboard, 點(diǎn)擊右下角的用戶名，彈出菜單選擇 User Setting 進(jìn)入用戶設(shè)置：
  • 找到 USERNAME 和 Access Key：

  • 在項目目錄下建立一個 sauce.json 文件來記錄上面的 userName 和 accessKey，這兩個字段的作用是連接 SauceLabs 服務(wù)器的身份驗證。
 
 
      
  
  1. { 
    2.   
  
  2.     "username": "xxxx", 
    3.   
  
  3.     "accesskey": "xxx" 
    4.   
  
  4. }  
    5.

4. 編寫測試配置文件

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

 
 
      
  
  1. var sauce = require('./sauce.json'); // 引進(jìn) userName 和 key 
    2.   
  
  2.  
    3.   
  
  3. // 生成一個 SauceLabs 瀏覽器配置信息，可以指定運(yùn)行的系統(tǒng)和瀏覽器版本 
    4.   
  
  4. function createCustomLauncher (browser, platform, version) { 
    5.   
  
  5.     return { 
    6.   
  
  6.         base: 'SauceLabs', 
    7.   
  
  7.         browserName: browser, 
    8.   
  
  8.         platform: platform, 
    9.   
  
  9.         version: version 
    10.   
  
  10.     }; 
    11.   
  
  11. } 
    12.   
  
  12.  
    13.   
  
  13. // 定義所有需要在云端測試的平臺和瀏覽器 
    14.   
  
  14. // 名字的定義是隨意的，SauceLabs 只會根據(jù)配置內(nèi)容來啟動對應(yīng)的瀏覽器 
    15.   
  
  15. // 所有完整的平臺設(shè)備列表：https://saucelabs.com/platforms 
    16.   
  
  16. var customLaunchers = { 
    17.   
  
  17.     // 主流瀏覽器 
    18.   
  
  18.     sl_win_chrome: createCustomLauncher('chrome', 'Windows 7'), 
    19.   
  
  19.     sl_mac_chrome: createCustomLauncher('chrome', 'OS X 10.10'), 
    20.   
  
  20.     sl_win_firefox: createCustomLauncher('firefox', 'Windows 7'), 
    21.   
  
  21.     sl_mac_firefox: createCustomLauncher('firefox', 'OS X 10.10'), 
    22.   
  
  22.     sl_mac_safari: createCustomLauncher('safari', 'OS X 10.11'), 
    23.   
  
  23.  
    24.   
  
  24.     // 移動設(shè)備瀏覽器 
    25.   
  
  25.     sl_ios_8_safari: createCustomLauncher('iphone', null, '8.4'), 
    26.   
  
  26.     sl_ios_9_safari: createCustomLauncher('iphone', null, '9.3'), 
    27.   
  
  27.     sl_android_4_2: createCustomLauncher('android', null, '4.2'), 
    28.   
  
  28.     sl_android_5_1: createCustomLauncher('android', null, '5.1'), 
    29.   
  
  29.  
    30.   
  
  30.     // Microsoft Edge 
    31.   
  
  31.     sl_edge: createCustomLauncher('MicrosoftEdge', 'Windows 10'), 
    32.   
  
  32.  
    33.   
  
  33.     // IE 瀏覽器 
    34.   
  
  34.     sl_ie_9: createCustomLauncher('internet explorer', 'Windows 7', '9'), 
    35.   
  
  35.     sl_ie_10: createCustomLauncher('internet explorer', 'Windows 8', '10'), 
    36.   
  
  36.     sl_ie_11: createCustomLauncher('internet explorer', 'Windows 10', '11') 
    37.   
  
  37. }; 
    38.   
  
  38.  
    39.   
  
  39. // Karma 配置參數(shù) 
    40.   
  
  40. // https://karma-runner.github.io/1.0/config/configuration-file.html 
    41.   
  
  41. module.exports = function (KarmaConfig) { 
    42.   
  
  42.     // 將 SauceLabs 提供的 username 和 accesskey 放到環(huán)境變量中 
    43.   
  
  43.     if (!process.env.SAUCE_USERNAME || !process.env.SAUCE_ACCESS_KEY) { 
    44.   
  
  44.         process.env.SAUCE_USERNAME = sauce.username; 
    45.   
  
  45.         process.env.SAUCE_ACCESS_KEY = sauce.accesskey; 
    46.   
  
  46.     } 
    47.   
  
  47.      
    48.   
  
  48.     // 設(shè)置測試的超時時間 
    49.   
  
  49.     var maxExecuteTime = 5*60*1000; 
    50.   
  
  50.     KarmaConfig.set({ 
    51.   
  
  51.         // 加載測試文件的根目錄 
    52.   
  
  52.         basePath: '', 
    53.   
  
  53.         // 使用的斷言庫 
    54.   
  
  54.         frameworks: ['jasmine'], 
    55.   
  
  55.         // 告訴 Karma 要將哪些 js 文件加載到瀏覽器運(yùn)行測試 
    56.   
  
  56.         files: [ 
    57.   
  
  57.             '../src/**/*.js', 
    58.   
  
  58.             '../test/**/*.js' 
    59.   
  
  59.         ], 
    60.   
  
  60.         // SauceLabs 的配置，這里只需要配置幾個重要的字段即可，完整的字段可以參考： 
    61.   
  
  61.         // https://wiki.saucelabs.com/display/DOCS/Test+Configuration+Options 
    62.   
  
  62.         sauceLabs: { 
    63.   
  
  63.             // 測試結(jié)果是否公開，如果希望生成矩陣圖，必須是 public 
    64.   
  
  64.             public: 'public', 
    65.   
  
  65.             // 是否在測試過程記錄虛擬機(jī)的運(yùn)行錄像 
    66.   
  
  66.             recordVideo: false, 
    67.   
  
  67.             // 是否在測試過程記錄虛擬機(jī)的圖像 
    68.   
  
  68.             recordScreenshots: false, 
    69.   
  
  69.             // 測試名稱 
    70.   
  
  70.             testName: 'Cross browsers test', 
    71.   
  
  71.             // 測試的記錄號，可以為任意字符，如果希望生成矩陣圖，build 不能為空 
    72.   
  
  72.             build: 'build-' + Date.now() 
    73.   
  
  73.         }, 
    74.   
  
  74.         // 自定義運(yùn)行測試的 SauceLabs 瀏覽器 
    75.   
  
  75.         customLaunchers: customLaunchers, 
    76.   
  
  76.         browsers: Object.keys(customLaunchers), 
    77.   
  
  77.         // 測試處理的報告程序 
    78.   
  
  78.         reporters: ['progress', 'saucelabs'], 
    79.   
  
  79.         // ***超時時間 
    80.   
  
  80.         captureTimeout: maxExecuteTime, 
    81.   
  
  81.         browserNoActivityTimeout: maxExecuteTime 
    82.   
  
  82.     }); 
    83.   
  
  83. }  
    84.

5. 啟動 SauceLabs 測試

在終端輸入：

 
 
      
  
  1. karma start karma.sauce.js 
    2.

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

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

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

6. 獲取測試狀態(tài)和矩陣圖

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

  • 狀態(tài)圖標(biāo)
 
 
      
  
  1.  
    2.   
  
  2.        
    3.   
  
  3.    
    4.
  • 瀏覽器矩陣圖
 
 
      
  
  1.  
    2.   
  
  2.        
    3.   
  
  3.   
    4.

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

總結(jié)

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

  1. 提供幾百種平臺設(shè)備，基本上可以滿足所有的兼容性測試需求;
  2. 配合 Karma 進(jìn)行單元測試，操作簡單易于部署;
  3. 提供測試、錯誤信息的及時反饋，便于查找錯誤;
  4. 免費(fèi)使用 90 個小時的測試時長!

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

  1. 偶爾遇到 Disconnect 和 Timeout 的情況，可能是由于國內(nèi)網(wǎng)絡(luò)原因，多試幾次就好了。
  2. 配置參數(shù)里面的 captureTimeout 和 browserNoActivityTimeout 可以設(shè)得稍長些，有些連接超時也是因為這兩個的默認(rèn)時長太小了，另外如果不需要記錄錄像和圖像，可以將 recordVideo 和 recordScreenshots 設(shè)為 false 可以縮短運(yùn)行時間。
  3. 如果總是遇到 Disconnect 的情況，一個就是可能你的代碼有問題(有些錯誤警告在某些瀏覽器下是不會拋出的，比如 Safari)還有一個就是 Karma 的版本問題，v0.13.x 經(jīng)常出現(xiàn)鏈接超時，升到***版本即可。
  4. 對于錯誤產(chǎn)生的 Disconnect 并且沒有拋錯的情況，可以安裝 karma-spec-launcher 并且把 Karma 的測試處理報告程序改成reporters: ['spec', 'saucelabs'] 這樣就可以在終端很清晰的看到運(yùn)行到哪個測試用例導(dǎo)致的 Disconnect，方便排查出錯的地方。
  5. 如果是開源項目，記得把 sauce.json 文件放到 .gitignore 中，不要暴露你的 AccessKey 到 git 提交中。

網(wǎng)站題目：簡單易操作的跨瀏覽器JavaScript單元測試解決方案
文章來源：http://www.dlmjj.cn/article/dhgjoch.html