在傳統的網際網路應用中，由於瀏覽器端的時間消耗比較有限，並且頁面裝載時間也比較簡單且有限，所以在對傳統網際網路應用的響應時間分析中，我們通常忽略頁面裝載時間和瀏覽器渲染時間，而著重分析伺服器響應時間。而在 Web 2.0 應用中，頁面裝載時間和瀏覽器渲染時間將成為決定效能的關鍵因素，所以我們需要新的方法與工具來覆蓋特別是客戶端的效能：瀏覽器響應時間。

我們使用一些工具來幫助我們測試瀏覽器端的效能；比如說 DummyNet 可以模擬不同網路頻寬和延遲，以便我們分析不同網路情況下的的網頁效能；HttpWatch 可以分別記錄每個請求的伺服器端響應時間、頁面裝載時間、瀏覽器渲染時間；DynaTrace AJAX 是一種詳細的底層工具，它不僅可以顯示所有請求和檔案在網路中的傳輸時間，還會記錄瀏覽器 render、CPU 消耗、JavaScript 解析和執行的詳細情況。我們使用這些工具的時候大多是手動觸發，為了得到資料和分析報告，必須將使用者案例在不同的瀏覽器上手動實現，並且在某一時刻開啟或關閉工具和儲存結果。過多的手動操作使我們很難專注於資料分析和發現問題。所以我們需要解決以下問題：

• 需要有工具在模仿使用者使用 web 應用程式的同時自動觸發這些工具，生成分析資料。
• 可以同時模仿不同的使用者行為，包括不同的瀏覽器，網路條件和使用習慣。

下面的章節將介紹如何利用自動化工具 Selenium 來搭建測試網頁瀏覽器端效能的測試框架，實現瀏覽器端自動測試和並行測試。

瀏覽器端效能測試框架中用到的技術

我們的測試框架主要採用了以下技術：

Selenium WebDriver

Selenium 是針對 Web 應用的測試框架，支援多種瀏覽器和多種程式設計語。WebDriver 通過原生瀏覽器支援或者瀏覽器擴充套件直接控制瀏覽器。它提供了一個更為簡單，一致的程式設計介面並且解決了在 Selenium-RC API 遇到的問題。Selenium WebDriver 更好的支援了動態網頁。它的目標是為現代的網頁程式測試提供設計良好的面向物件的 API。

Selenium Grid2

Selenium Grid 允許使用者將測試案例分佈在幾臺機器上並行執行。使用者可以在一個集中控制點控制不同的環境。在不同的瀏覽器 / 系統組合上面更為容易的執行測試案例。允許使用者更多的利用虛擬資源減少了維護測試環境的成本。Selenium Grid2 很好的支援了 WebDriver。利用原有的 WebDriver 指令碼和 Grid 技術就可以將不同的測試用例分佈在不同的機器或虛機上，在特定的瀏覽器版本上執行，自動地啟動關閉分析工具，統一地儲存測試結果。Selenium Grid2 的機制如圖 1，啟動一箇中央節點（Hub），然後啟動多個遠端控制節點（rc），啟動 rc 時告知 Hub 的位置，這樣這些 rc 就可以註冊到 Hub 上，測試程式與 Hub 通訊，當測試被併發地發給 Hub 時，Hub 會自動將這些測試命令分發給已經註冊的 rc，rc 接到命令後執行測試。

TestNG

本測試系統還使用 TestNG 工具來輔助配置自動測試。TestNG 是測試 Java 應用程式的框架之一。TestNG 以其靈活性和引數化成為定義 Selenium 的驅動驗收測試的首選。它通過一些語義註釋來傳遞測試的引數，定義測試指令碼的順序並配置執行時的效能。使用者可以通過配置來生成各式測試報告，十分方便。

圖 1. Selenium Grid2 的機制

Ant

在框架中我們使用 Ant 來構建版本 , 然後部署到測試環境中去 , 再然後執行測試指令碼到生成傳送測試報告 .

回頁首

瀏覽器端效能測試框架的實現

Selenium WebDriver 編寫測試指令碼

利用 Selenium WebDriver 為動作執行和頁面跳轉進行設計。Selenium WebDriver 可以模擬使用者上網的行為，新增計時程式碼用以測算使用者某個動作執行的時間或是頁面跳轉需要的時間。以使用者登入為例，在輸入使用者名稱和密碼之後開始用 startTrans 函式開始計時，在點選提交按鈕頁面跳轉之後用 endTrans 函式結束計時。

清單 1. 在 Selenium 中新增計時程式碼

利用 DummyNet 模擬不同網路條件下使用者的案例執行。頻寬模擬與控制是效能測試的一個常規需求。很多時候我們必須能夠提供可變的頻寬、上行和下行速率，從而獲得這些條件下效能的表現。開源工具 DummyNet 是一款優秀的網路控制工具，它通過過載本機的網絡卡驅動，提供給開放人員命令列介面去模擬頻寬可變利用。呼叫 DummyNet 的命令後執行 Selenium 指令碼可以設定網路頻寬和延遲。以下命令限制從源地址到目的地址的流量頻寬 2Mb, 延遲 300ms。

ipfw add pipe 2 ip from %sourceip%  to %targetip% out proto ip
ipfw pipe 2 config delay 300ms bw 2Mbit/s

利用 HttpWatch 和 DynaTrace AJAX 為特定的頁面請求記錄時間。HttpWatch 和 DynaTrace AJAX 是兩款強大的網頁資料分析工具。它們通常整合在瀏覽器的工具欄。以往我們通過手動開啟這些工具在瀏覽頁面的同時收集所需的分析資料。在新的框架中 Selenium 指令碼可以呼叫它們的介面驅動瀏覽器從會話中啟動分析工具並收集儲存效能資訊。

清單 2. Selenium 指令碼呼叫 DynaTrace AJAX 介面

Selenium Grid2 集中控制測試環境

步驟一：啟動中央節點（Hub）。Hub 會接收測試請求並將它們分佈在正確的節點上。啟動 Hub 的預設埠為 4444，也可以通過引數指定埠。開啟地址：http://localhost:4444/grid/console，通過頁面可以觀察 Hub 的狀態。啟動命令如下 :

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

步驟二：配置和啟動遠端控制節點（rc）。遠端節點是您需要測試的測試機所在的物理機或虛擬機器。啟動節點時需要傳入 Hub 的 IP 地址和埠號。預設情況下，節點的埠為 5555，每個節點可以啟動 11 個瀏覽器，包括 5 個 firefox、5 個 chrome 和 1 個 ie 瀏覽器。最多有 5 個並行的測試案例。使用者也可以通過引數指定埠和瀏覽器，以下命令將會啟動 Linux 遠端節點上的三個 firefox 瀏覽器進行並行測試，它們指向在另一臺機器的 Hub 節點。

 java -jar selenium-server-standalone-2.14.0.jar -role node \
 -hub http://remotehost:4444/grid/register \
 -browser browserName=firefox,version=3.6,maxInstances=3,\
 platform=LINUX

Selenium WebDriver 和 Grid2 併發執行測試用例

TestNG 可以很方便的載入在已經開發好的 Selenium WebDriver 測試案例，測試用例中的引數通過 @Parameters 傳遞。在測試中我們需要將同一個測試案例傳送到不同的節點或是瀏覽器上執行。所以我們從已有的 Selenium 指令碼中選出案例後用 @Test 標註並加入節點的 IP、埠和瀏覽器型別引數。

清單 3. 將 TestNG 載入在已有的 Selenium 測試指令碼

 @Test 
 @Parameters({"seleniumHost", "seleniumPort", "bs"}) 
 public void sitenav(String Host,String Port,String browser)

TestNG 要求將所有要執行的測試用例都記錄在一個叫 testng.xml 的檔案中，然後根據該檔案中的測試用例順序依次執行測試。通過 suit 標籤的屬性可以指定 method、tests 或是 classes 的併發執行。我們在 testng.xml 中將測試的並行粒度設為 Test, 用引數傳入不同的 IP 地址、埠號、瀏覽器名稱，形成不同的測試案例，以便在不同節點上的不同瀏覽器中並行執行。

清單 4. testng.xml 中有關並行測試案例的配置

最後用 Ant 從命令列執行 TestNG 類。使用者通過命令列啟動 Ant，讀取目標檔案 build.xml 來獲得專案的引數，例如目標定義、類路徑、引入的檔案等。Ant 通過讀取 TestNG 的配置檔案 testng.xml 來獲取引數，將 Java 程式碼編譯成 TestNG 類，並且根據配置檔案中傳入的引數和順序來執行這些類。以下是在 Ant 的 build.xml 裡面如何正確配置 TestNG。

清單 5. Build.xml 裡配置 TestNG

應用示例

IBM Connections 3 是 IBM 專門為滿足企業業務需求而設計的一款社交軟體。我們用它作為目標程式來測試其瀏覽器端的效能。用 Selenium WebDriver 編寫指令碼模擬使用者依次瀏覽主頁、登陸、個人資料、部落格等主要頁面。我們將同樣的指令碼在不同網路環境、不同作業系統、不同瀏覽器中並行執行，並且記錄頁面的響應時間，完整下載時間，對不同瀏覽器，不同網路條件下的頁面響應時間加以比較。測試過程如下：

• 選取幾臺測試機作為測試節點，測試機器上具有我們所需要的作業系統、瀏覽器型別、測試分析工具，選取一臺測試機作為 Hub。配置和啟動 Hub 和測試節點。
• 準備不同型別的測試案例 Test1.....TestN。根據作業系統、瀏覽器和所需的測試工具，在 testng.xml 中將測試指令碼分配給相對應的測試節點 Node1.......NodeN 形成不同的測試案例。圖 2 是測試節點配置和測試案例的分佈圖。
• 編輯 build.xml 檔案。執行 ant 命令。通過網頁觀察 Hub 的狀態和測試節點的執行情況。
• 測試執行完，從各節點和 Hub 上收集測試資料加以整理和分析。

測試資料從幾個方面獲得。有關測試環境的資料將會直接從配置檔案獲取，簡單的頁面響應時間會由 Selenium 指令碼獲取。瀏覽器響應時間分解和網頁分析資料將會由 HTTPWACTH 等輔助測試工具獲得。圖 3 是由部分測試資料經過彙總整理後形成的表格。從表格中可以看到同一個頁面請求在不同配置的測試機上的響應時間，如果該機器載入了效能分析工具，還可以通過抓取 HTTPWACTH 分析結果進一步得到響應時間分解。

圖 2. 測試節點配置和測試案例的分佈圖

圖 3. 測試資料彙總表格樣式

小結

利用 Selenium WebDriver 和 Grid2 可以將已有的自動化測試指令碼為效能測試服務，併發、自動地執行測試案例節省了時間和人力，使測試人員能夠將精力集中在資料分析和效能調優上。靈活的配置測試環境，包括網路環境、作業系統和瀏覽器型別，可以在短時間內得出不同情況下目標程式的客戶端效能資料，方便比較和發現問題。