做一些事情，像下面這樣：

在上面的代碼和默認(rèn)的Mocha模板中唯一不同的是分配給測(cè)試結(jié)果的變量名，就像Sauce Labs期望的格式一樣叫做window.mochaResults。因?yàn)檫@個(gè)新的代碼不會(huì)影響正在瀏覽器中運(yùn)行的手工測(cè)試，你不妨就開(kāi)始使用它作為默認(rèn)的Mocha模板。

再次強(qiáng)調(diào)一點(diǎn)，當(dāng)Sauce Labs“運(yùn)行”你的測(cè)試時(shí)，它并沒(méi)有做任何事，它只是單純的訪問(wèn)一個(gè)頁(yè)面，等到發(fā)現(xiàn)一個(gè)window.mochaResults對(duì)象，然后記錄下這個(gè)結(jié)果。

確定你的測(cè)試通過(guò)還是失敗

StartJS Unit Tests 方法會(huì)告訴Sauce Labs去挨個(gè)在你指定的瀏覽器/平臺(tái)運(yùn)行測(cè)試，但是它不會(huì)返回測(cè)試的結(jié)果。

它返回所有工作隊(duì)列中的ID，響應(yīng)看起來(lái)像是這樣的：

{ 
  "js tests": [ 
    "9b6a2d7e6c8d4fd2afeeb0ff7e54e694", 
    "d38688ec7256497da6966f4523ddee76", 
    "14054e68ccd344c0bed77a798a9ce1e8", 
    "dbc54181f7d947458f52201ea5fcb901" 
  ]
}

要確定你測(cè)試通過(guò)還是失敗，你要調(diào)用GetJS Unit Status方法，它接手一個(gè)工作隊(duì)列并且返回當(dāng)前每個(gè)工作的工作狀態(tài)。

這個(gè)想法是你要定期調(diào)用這個(gè)方法，知道所有工作都完成。

request({ 
  url: `https://saucelabs.com/rest/v1/${username}/js-tests/status`, 
  method: "POST", 
  auth: { 
    username: process.env.SAUCE_USERNAME, 
    password: process.env.SAUCE_ACCESS_KEY 
  }, 
  json: true, 
  body: jsTests, // The response.body from the first API call.
}, (err, response) => { 
  if (err) { 
    console.error(err); 
  } else { 
    console.log(response.body); 
  }
});

響應(yīng)的結(jié)果看起來(lái)像是這樣：

{ 
  "completed": false,
   "js tests": [
     { 
      "url": "https://saucelabs.com/jobs/75ac4cadb85e415fae957f7811d778b8", 
      "platform": [ 
        "Windows 10", 
        "chrome", "latest" 
       ], 
       "result": { 
        "passes": 29, 
        "tests": 30, 
        "end": {}, 
        "suites": 7, 
        "reports": [], 
        "start": {}, 
        "duration": 97, 
        "failures": 0, 
        "pending": 1 
      }, 
      "id": "1f74a237d5ba4a47b5a42570ae1e7999", 
      "job_id": "75ac4cadb85e415fae957f7811d778b8" 
    }, 
    // ... the rest of the jobs 
  ]
}

一旦response.body.complete屬性值為true，就表示你的測(cè)試已經(jīng)運(yùn)行完成，然后你就可以通過(guò)檢查每個(gè)工作流程的通過(guò)還是失敗。

我已經(jīng)解釋過(guò)Sauce Labs“運(yùn)行”你的測(cè)試通過(guò)訪問(wèn)一個(gè)URL。當(dāng)然，這意味著這個(gè)URL必須是公開(kāi)在網(wǎng)絡(luò)上可訪問(wèn)的鏈接。

有一個(gè)問(wèn)題就是如果你的測(cè)試服務(wù)啟動(dòng)在localhost。

有很多解決這個(gè)問(wèn)題的方案，包括Sauce Connect（官方推薦的一種），這是一個(gè)由Sauce Labs創(chuàng)建的代理服務(wù)器，在Sauce Labs虛擬機(jī)和本地主機(jī)之間開(kāi)啟一個(gè)安全連接。

Sauce Labs是處于安全性的考慮被設(shè)計(jì)的，并且使得外部無(wú)法獲得你的代碼。它的缺點(diǎn)就是十分復(fù)雜的設(shè)置與使用。

如果你的代碼涉及到安全性，它可能值得你去弄清楚Sauce Labs；如果不是的話，有許多相似的方案去更簡(jiǎn)單的解決這個(gè)問(wèn)題。

我選擇的方案是ngrok

ngrok

ngrok是一個(gè)用于創(chuàng)建安全隧道連接工具。它給你一個(gè)公共的URL到web服務(wù)器運(yùn)行在你的本地機(jī)器上，確切的是你需要運(yùn)行測(cè)試在Sauce Labs上。

如果你在虛擬機(jī)上進(jìn)行開(kāi)發(fā)或手動(dòng)測(cè)試，你可能已經(jīng)聽(tīng)說(shuō)過(guò)ngrok，如果沒(méi)有，那你應(yīng)該去查閱一下了，它是極其有用的工具。

在你的機(jī)器上安裝ngrok像是下載二進(jìn)制文件，然后添加到你的路徑中一樣簡(jiǎn)單；如果你將會(huì)在Node中使用ngrok，你也需要通過(guò)npm安裝它。

npm install ngrok

你可以用下面的代碼以編程方式從Node中開(kāi)始ngrok進(jìn)程：

const ngrok = require("ngrok");

ngrok.connect(port, (err, url) => { 
  if (err) { 
    console.error(err); 
  } else { 
    console.log(`Tests now accessible at: ${url}`); 
  }
});

只要你有一個(gè)公共的URL能訪問(wèn)你的測(cè)試文件，用Sauce Labs跨瀏覽器測(cè)試你的本地代碼會(huì)變得十分容易。

這篇文章包含了很多主題，給人的印象是自動(dòng)化的，跨瀏覽器的JavaScript單元測(cè)試是復(fù)雜的。但情況并非如此。

我從我的角度來(lái)看這篇文章-當(dāng)我試圖去解決這個(gè)問(wèn)題。然后回顧我之前的經(jīng)驗(yàn)，真正復(fù)雜的是缺少解決整個(gè)流程如何工作的有效信息，和怎么樣把所有的整合到一起。

一旦你了解了所有的步驟，它很簡(jiǎn)單。總結(jié)：

最初的手工流程

寫(xiě)一個(gè)測(cè)試然后創(chuàng)建一個(gè)單一的HTML頁(yè)面去運(yùn)行它。

在本地的一個(gè)或者兩個(gè)瀏覽器中運(yùn)行這個(gè)測(cè)試，確保它能工作。

增加自動(dòng)化流程

創(chuàng)建一個(gè)開(kāi)源的Sauce Labs賬號(hào)，獲得一個(gè)用戶名和訪問(wèn)權(quán)限。

更新你的測(cè)試頁(yè)面源碼，以便Sauce Labs能通過(guò)JavaScript全局變量讀取測(cè)試結(jié)果。

用ngrok給你的本地測(cè)試頁(yè)面創(chuàng)建一個(gè)安全隧道，這樣就能在互聯(lián)網(wǎng)公開(kāi)的訪問(wèn)了。

調(diào)用StartJS Unit Tests接口方法列出你想測(cè)試的瀏覽器/平臺(tái)。

定時(shí)調(diào)用GetJS Unit Test Status方法知道工作完成。

報(bào)告結(jié)果。

我知道這篇文章開(kāi)頭我談了很多關(guān)于你不需要一個(gè)框架來(lái)做自動(dòng)化，跨瀏覽器的JavaScript單元測(cè)試，我現(xiàn)在仍然堅(jiān)信這個(gè)。然而，盡管每一步都很簡(jiǎn)單，你可能不想在每次都為項(xiàng)目編寫(xiě)代碼。

我想給我的很多老項(xiàng)目增加自動(dòng)化測(cè)試，所以對(duì)我來(lái)說(shuō)打包這些邏輯到我的模塊中是很有意義的。

我推薦你嘗試實(shí)現(xiàn)一個(gè)你自己的框架，這樣你就可以完全理解它是如何工作的，但如果你沒(méi)有時(shí)間并且還想快速建立一個(gè)測(cè)試，我建議你使用我創(chuàng)建的庫(kù)Easy Sauce。

Easy Sauce是一個(gè)Node包和一個(gè)命令行工具，現(xiàn)在我為我想做跨瀏覽器測(cè)試的每一個(gè)JavaScript項(xiàng)目都使用這個(gè)包。

easy-sauce 命令可以設(shè)置你的HTML測(cè)試文件的路徑（默認(rèn)是/test/）、開(kāi)啟本地服務(wù)的端口（默認(rèn)是1337端口）和一系列的瀏覽器/平臺(tái)進(jìn)行測(cè)試。easy-sauce將會(huì)在Sauce Lab’s selenium cloud運(yùn)行你的測(cè)試，將日志打印在控制臺(tái)并通過(guò)合適的狀態(tài)碼告知你測(cè)試是否通過(guò)。

npm包使它變得更方便，easy-sauce將會(huì)默認(rèn)在package.json文件中查找配置選項(xiàng)，所以你不必分別的存儲(chǔ)它們。好處是用戶更加明確的知道你的包支持瀏覽器/平臺(tái)。

對(duì)于easy sauce完整的用法介紹，請(qǐng)查看Github文檔。

最后，我想強(qiáng)調(diào)的是我專門(mén)建立這個(gè)項(xiàng)目來(lái)解決我的需要。雖然我認(rèn)為這個(gè)項(xiàng)目對(duì)于很多開(kāi)發(fā)人員都十分有用，但我沒(méi)有計(jì)劃把它變成一個(gè)功能齊全的測(cè)試解決方案。

在這篇文章的開(kāi)始，我寫(xiě)下了一系列的需求。在Easy Sauce的幫助下，我正努力的在任何項(xiàng)目中滿足這些需求。

如果你還沒(méi)有為你的項(xiàng)目做自動(dòng)化、跨瀏覽器的JavaScript單元測(cè)試，我鼓勵(lì)你給Easy Sauce一個(gè)嘗試的機(jī)會(huì)。即使你不想用Easy Sauce，你至少應(yīng)該了解你自己的需求或更好地了解現(xiàn)有的工具。

Happy testing!

如果你能看到這里，很感謝你的耐心閱讀。
這是我翻譯的第一篇技術(shù)文檔，自身水平有限，所以翻譯總有不當(dāng)與疏漏，如有發(fā)現(xiàn)還請(qǐng)您耐心評(píng)論指出。