[從入門到不放棄]多瀏覽器的自動化測試(2)-雲服務測試

在上一篇文章中，擼主已手把手教大家如何從零開始構建一個本地自動化測試工程。如果你沒有看過上一篇文章，請先逐字閱讀。本文將在上一篇文章的基礎上主要為大家介紹兩個內容：一是如何免費地搭建多機的自動化測試環境，二是如何使用雲測試服務進行360度無死角的自動化測試。信息量大，請各位閱後勿焚，動手牢記。n

本地測試鞭長莫及

由於一台計算機支持的瀏覽器種類有限，如一台 mac 上可以安裝 safari, chrome, firefox, opera 等，而且通常只能安裝一個版本的產品，所以本地測試多用於檢驗功能邏輯是否正確，或者是檢驗特定瀏覽器的特定功能。對於未知的兼容性測試，單憑本地測試是沒法進行的。下文中介紹的方法將提供給測試者一種全新的測試體驗，通過遠程測試的方式對自己的代碼進行測試。nn遠程測試需要搞清楚兩個概念，一是客戶端 (Client)，一是服務端 (Server)，Client 是用於運行 test cases 代碼的地方，Server 則是瀏覽器所在地。通過 Server 上的一些 servlet 來連接 Client 和 Server 上的瀏覽器，實現將 test 中的用例行為在遠程端的瀏覽器上執行。 通過瀏覽器和 test 執行宿主機的分離，使得test能在更多的瀏覽器上執行，並且更易於擴展測試瀏覽器的數量。在下文的實踐當中，讀者會對 Client 和 Server 有更清楚的了解，在此不再贅述。n

自己的雲測試環境

既然測試代碼要和瀏覽器環境分割開來，那麼我們需要在前文的基礎上將瀏覽器安裝到其他的環境中，而不是將瀏覽器和測試的 Node 測試環境放在同一台機子。安裝完成之後需要使用服務端的 Servlet 也就是 Selenium 提供的 webdriver server 將測試環境和瀏覽器連接起來。具體的步驟如下：nn1. 尋找到一台可用的主機： 無論是實體機還是虛擬機都是可以的，不過需要主機可以接入到測試運行主機的網路。

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/chromium.org/chromedriver
• geckodriver (可用於 firefox, safari)下載地址:https://github.com/mozilla/geckodriver/releases

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

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

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

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

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

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

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

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

自己搭建測試雲環境的過程其實並不複雜，只需要在將 selenium server 和瀏覽器安裝到其他主機即可，對於 client 上的代碼不需要改動，只需要改動配置中的 selenium 配置。但是很快測試者會發現，當我們需要測試更多的機子，用手工的方式去維護這些 server 是一件費時費力的事，也消耗了公司的計算資源。有沒有更好的辦法讓我們既可以全面的測試自己的代碼又可以不用費盡心思維護主機？答案是有，請繼續閱讀。n

雲測試服務

對於繁瑣重複的工程任務，商家們總是能想到賺錢的辦法，這不對於上文我們碰到的麻煩就有商家提供了相應的產品。該產品為測試者們提供無數個測試瀏覽器，測試者不需要關心這些瀏覽器在何處運行，應該怎麼樣維護，只需要一個服務地址便可以將自己的測試頁面跑在這些瀏覽器上，其實這個服務地址和之前我們自己搭建的 Server ip 類似，只不過如果使用自己的測試雲，使用不同的測試主機時，需要手動更改host。而這些商家提供了一個類似分銷中心，用於流量分發，所以我們只需要用一個地址便可實現使用不同的主機進行測試。nn目前提供此類服務的商家有很多，如 browserstack、saucelabs、crossbrowsertesting 等，大家可以根據自己手頭黃金和測試的需要選擇性價比高的服務。本文將使用 browserstack 作為例子為大家科普此類服務，不過它並不是擼主的金錢爸爸，請大家放下水文的猜疑。nn

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

browserstack 為用戶提供了自動化測試、實時交互測試、截圖等服務，關於具體的服務細節請移步官網。本節將主要介紹如何使用其自動化測試服務，會稍微提及實時交互測試的功能。那接下來便開始我們的雲測試使用體驗：nn首先在其[網站](https://www.browserstack.com)上註冊賬號，點擊最上方的導航欄中的 Automate，跳轉頁面後在新頁面左側最上方點擊 」Username and Access Keys」，便可看到用於使用雲測試服務的用戶名和key，我們將使用此auth來修改測試配置。nn現在回到我們的測試項目，對 test.conf.js 的 selenium 項進行修改，並添加 common_capabilities 項，用於配置雲服務的信息。

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

連接雲測試服務的配置工作完成後，我們需要指定測試的瀏覽器種類和版本。如果有不指定的欄位，雲服務會有預設值來填充，例如配置中沒有指定操作系統，雲服務則會自動選擇最快的一個測試機，而不管瀏覽器所在的操作系統。再例如當沒指定測試瀏覽器的版本時，雲服務則會測試最新版本的瀏覽器。官網上的文檔提供了所有可提供測試的瀏覽器種類和版本，為了說明方便，我們現在只指定瀏覽器種類，不規定版本。簡要的瀏覽器配置項如下：

...n safari: {n desiredCapabilities: {n browserName: safarin }n },n ie: {n desiredCapabilities: {n browserName: ien }n },n ...n ios: {n desiredCapabilities: {n browserName: iPhonen }n }n ...n }n

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

有的放矢地測試

閱讀完自動化測試的文章，相信大家已經迫不及待想體驗雲測試的便利。在各位動手之前，有一些溫馨提示需要告知大家。首先這些雲測試服務因為由國外服務商提供，所以網路延時有些時候會過高，測試可能會出現超時的情況，請選擇網路較好的主機來運行測試用例。其次是因為自動化測試會讓大家寫測試用例上癮，反正測試扔上去測就好，但是擼主認為測試人員還是要清楚地劃分測試的粒度，有些測試用例比如細粒度的單元測試和端對端的測試，有很多測試覆蓋的都是同樣的代碼，這樣的測試其實是浪費的，所以在明確目標之後，還需要精心設計測試用例。最後如有不懂請先 google，其他不能 google 的問題歡迎和擼主交流，文章若有錯請指教。