轉載 基於Selenium WebDriver的Web應用自動化測試

轉載原地址：  https://www.ibm.com/developerworks/cn/web/1306_chenlei_webdriver/

對於 Web 應用，軟件測試人員在平常的測試工做中，須要大量的手動操做來驗證某些功能。開發人員在開發過程當中，須要訪問其應用而且驗證其功能是否正常運行，反覆調試重複驗證。系統維護人員也須要常常訪問其應用，以確保系統的正常運行。如上所述的這些操做須要花費大量的時間和人力，如能引入自動化測試代替人工重複操做，將極大地提升團隊的生產效率。在本文中，咱們將介紹如何使用 Selenium 2.0 即 Selenium WebDriver 來構件自動化測試。

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 server 2.25
• Selenium Client Drivers – Java
• Selenium Internet Explorer Driver Server – Needed when using IE mode
• Selenium Chrome driver

本文的集成開發環境選用 Eclipse Java EE IDE Juno ，具體配置以下所示：

圖 4. Eclipse 開發環境配置

須要添加 Junit 4 library、Selenium java driver（Selenium-java-2.25.0.jar）、Selenium server（Selenium-server-2.25.0.jar）、其他 jar 包爲 Selenium java driver 的依賴類，位於 Selenium java driver zip 包中的 lib 文件夾中。

至此，Web 應用程序的自動化測試開發環境配置完畢。

Selenium WebDriver 經常使用操做

Selenium WebDriver 可以模擬平常的瀏覽器操做，其中最經常使用的操做以下：

1. 訪問頁面
2. 與頁面交互
3. 填寫表單
4. 提交頁面內容
5. 檢查頁面元素是否在頁面上
6. 在窗口和 Frame 之間移動
7. 彈出對話框
8. 頁面導航

下面本文將經過一個比較完整的示例分別介紹如上所示經常使用操做的具體應用。代碼片斷以下：

清單 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-十二、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");

提交

如清單第 1三、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 窗口

下面開始錄製第一個基於瀏覽器的自動化腳本：

1. 點擊 File 菜單，彈出下拉列表，選擇 New Test Case，此時左中部 Test Case 窗口會增長一個 Untitle 2 的測試案例，右鍵點擊'Property'，在彈出窗口中重命名爲」TestDemo」
2. 點擊 IDE 的右上部錄製按鈕（小紅點）開始手動錄製，在 FireFox 中打開新的 tab 頁，輸入測試網址 www.baidu.com，在檢索框中輸入要查詢的內容「Selenium」，點擊「百度一下」按鈕；
3. 在結果頁，第一條結果就是 Selenium 的官方網站，點擊連接進入；
4. 待進入 Selenium 官方網站以後，切換到 Selenium IDE 窗口，點擊錄製按鈕（小紅點），結束本次手動錄製；此時 Selenium IDE 窗口以下圖 6 所示；
5. 點擊 File 菜單，選擇「Save Test Case」，填寫文件名稱「TestDemo」，手動錄製的腳本會存爲本地 HTML 格式文件，此文件能夠在其餘 Selenium IDE 中導入使用；

有了以上錄製的腳本，能夠在 Selenium 中回放，選擇 TestDemo 腳本，點擊中上部的「Play current test case」按鈕（第二個綠色三角按鈕），此時，瀏覽器會按照錄制的順序自動操做執行。因而可知，Selenium IDE 在 Web 應用測試中，能夠代替人的大量手工操做。

圖 6. 腳本錄製

紅色方框所圈定的部分即爲 Selenium 的操做記錄，此處也能夠手動添加、刪除、更改命令。

有了手動錄製的腳本，能夠轉換成多種語言的程序腳本：

1. 在 selenium IDE 中，選中一個 Test Case，點擊 File 菜單，下拉列表中選擇「Export Test Case As」-「Java / Junit 4 / WebDriver」;
2. 在彈出的保存窗口中，輸入類名稱 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 的自動化測試應用到實際項目中，必定可以極大提升工做效率。