網頁自動化測試從無到有：使用Selenium（下）

➤ 本篇文將會使用 Visual Studio 作為開發工具，以 C# 撰寫程式範例。

延續前一篇文章，接下來本文將會介紹如何使用Selenium Grid，來讓多個網頁測試可以一次平行跑在多個機器的多個瀏覽器中。
如果你還沒看過上集，可以參考：

網頁自動化測試從無到有：使用Selenium（上）

Selenium Grid 簡介

Selenium Grid允許我們在多台機器的多個瀏覽器上並行的進行測試，即分佈式測試。
而通常以下兩種情況會需要使用到Selenium Grid：

1. 多個瀏覽器的兼容性測試，即在不同瀏覽器或不同操作系統的瀏覽器中進行測試。
2. 測試案例較多時，也可以通過分佈式測試減少測試執行時間。

在上集中，我們使用MSTest框架來撰寫測試，但由於MSTest不支援並行測試，因此在這邊我們需要將測試framework改為NUnit。

關於 NUnit

NUnit 是開源的單元測試框架，支持所有的.Net語言（採用C#開發）。

這邊也要介紹一下NUnit與MSTest相對應的一些屬性用途：

所需元件

1. Chrome的WebDriver：chromedriver (http://chromedriver.chromium.org/downloads)
2. Firefox的WebDriver：geckodriver (https://github.com/mozilla/geckodriver/releases)
3. IE的驅動程式：IEDriverServer (https://www.seleniumhq.org/download)
4. Selenium Standalone Server (https://www.seleniumhq.org/download)
5. Java JDK (https://java.com/zh_TW/download)

完成上述檔案下載後：

1. 將上述檔案放在指定路徑（此處以C:\示範）。
2. 於控制台 > 系統及安全性 > 系統 > 進階系統設定 > 環境變數 編輯系統變數中的PATH，加上指定的路徑C:\。

在 Visual Studio 的【工具】 > 【NuGet 封裝管理員】 > 【管理方案的NuGet套件】來安裝以下這些NuGet套件。

Selenium Grid工作原理

Selenium Grid是由一個Hub節點和數個Node代理節點所组成，即分佈式結構。

而Hub顧名思義是一個集中管理站點，它是用來管理底下各個註冊節點（Node）的狀態，並且接收遠端程式碼的呼叫調用，然後再把收到的請求丟給底下的Node來執行。

也就是說我們可以在多台電腦中都建立Node，讓測試能夠在這些電腦上執行，並由一台電腦的Hub來統一管理（當然前提是這些電腦的IP必須對外開放）。

啟動Selenium Grid Server

1. 首先我們必須先建立中央站點Selenium Grid Hub：

java -jar selenium-server-standalone-3.14.0.jar -role hub

開始的server預設port會是4444， 如果port 4444已被佔用(可用 netstat -a 查詢)，我們也可以指定到其他的port，作法如下：

java -jar selenium-server-standalone-3.14.0.jar -role hub -port 8888

2. 接著在已經建立好的Hub下註冊Node，並指定port：

java -jar selenium-server-standalone-3.14.0.jar -role node -hub http://【改成您的 IP Address】:4444/grid/register -port 5555 -browser browserName=firefox,maxInstances=5 -browser browserName=chrome,maxInstances=5 -browser "browserName=internet explorer,maxInstances=5" -maxSession 5

看起來落落長的指令，讓我來說明一下：

maxInstances：每次最多可執行的瀏覽器數 。
maxSession：總共可執行的瀏覽器數。

例如：若每個瀏覽器各有五項測試案例，
並設定 chrome maxIntances = 5, IE maxInstances = 2, maxSession = 5 ,
則一次可開啟的瀏覽器數為 chrome*5 或是 chrome*4 + IE*1 或 chrome*3 + IE*2。

設定完成後前往 http://localhost:4444/grid/console 可以看見已註冊的Node囉～

完成上述的Selenium Grid設定後，只要在程式碼指定好機器安裝之Selenium Grid Hub位址(如下圖)，就可以在該機器中執行測試。

Selenium Grid 平行測試腳本

由於開啟瀏覽器、設置web driver屬性、關閉瀏覽器、前往指定URL等動作在擁有越來越多test case 後會不斷重複，因此我將這些重複動作的程式碼拉出，並建立一個class為Driver，專門用來執行上述這些動作，並能更有彈性處理各個Unit Test傳進來的參數！

以下範例先使用Chrome、Firefox及IE三種瀏覽器來針對Apple官網進行平行測試。

Driver.cs

程式碼第7~11行：設定Driver的建構子，並設定參數browser。

第13~57行：在一個Unit Test Class開始時判斷傳進的browser參數為何並執行分別執行不同動作。

第59~73行：在一個Unit Test Class結束時關閉瀏覽器。

UnitTest.cs

從NUnit 2.5開始，允許我們在TextFixture中加入參數，這真的是非常好用的功能。
TextFixture使用方法請參考：

NUnit.org

由於每一個TextFixture都代表會執行一次的測試，因此我在TextFixture中加入參數：browser，來幫助進行多個瀏覽器的測試，並且在Driver建構子方法內來承接及處理這個參數。

程式碼第6行：NUnit語法，設定測試可以依照 Fixtures並行執行(參考https://github.com/nunit/docs/wiki/Parallelizable-Attribute)

第7~9行：繼承Driver這個class及其參數。

以上的程式碼執行後，就會一次打開Chrome及Firefox瀏覽器測試TestApple() 這個Unit Test。

我的網頁自動化測試經驗談

1. 當網站系統有多國語言時，如何測試？

當網頁加入了多國語言後，UI測試就更是重要了。
由於每種語言組成句子的長度不同，有處理過多國語言網站的人就會知道，最頭痛的是常常改一個地方就把版面搞壞，在反覆檢查修改下往往需要花費大量時間（暈），因此若能有針對多國語言的UI測試，就可以早點下班啦～

Driver.cs

UnitTest.cs

在剛剛有提到，每一個TextFixture都代表會執行一次的測試，因此我們在建構子中新增一參數lang，並修改baseURL，讓目標網址可以隨著參數改變語系，如此一來我們就可以在Chrome、Firefox、IE中測試以上五種不同的語言了！

2. 測試常見錯誤：IE的安全性設定

由於IE瀏覽器可能會跳出警示視窗或是阻擋，造成測試過程被中斷然後報錯誤，在IE中做安全性設定就可以解決這項困擾。

STEP 1. 關閉保護模式並降低安全層級。

STEP 2. 若程式有使用iframe則須到【Security — Custom level】設定可啟動iframe中的程式或檔案為Enable或Prompt。

STEP 3. 取消勾選【Enable 64-bit processes for Enhanced Protected Mode】。

總結

自動化測試的目的在於減少每次重複手動檢查的人工成本，改為系統自動執行省時省力，但唯有增加測試的code coverage，才能有效降低網頁的錯誤率。

當網頁測試案例越積越多時，執行的時間就非常重要，如何讓測試在最短時間內完成也是一大重點。

而一旦自動化測試的架構建造起來後，對於良率的提升是絕對有幫助的！

若喜歡這篇文章的朋友可以於底下留言互相交流或幫我拍拍手👏，感謝大家！