摘要：本文將在上一篇文章的基礎上主要為大家介紹兩個內容一是如何免費地搭建多機的自動化測試環境，二是如何使用云測試服務進行度無死角的自動化測試。

擼主：潘潘，豈安科技軟件工程師
同濟大學畢業，曾在VMware等多家知名公司實習，3年全棧開發經驗，負責豈安科技核心產品初期的前端開發和架構工作。

在上一篇文章中，擼主已手把手教大家如何從零開始構建一個本地自動化測試工程。如果你沒有看過上一篇文章，請先點擊右邊逐字閱讀《從入門到不放棄：多瀏覽器的自動化測試(1)-本地測試》。

本文將在上一篇文章的基礎上主要為大家介紹兩個內容：一是如何免費地搭建多機的自動化測試環境，二是如何使用云測試服務進行360度無死角的自動化測試。信息量大，請各位閱后勿焚，動手牢記。

“從入門到不放棄”系列將給讀者們帶來更多從零開始的前端實踐案例，諸如前端組件庫設計與實施、項目自動化構建等案例，歡迎大家關注本系列的其他文章。

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

遠程測試需要搞清楚兩個概念，一是客戶端 (Client)，一是服務端 (Server)。Client 是用于運行 test cases 代碼的地方，Server 則是瀏覽器所在地。通過 Server 上的一些 servlet 來連接 Client 和 Server 上的瀏覽器，實現將 test 中的用例行為在遠程端的瀏覽器上執行。 通過瀏覽器和 test 執行宿主機的分離，使得test能在更多的瀏覽器上執行，并且更易于擴展測試瀏覽器的數量。在下文的實踐當中，讀者會對 Client 和 Server 有更清楚的了解，在此不再贅述。

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

1、尋找到一臺可用的主機： 無論是實體機還是虛擬機都是可以的，不過需要主機可以接入到測試運行主機的網絡。

2、在主機上安裝瀏覽器： 具體安裝的瀏覽器類型和版本根據操作系統和測試需求而定， 例如可以在 windows 操作系統上安裝 IE， firefox等瀏覽器，在 Linux 系統安裝 chrome, firefox等瀏覽器， 在 Mac系統上安裝 safari, chrome 等瀏覽器。

3、下載對應瀏覽器的 driver 到Server主機上。因為 selenium 需要使用不同的 driver 來啟動不同的瀏覽器，如同上一篇文章提到的bin目錄下的 driver 可執行文件，此時要將需要測試瀏覽器對應的 driver 下載到 server 上，然后再通過測試工程的配置告訴 selenium-server-standalone 這些 driver 在哪，從而執行它們來操作瀏覽器。

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

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

4、在主機上下載并啟動 Selenium Server：該 Server 實際上是一個 Java 小程序，用于 client 和 server 之間的通信（有關 selenium 原理的文章請關注《搞不懂不甘心》系列）。首先在 Selenium 的官網上下載 selenium-server-standalone-{VERSION}.jar， 然后啟動該 Jar 包。

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

如果主機沒有安裝 JRE,，則需要再安裝 java 的運行環境或者是直接安裝 jdk 。

5、修改測試項目的配置文件：還記得啟動測試時需要指定的配置文件嗎？這個配置文件 test.conf.js 非常重要，用于配置 selenium 以及測試的瀏覽器，當我們改變使用遠程server的瀏覽器作為測試目標時，當然需要修改配置文件。

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

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

對于test_settings的設置請參照上文，然后按照自己安裝的瀏覽器版本進行修改。

6、啟動測試：一切準備好了之后，在client主機上，也就是測試代碼運行的機子上便可啟動測試。

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

自己搭建測試云環境的過程其實并不復雜，只需要在將 selenium server 和瀏覽器安裝到其他主機即可，對于 client 上的代碼不需要改動，只需要改動配置中的 selenium 配置。

但是很快測試者會發現，當我們需要測試更多的機子，用手工的方式去維護這些 server 是一件費時費力的事，也消耗了公司的計算資源。有沒有更好的辦法讓我們既可以全面的測試自己的代碼又可以不用費盡心思維護主機？答案是有，請繼續閱讀。

對于繁瑣重復的工程任務，商家們總是能想到賺錢的辦法，這不，對于上文我們碰到的麻煩就有商家提供了相應的產品。該產品為測試者們提供無數個測試瀏覽器，測試者不需要關心這些瀏覽器在何處運行，應該怎么樣維護，只需要一個服務地址，便可以將自己的測試頁面跑在這些瀏覽器上。

其實這個服務地址和之前我們自己搭建的 Server ip 類似，只不過如果使用自己的測試云，使用不同的測試主機時，需要手動更改host。而這些商家提供了一個類似分銷中心，用于流量分發，所以我們只需要用一個地址便可實現使用不同的主機進行測試。

目前提供此類服務的商家有很多，如 browserstack、saucelabs、crossbrowsertesting 等，大家可以根據自己手頭黃金和測試的需要選擇性價比高的服務。本文將使用 browserstack 作為例子為大家科普此類服務，不過它并不是擼主的金錢爸爸，請大家放下水文的猜疑。

根據我們自行搭建云測試環境的經驗，我們將 browserstack 的測試后臺架構猜想為下圖所示。我們不關心該架構是否是真實的實現，但是這是合理的理論猜想，希望此圖能讓我們對此服務有個大概的技術了解：

browserstack 為用戶提供了自動化測試、實時交互測試、截圖等服務，關于具體的服務細節請移步官網。本節將主要介紹如何使用其自動化測試服務，會稍微提及實時交互測試的功能。

那接下來便開始我們的云測試使用體驗：

首先在其網站上注冊賬號，點擊最上方的導航欄中的 Automate，跳轉頁面后在新頁面左側最上方點擊 ”Username and Access Keys”，便可看到用于使用云測試服務的用戶名和key，我們將使用此auth來修改測試配置。

現在回到我們的測試項目，對 test.conf.js 的 selenium 項進行修改，并添加 common_capabilities 項，用于配置云服務的信息。

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

連接云測試服務的配置工作完成后，我們需要指定測試的瀏覽器種類和版本。

如果有不指定的字段，云服務會有缺省值來填充，例如配置中沒有指定操作系統，云服務則會自動選擇最快的一個測試機，而不管瀏覽器所在的操作系統。再例如當沒指定測試瀏覽器的版本時，云服務則會測試最新版本的瀏覽器。

官網上的文檔提供了所有可提供測試的瀏覽器種類和版本，為了說明方便，我們現在只指定瀏覽器種類，不規定版本。

簡要的瀏覽器配置項如下：

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

以上工作做完之后便可以啟動測試了，是不是so easy。

除了命令行返回的測試結果之外，browsertack 自動化測試還為我們提供了測試回放等。如果發現測試出錯，可以通過商家提供的在線實時測試來進行調試，這也是一個非常方便的功能。

WARDEN界面

閱讀完自動化測試的文章，相信大家已經迫不及待想體驗云測試的便利。在各位動手之前，有一些溫馨提示需要告知大家：

首先，這些云測試服務因為由國外服務商提供，所以網絡延時有些時候會過高，測試可能會出現超時的情況，請選擇網絡較好的主機來運行測試用例。

其次，是因為自動化測試會讓大家寫測試用例上癮，反正測試扔上去測就好，但是擼主認為測試人員還是要清楚地劃分測試的粒度，有些測試用例比如細粒度的單元測試和端對端的測試，有很多測試覆蓋的都是同樣的代碼，這樣的測試其實是浪費的，所以在明確目標之后，還需要精心設計測試用例。

最后，如有不懂請先 google，其他不能 google 的問題歡迎和擼主交流，文章若有錯請指教。