摘要：本文將在上一篇文章的基礎(chǔ)上主要為大家介紹兩個(gè)內(nèi)容一是如何免費(fèi)地搭建多機(jī)的自動(dòng)化測(cè)試環(huán)境，二是如何使用云測(cè)試服務(wù)進(jìn)行度無(wú)死角的自動(dòng)化測(cè)試。

擼主：潘潘，豈安科技軟件工程師
同濟(jì)大學(xué)畢業(yè)，曾在VMware等多家知名公司實(shí)習(xí)，3年全棧開(kāi)發(fā)經(jīng)驗(yàn)，負(fù)責(zé)豈安科技核心產(chǎn)品初期的前端開(kāi)發(fā)和架構(gòu)工作。

在上一篇文章中，擼主已手把手教大家如何從零開(kāi)始構(gòu)建一個(gè)本地自動(dòng)化測(cè)試工程。如果你沒(méi)有看過(guò)上一篇文章，請(qǐng)先點(diǎn)擊右邊逐字閱讀《從入門(mén)到不放棄：多瀏覽器的自動(dòng)化測(cè)試(1)-本地測(cè)試》。

本文將在上一篇文章的基礎(chǔ)上主要為大家介紹兩個(gè)內(nèi)容：一是如何免費(fèi)地搭建多機(jī)的自動(dòng)化測(cè)試環(huán)境，二是如何使用云測(cè)試服務(wù)進(jìn)行360度無(wú)死角的自動(dòng)化測(cè)試。信息量大，請(qǐng)各位閱后勿焚，動(dòng)手牢記。

“從入門(mén)到不放棄”系列將給讀者們帶來(lái)更多從零開(kāi)始的前端實(shí)踐案例，諸如前端組件庫(kù)設(shè)計(jì)與實(shí)施、項(xiàng)目自動(dòng)化構(gòu)建等案例，歡迎大家關(guān)注本系列的其他文章。

由于一臺(tái)計(jì)算機(jī)支持的瀏覽器種類(lèi)有限，如一臺(tái) mac 上可以安裝 safari, chrome, firefox, opera 等，而且通常只能安裝一個(gè)版本的產(chǎn)品，所以本地測(cè)試多用于檢驗(yàn)功能邏輯是否正確，或者是檢驗(yàn)特定瀏覽器的特定功能。對(duì)于未知的兼容性測(cè)試，單憑本地測(cè)試是沒(méi)法進(jìn)行的。下文中介紹的方法將提供給測(cè)試者一種全新的測(cè)試體驗(yàn)，通過(guò)遠(yuǎn)程測(cè)試的方式對(duì)自己的代碼進(jìn)行測(cè)試。

遠(yuǎn)程測(cè)試需要搞清楚兩個(gè)概念，一是客戶(hù)端 (Client)，一是服務(wù)端 (Server)。Client 是用于運(yùn)行 test cases 代碼的地方，Server 則是瀏覽器所在地。通過(guò) Server 上的一些 servlet 來(lái)連接 Client 和 Server 上的瀏覽器，實(shí)現(xiàn)將 test 中的用例行為在遠(yuǎn)程端的瀏覽器上執(zhí)行。 通過(guò)瀏覽器和 test 執(zhí)行宿主機(jī)的分離，使得test能在更多的瀏覽器上執(zhí)行，并且更易于擴(kuò)展測(cè)試瀏覽器的數(shù)量。在下文的實(shí)踐當(dāng)中，讀者會(huì)對(duì) Client 和 Server 有更清楚的了解，在此不再贅述。

既然測(cè)試代碼要和瀏覽器環(huán)境分割開(kāi)來(lái)，那么我們需要在前文的基礎(chǔ)上將瀏覽器安裝到其他的環(huán)境中，而不是將瀏覽器和測(cè)試的 Node 測(cè)試環(huán)境放在同一臺(tái)機(jī)子。安裝完成之后需要使用服務(wù)端的 Servlet 也就是 Selenium 提供的 webdriver server 將測(cè)試環(huán)境和瀏覽器連接起來(lái)。具體的步驟如下：

1、尋找到一臺(tái)可用的主機(jī)： 無(wú)論是實(shí)體機(jī)還是虛擬機(jī)都是可以的，不過(guò)需要主機(jī)可以接入到測(cè)試運(yùn)行主機(jī)的網(wǎng)絡(luò)。

2、在主機(jī)上安裝瀏覽器： 具體安裝的瀏覽器類(lèi)型和版本根據(jù)操作系統(tǒng)和測(cè)試需求而定， 例如可以在 windows 操作系統(tǒng)上安裝 IE， firefox等瀏覽器，在 Linux 系統(tǒng)安裝 chrome, firefox等瀏覽器， 在 Mac系統(tǒng)上安裝 safari, chrome 等瀏覽器。

3、下載對(duì)應(yīng)瀏覽器的 driver 到Server主機(jī)上。因?yàn)?selenium 需要使用不同的 driver 來(lái)啟動(dòng)不同的瀏覽器，如同上一篇文章提到的bin目錄下的 driver 可執(zhí)行文件，此時(shí)要將需要測(cè)試瀏覽器對(duì)應(yīng)的 driver 下載到 server 上，然后再通過(guò)測(cè)試工程的配置告訴 selenium-server-standalone 這些 driver 在哪，從而執(zhí)行它們來(lái)操作瀏覽器。

chromedriver (用于 chrome)下載地址:
https://sites.google.com/a/ch...

geckodriver (可用于 firefox, safari)下載地址:
https://github.com/mozilla/ge...

4、在主機(jī)上下載并啟動(dòng) Selenium Server：該 Server 實(shí)際上是一個(gè) Java 小程序，用于 client 和 server 之間的通信（有關(guān) selenium 原理的文章請(qǐng)關(guān)注《搞不懂不甘心》系列）。首先在 Selenium 的官網(wǎng)上下載 selenium-server-standalone-{VERSION}.jar， 然后啟動(dòng)該 Jar 包。

java -jar selenium-server-standalone-{VERSION}.jar

如果主機(jī)沒(méi)有安裝 JRE,，則需要再安裝 java 的運(yùn)行環(huán)境或者是直接安裝 jdk 。

5、修改測(cè)試項(xiàng)目的配置文件：還記得啟動(dòng)測(cè)試時(shí)需要指定的配置文件嗎？這個(gè)配置文件 test.conf.js 非常重要，用于配置 selenium 以及測(cè)試的瀏覽器，當(dāng)我們改變使用遠(yuǎn)程server的瀏覽器作為測(cè)試目標(biāo)時(shí)，當(dāng)然需要修改配置文件。

我們需要將配置文件中的 selenium 項(xiàng)修改為如下形式：

selenium : {
    "start_process" : true,
    //server的ip地址
    "host" : "192.168.10.1",
    "port" : 4444,
    "cli_args": {
      //chromedriver 在server主機(jī)上的文件路徑
      "webdriver.chrome.driver": "/home/bin/chromedriver",
      //geckodriver 在server主機(jī)上的文件路徑
      "webdriver.gecko.driver" : "/home/bin/geckodriver"
    }
  }

對(duì)于test_settings的設(shè)置請(qǐng)參照上文，然后按照自己安裝的瀏覽器版本進(jìn)行修改。

6、啟動(dòng)測(cè)試：一切準(zhǔn)備好了之后，在client主機(jī)上，也就是測(cè)試代碼運(yùn)行的機(jī)子上便可啟動(dòng)測(cè)試。

"scripts": {
  ...
  "test": "./node_modules/.bin/nightwatch -c conf/test.conf.js -e A,B"
  ...
}

自己搭建測(cè)試云環(huán)境的過(guò)程其實(shí)并不復(fù)雜，只需要在將 selenium server 和瀏覽器安裝到其他主機(jī)即可，對(duì)于 client 上的代碼不需要改動(dòng)，只需要改動(dòng)配置中的 selenium 配置。

但是很快測(cè)試者會(huì)發(fā)現(xiàn)，當(dāng)我們需要測(cè)試更多的機(jī)子，用手工的方式去維護(hù)這些 server 是一件費(fèi)時(shí)費(fèi)力的事，也消耗了公司的計(jì)算資源。有沒(méi)有更好的辦法讓我們既可以全面的測(cè)試自己的代碼又可以不用費(fèi)盡心思維護(hù)主機(jī)？答案是有，請(qǐng)繼續(xù)閱讀。

對(duì)于繁瑣重復(fù)的工程任務(wù)，商家們總是能想到賺錢(qián)的辦法，這不，對(duì)于上文我們碰到的麻煩就有商家提供了相應(yīng)的產(chǎn)品。該產(chǎn)品為測(cè)試者們提供無(wú)數(shù)個(gè)測(cè)試瀏覽器，測(cè)試者不需要關(guān)心這些瀏覽器在何處運(yùn)行，應(yīng)該怎么樣維護(hù)，只需要一個(gè)服務(wù)地址，便可以將自己的測(cè)試頁(yè)面跑在這些瀏覽器上。

其實(shí)這個(gè)服務(wù)地址和之前我們自己搭建的 Server ip 類(lèi)似，只不過(guò)如果使用自己的測(cè)試云，使用不同的測(cè)試主機(jī)時(shí)，需要手動(dòng)更改host。而這些商家提供了一個(gè)類(lèi)似分銷(xiāo)中心，用于流量分發(fā)，所以我們只需要用一個(gè)地址便可實(shí)現(xiàn)使用不同的主機(jī)進(jìn)行測(cè)試。

目前提供此類(lèi)服務(wù)的商家有很多，如 browserstack、saucelabs、crossbrowsertesting 等，大家可以根據(jù)自己手頭黃金和測(cè)試的需要選擇性?xún)r(jià)比高的服務(wù)。本文將使用 browserstack 作為例子為大家科普此類(lèi)服務(wù)，不過(guò)它并不是擼主的金錢(qián)爸爸，請(qǐng)大家放下水文的猜疑。

根據(jù)我們自行搭建云測(cè)試環(huán)境的經(jīng)驗(yàn)，我們將 browserstack 的測(cè)試后臺(tái)架構(gòu)猜想為下圖所示。我們不關(guān)心該架構(gòu)是否是真實(shí)的實(shí)現(xiàn)，但是這是合理的理論猜想，希望此圖能讓我們對(duì)此服務(wù)有個(gè)大概的技術(shù)了解：

browserstack 為用戶(hù)提供了自動(dòng)化測(cè)試、實(shí)時(shí)交互測(cè)試、截圖等服務(wù)，關(guān)于具體的服務(wù)細(xì)節(jié)請(qǐng)移步官網(wǎng)。本節(jié)將主要介紹如何使用其自動(dòng)化測(cè)試服務(wù)，會(huì)稍微提及實(shí)時(shí)交互測(cè)試的功能。

那接下來(lái)便開(kāi)始我們的云測(cè)試使用體驗(yàn)：

首先在其網(wǎng)站上注冊(cè)賬號(hào)，點(diǎn)擊最上方的導(dǎo)航欄中的 Automate，跳轉(zhuǎn)頁(yè)面后在新頁(yè)面左側(cè)最上方點(diǎn)擊 ”Username and Access Keys”，便可看到用于使用云測(cè)試服務(wù)的用戶(hù)名和key，我們將使用此auth來(lái)修改測(cè)試配置。

現(xiàn)在回到我們的測(cè)試項(xiàng)目，對(duì) test.conf.js 的 selenium 項(xiàng)進(jìn)行修改，并添加 common_capabilities 項(xiàng)，用于配置云服務(wù)的信息。

selenium : {
    "start_process" : false,
    "host" : "hub-cloud.browserstack.com",
    "port" : 80
  },
  common_capabilities: {
    "build": "nightwatch-browserstack",
    // Browserstack 的 username 對(duì)應(yīng)配置項(xiàng)
    "browserstack.user": process.env.BROWSERSTACK_USERNAME",
    // Browserstack 的 key 對(duì)應(yīng)配置項(xiàng)
    "browserstack.key": process.env.BROWSERSTACK_ACCESS_KEY,
    "browserstack.debug": true,
    "browserstack.local": true
  }

連接云測(cè)試服務(wù)的配置工作完成后，我們需要指定測(cè)試的瀏覽器種類(lèi)和版本。

如果有不指定的字段，云服務(wù)會(huì)有缺省值來(lái)填充，例如配置中沒(méi)有指定操作系統(tǒng)，云服務(wù)則會(huì)自動(dòng)選擇最快的一個(gè)測(cè)試機(jī)，而不管瀏覽器所在的操作系統(tǒng)。再例如當(dāng)沒(méi)指定測(cè)試瀏覽器的版本時(shí)，云服務(wù)則會(huì)測(cè)試最新版本的瀏覽器。

官網(wǎng)上的文檔提供了所有可提供測(cè)試的瀏覽器種類(lèi)和版本，為了說(shuō)明方便，我們現(xiàn)在只指定瀏覽器種類(lèi)，不規(guī)定版本。

簡(jiǎn)要的瀏覽器配置項(xiàng)如下：

 ...
    safari: {
      desiredCapabilities: {
        browserName: "safari"
      }
    },
    ie: {
      desiredCapabilities: {
        browserName: "ie"
      }
    },
    ...
    ios: {
      desiredCapabilities: {
        browserName: "iPhone"
      }
    }
    ...
  }

以上工作做完之后便可以啟動(dòng)測(cè)試了，是不是so easy。

除了命令行返回的測(cè)試結(jié)果之外，browsertack 自動(dòng)化測(cè)試還為我們提供了測(cè)試回放等。如果發(fā)現(xiàn)測(cè)試出錯(cuò)，可以通過(guò)商家提供的在線實(shí)時(shí)測(cè)試來(lái)進(jìn)行調(diào)試，這也是一個(gè)非常方便的功能。

WARDEN界面

閱讀完自動(dòng)化測(cè)試的文章，相信大家已經(jīng)迫不及待想體驗(yàn)云測(cè)試的便利。在各位動(dòng)手之前，有一些溫馨提示需要告知大家：

首先，這些云測(cè)試服務(wù)因?yàn)橛蓢?guó)外服務(wù)商提供，所以網(wǎng)絡(luò)延時(shí)有些時(shí)候會(huì)過(guò)高，測(cè)試可能會(huì)出現(xiàn)超時(shí)的情況，請(qǐng)選擇網(wǎng)絡(luò)較好的主機(jī)來(lái)運(yùn)行測(cè)試用例。

其次，是因?yàn)樽詣?dòng)化測(cè)試會(huì)讓大家寫(xiě)測(cè)試用例上癮，反正測(cè)試扔上去測(cè)就好，但是擼主認(rèn)為測(cè)試人員還是要清楚地劃分測(cè)試的粒度，有些測(cè)試用例比如細(xì)粒度的單元測(cè)試和端對(duì)端的測(cè)試，有很多測(cè)試覆蓋的都是同樣的代碼，這樣的測(cè)試其實(shí)是浪費(fèi)的，所以在明確目標(biāo)之后，還需要精心設(shè)計(jì)測(cè)試用例。

最后，如有不懂請(qǐng)先 google，其他不能 google 的問(wèn)題歡迎和擼主交流，文章若有錯(cuò)請(qǐng)指教。