Web 應用程序的自動化測試
如今，大多數的應用軟件被寫爲基於 Web 的應用程序並通過瀏覽器展示給用戶並與之進行交互。不同公司和機構組織都需要測試這些應用程序的有效性。在一個高度交互性和響應的軟件流程時代，許多組織傾向於運用敏捷開發理論，自動化測試也就成了必備一項。所謂自動化測試，就是執行自動測試工具或者用某種程序設計語言編寫程序，控制被測軟件中的各種模塊，模擬手動測試步驟，完成測試。測試自動化有很多優點，比如：頻繁的迴歸測試、快速反饋給開發人員、幾乎無限的重複測試用例的執行、支持敏捷和極端發展的方法、自定義的缺陷報告、不會錯過人工手動測試可能遺漏的缺陷等。目前也有很多商業和開源的軟件，可以輔助進行測試自動化的開發。Selenium 應該是應用最爲廣泛的開源解決方案。
Selenium 概述
Selenium 是一個用於 Web 應用程序測試的工具，Selenium 測試直接自動運行在瀏覽器中，就像真正的用戶在手工操作一樣。支持的瀏覽器包括 IE、Chrome 和 Firefox 等。這個工具的主要功能包括：測試與瀏覽器的兼容性 - 測試您的應用程序看是否能夠很好地工作在不同瀏覽器和操作系統之上；測試系統功能 - 創建迴歸測試檢驗軟件功能和用戶需求；支持自動錄製動作，和自動生成 .NET、Perl、Python、Ruby 和 Java 等不同語言的測試腳本。Selenium 是 ThoughtWorks 專門爲 Web 應用程序編寫的一個驗收測試工具。
Selenium 2.0 與以往版本的區別
Selenium 2.0（又名 Selenium WebDriver）的主要新功能是集成了 WebDriver。WebDriver 曾經是 Selenium 1（又名 Selenium RC）的競爭對手。Selenium RC 在瀏覽器中運行 JavaScript 應用，而 WebDriver 通過原生瀏覽器支持或者瀏覽器擴展直接控制瀏覽器。
從 Selenium 項目簡史中可以瞭解到，Selenium 和 WebDriver 的開發人員都認爲兩個工具各有優勢，二者合併將創造更強大的 Web 測試框架。 Selenium 1 是一款流行和完善的測試框架，支持衆多瀏覽器（因其 JavaScript 實現），允許用戶通過許多編程語言（從 Java/C# 到 PHP、Erlang...），而 WebDriver 則彌補了 Selenium 1 的缺點，跳出了 JavaScript 的沙箱，提供快速、輕量級的瀏覽器模擬器。之所以合併，原因如下：
WebDriver 解決了 Selenium 存在的缺點（比如，繞過 JS 沙箱）；
Selenium 解決了 WebDriver 存在的問題（例如支持廣泛的瀏覽器）;
Selenium 的主要貢獻者們都覺得合併項目是爲用戶提供最優秀框架的最佳途徑。
Selenium 2.0 還包括 Selenium Server，通過 Selenium Grid 支持分佈式測試。新的 Selenium Grid 支持使用原來的 Selenium RC API 和 WebDriver API 測試。Selenium IDE 1.1.0 也將支持 WebDriver API，包括將錄製生成的測試用例導出爲 WebDriver 所支持的各種編程語言（Ruby、Python、C# 和 Java）。
WebDriver 針對各個瀏覽器而開發，取代了 Selenium RC 中嵌入到被測 Web 應用中的 JavaScript，與瀏覽器的緊密集成可以支持創建更高級的測試，且避免了 JavaScript 安全模型導致的限制。除了來自瀏覽器廠商的支持，WebDriver 還利用操作系統級的調用模擬用戶輸入。WebDriver 支持 Firefox (FirefoxDriver)、IE (InternetExplorerDriver)、Opera (OperaDriver) 和 Chrome (ChromeDriver)。它還支持 Android (AndroidDriver) 和 iPhone (IPhoneDriver) 的移動應用測試。此外，還包括一個基於 HtmlUnit 的***面實現，即 HtmlUnitDriver。WebDriver API 可以通過 Python、Ruby、Java 和 C# 訪問，支持開發人員使用他們偏愛的編程語言來創建測試。
Selenium 的安裝配置
Selenium IDE 的安裝
Selenium IDE 是一個 Firefox 插件，是用來開發測試用例的集成開發工具，其簡單易用，能夠高效的開發測試用例，並可轉換成相應的語言腳本。
首先，使用 FireFox，訪問 Selenium HQ 下載頁面來下載 Selenium IDE：
圖 1. Selenium IDE 下載頁面
Firefox 對於一個不信任的插件可能會彈出一個提示，因此需要點擊“允許”按鈕來繼續安裝。當下載完成時，會彈出如下頁面：
圖 2. 安裝 Selenium IDE
點擊安裝按鈕，安裝完成後會提示重啓瀏覽器，完成該操作，Selenium IDE 即安裝完畢。如下圖所示：
圖 3. Selenium IDE
Selenium 開發環境
首先，在如上下載頁面中下載 Selenium WebDriver 運行時可能需要的各種類包：
Selenium Client Drivers – Java
Selenium Internet Explorer Driver Server – Needed when using IE mode
本文的集成開發環境選用 Eclipse Java EE IDE Juno ，具體配置如下所示：
圖 4. Eclipse 開發環境配置
Selenium WebDriver 常用操作
Selenium WebDriver 能夠模擬日常的瀏覽器操作，其中最常用的操作如下：
訪問頁面
與頁面交互
填寫表單
提交頁面內容
檢查頁面元素是否在頁面上
在窗口和 Frame 之間移動
彈出對話框
頁面導航
下面本文將通過一個比較完整的示例分別介紹如上所示常用操作的具體應用。代碼片段如下：
清單 1. WebDriver 常用操作
1.public void setUp() throws Exception {
2. //driver = new HtmlUnitDriver();
3. driver = new FirefoxDriver();
4. baseUrl = "http://www.baidu.com/";
5. driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
6.}
7.
8.@Test
9.public void testDemo() throws Exception {
10. driver.get(baseUrl + "/");
11. driver.findElement(By.id("kw")).clear();
12. driver.findElement(By.id("kw")).sendKeys("百度翻譯");
13. driver.findElement(By.id("su")).click();
14.
15. WebElement element;
16. element = driver.findElement(By.id( "op_tran_text" ));
17. //element = driver.findElement(By.xpath( "//textarea[@id= ’ op_tran_text ’ ]" ));
18. element.clear();
19. element.sendKeys("自動化測試");
20.
21. WebElement select = driver.findElement(By.xpath( "//select" ));
22. List<WebElement> allOptions = select.findElements(By.tagName( "option" ));
23. for (WebElement option : allOptions) {
24. System.out.println(String.format( "Value is: %s" , \
option.getAttribute("value")));
25. if(option.getText().equals("zh2en"))
26. option.click();
27. }
28.
29. driver.findElement(By.xpath("//a[@class='op_tran_btn OP_LOG_BTN']")).click();
30.
31.driver.switchTo().window( "百度在線翻譯" );
32.}清單第 2-3 行定義了所使用的 webdriver 類型，本部分以 HtmlFirefoxDriver 爲例：
WebDriver driver = new HtmlFirefoxDriver();
對於其他類型的 driver，其操作是一樣的，不同 driver 的區別在於模擬何種類型的瀏覽器。
頁面導航
如清單第 10 行所示：
driver.get(baseUrl + "/");
完全裝載頁面後將控制返回給測試腳本。
注意：當頁面又很多 Ajax 調用時，該接口無法確認頁面是否完全裝載，這是需要使用"waits"。
與頁面交互
如清單第 11-12、15-19 行所示。
例如：
<input type= "text" name= "passwd" id= "passwd-id" /> WebElement element; element = driver.findElement(By.id( "passwd-id" )); element = driver.findElement(By.name( "passwd" )); element = driver.findElement(By.xpath( "//input[@id= ’ passwd-id ’ ]" )); //XPATH 返回第一個匹配到的元素，如果沒有匹配到，拋出 NoSuchElementException element.sendKeys( "some text" ); element.sendKeys( " and some" , Keys.ARROW_DOWN); // 按向下箭頭 ; 任何頁面元素都可以調用 sendKeys， //例如可以測試一些快捷方式鍵，鍵盤的每次輸入都是附加在文本串的後面； element.clear(); // 清除文本域內容
填寫表單
如清單 21-27 行所示。
處理 SELECT 標籤
WebElement select = driver.findElement(By.xpath( "//select" )); List<WebElement> allOptions = select.findElements(By.tagName("option" )); for(WebElement option : allOptions) { System.out.println(String.format( "Value is: %s" , option.getValue())); option.setSelected(); }使用 Select 類處理 SELECT 標籤
Select select = new Select(driver.findElement(By.xpath( "//select" ))); select.deselectAll(); select.selectByVisibleText("Edam");
提交
如清單第 13、29 行所示。
driver.findElement(By.id( "submit" )).click(); element.submit();// 要求 element 必須在表單中，否則拋出 NoSuchElementException
檢查元素是否在頁面上
檢查元素是否在頁面上是最常用的操作之一，具體用法如下：
WebElement plain = driver.findElement(By.name( "q" )); RenderedWebElement element = (RenderedWebElement) element;// 例如 HtmlUnit Driver 就無法顯示出內容
對元素拖拉：
RenderedWebElement element = (RenderedWebElement) driver.findElement(\ By.name( "source" )); RenderedWebElement target = (RenderedWebElement) driver.findElement(\ By.name( "target" )); element.dragAndDropOn(target);
在窗口和 frame 之間移動
如清單第 31 行所示
在命名的窗口之間移動
driver.switchTo().window( "windowName" ); // 可以通過 js 或者打開窗口的鏈接獲取窗口名稱
通過窗口句柄切換
for (String handle : driver.getWindowHandles()) { driver.switchTo().window(handle); }frame 之間切換或者切換到 iframe
driver.switchTo().frame( "frameName" ); 通過索引訪問 subframe： driver.switchTo().frame( "frameName.0.child" );//frameName 的第一個 subframe //的明價 child 的 frame
彈出對話框
窗口彈出後，可以使用如下語句訪問到彈出窗口：
Alert alert = driver.switchTo().alert();
獲取到 alert 窗口後，可進行各種操作。
頁面導航
navigate().to() 和 get() 功能完全一樣。
driver.navigate().to( "http://www.example.com" );
瀏覽器的前進和後退 :
driver.navigate().forward(); driver.navigate().back();
注意這兩個方法取決於瀏覽器的實現，可以會出現某些調用失敗。
結合 Selenium IDE，用實例展示自動化測試的構建
本部分將結合實際案例來展示自動化測試的構建。
Selenium IDE 使用和腳本轉換
打開 FireFox 瀏覽器，如上圖 3 所示，打開 Selenium IDE 窗口：
圖 5. Selenium IDE 窗口
下面開始錄製第一個基於瀏覽器的自動化腳本：
點擊 File 菜單，彈出下拉列表，選擇 New Test Case，此時左中部 Test Case 窗口會增加一個 Untitle 2 的測試案例，右鍵點擊'Property'，在彈出窗口中重命名爲”TestDemo”
點擊 IDE 的右上部錄製按鈕（小紅點）開始手動錄製，在 FireFox 中打開新的 tab 頁，輸入測試網址 www.baidu.com，在檢索框中輸入要查詢的內容“Selenium”，點擊“百度一下”按鈕；
在結果頁，第一條結果就是 Selenium 的官方網站，點擊鏈接進入；
待進入 Selenium 官方網站之後，切換到 Selenium IDE 窗口，點擊錄製按鈕（小紅點），結束本次手動錄製；此時 Selenium IDE 窗口如下圖 6 所示；
點擊 File 菜單，選擇“Save Test Case”，填寫文件名稱“TestDemo”，手動錄製的腳本會存爲本地 HTML 格式文件，此文件可以在其他 Selenium IDE 中導入使用；
有了以上錄製的腳本，可以在 Selenium 中回放，選擇 TestDemo 腳本，點擊中上部的“Play current test case”按鈕（第二個綠色三角按鈕），此時，瀏覽器會按照錄制的順序自動操作執行。由此可見，Selenium IDE 在 Web 應用測試中，可以代替人的大量手工操作。
圖 6. 腳本錄製
紅色方框所圈定的部分即爲 Selenium 的操作記錄，此處也可以手動添加、刪除、更改命令。
有了手動錄製的腳本，可以轉換成多種語言的程序腳本：
在 selenium IDE 中，選中一個 Test Case，點擊 File 菜單，下拉列表中選擇“Export Test Case As”-“Java / Junit 4 / WebDriver”;
在彈出的保存窗口中，輸入類名稱 TestDemo，保存；TestDemo.java 文件生成。對於生成的 java 自動化測試腳本，有些可能不能成功執行，需要手動稍微調整。
編寫第一個 Selenium 自動化測試腳本
打開上述所配置的 Eclipse 開發環境，新建一個 Java 工程，將上述轉換而成的 TestDemo.java 文件導入到該工程中，去除冗餘的“Organize Import(Ctrl + Shift + O) ”。如圖 7 所示：
圖 7. 集成開發環境中的代碼
代碼第 21 行可見，自動導出的代碼默認採用 FireFox 瀏覽器。執行此代碼，Selenium 會自動觸發開啓 FireFox 瀏覽器，打開一個新的頁面，進入百度首頁，在檢索框中自動輸入“Selenium”關鍵字，自動點擊“百度一下”按鈕，進入搜索結果頁面，定位到第一條檢索結果，然後點擊進入 Selenium 官網，自動關閉瀏覽器，此時 Eclipse 開發環境，JUnit 結果頁面顯示出來，如圖 8 所示：
圖 8. 自動化運行結果
不同版本的 WebDriver 實現跨瀏覽器測試
實現跨瀏覽器測試，關鍵在於中選擇哪種 WebDriver。
對於 IE 和 Chrome 瀏覽器
在此以 IE 瀏覽器爲例，更新圖 7 所示代碼第 21 行爲 driver = new InternetExplorerDriver();
運行更新後的自動化腳本，selenium 自動啓動 IE 瀏覽器進行自動化測試。如圖 9 所示：
圖 9. IE 瀏覽器自動化測試
對於模擬瀏覽器
Selenium 中提供了 Java 實現的虛擬瀏覽器，選用此驅動，程序會模擬瀏覽器的行爲進行測試，測試過程中並無實際瀏覽器被調用。
更新 driver = new HtmlUnitDriver(); 運行該腳本，所有瀏覽器行爲在後臺模擬運行。
結束語
綜上所述，本文由淺入深，由 Selenium WebDriver 的基本概念着手，詳細闡述其與以往版本的不同之處，並結合實際案例，展示了 Selenium 實現 Web 應用自動化測試的過程。用戶按照本文介紹的步驟和方法，即可構件出第一個自動化測試案例。隨着學習的深入，相信基於 Selenium WebDriver 的自動化測試應用到實際項目中，一定能夠極大提高工作效率。