網頁應用程式測試工具Selenium IDE介紹

7月 04, 2011 Programming/SeleniumIDE , Selenium , Software/Firefox 3 Comments Edit Copy Download

最近在學習程式開發的時候，發現許多人都推崇Selenium使用者端網頁應用程式測試工具。於是我試著使用Selenium來建立最近撰寫的圖片延緩載入與無限捲動功能，並學習如何使用Selenium IDE來撰寫測試案例。

Selenium簡介

網頁應用程式開發中，使用者介面的功能測試一向是相當困難的工程。以手動操作進行測試會受限於人力、時間，不僅容易出錯，也難以達到自動化迴歸測試的目標。

Selenium是用來解決上述測試問題的方案。它可以在Firefox中輕易地建立測試案例（Test Case），測試案例中一條一條的指令將會像自動機器人一樣確實地執行，並且記錄一切測試的過程與錯誤。然後測試案例可以用多種程式語言（Java、PHP、Ruby）模擬不同的瀏覽器（Firefox、IE、Safari）在不同的作業系統下（Windows、OS X、Linux）的運作情況，並將Selenium的功能測試整合到你的專案中，成為完整的整合測試。

下圖將說明Selenium專案如何運作，圖片來自於How Selenium Works網頁。

Selenium IDE

Selenium的功能眾多，在此篇要講的是Selenium IDE，也就是Firefox以擴充套件（add-on）方式安裝、用於撰寫Selenium測試案例的工具。光是Selenium IDE，就足以寫網站自動執行機器人了。詳細的用法可以閱讀官方的Selenium IDE介紹。Gossip也有寫過Selenium Web測試工具的介紹。稍後幾篇建立測試案例的過程中，我也會一一帶過Selenium IDE的常用功能。

安裝

Selenium IDE可以直接從他的網站連結上安裝（SkyDrive備份：1.0.12），Firefox add-ons搜尋會找到很多其他輔助的功能。

快速建立測試案例

Selenium IDE製作的這段影片簡單易懂地告訴了我們要怎麼建立測試案例。真的，幾乎就跟你在Word裡面建立巨集一樣地簡單。它做了幾件事情：

1. 開啟Selenium IDE
2. 開啟Selenium IDE中的錄製功能
3. 在Google搜尋selenium wikipedia
4. 進入Selenium維基頁面中
5. 確認文字「popular」的存在
6. 停止錄製，然後重播整個錄製過程

這個方法可以讓你很簡單地建立一個測試案例，然後再來微調測試案例的指令。

Selenium指令

Selenium最重要的核心功能就是指令了，所有測試都是以一條一條的指令所組成。Selenium的指令簡稱為「Selenese」。以下是摘錄Selenium 0.8 Reference的主要概述內容：

Selenium的指令（command）是告訴Selenium要做些什麼事情。Selenium的指令有三種類型：操作（Actions）、存取（Accessors）與驗證（Assertions）。每一個指令都會是以下表單中測試表格中的一行：

操作（Actions）

操作（Actions）是用來操作應用程式（指瀏覽器及網頁）的指令。它會執行像是「點選這個連結」、「選擇那個選項」的動作。如果操作失敗（Action fails）、或是發生了錯誤，將會導致現在的測試中止。

許多操作會伴隨著「AndWait」的後綴詞，例如「clickAndWait」。這個後綴詞是告訴Selenium這個操作將會導致瀏覽器去呼叫遠端的伺服器，而Selenium應該要等待新的頁面讀取之後再進行後續的檢查。

存取（Accessors）

存取（Accessors）是檢查應用程式的狀態，並將結果儲存在變數中，例如「storeTitle」（儲存網頁標題到變數中）。它們也用來自動產生驗證（Assertions）。

驗證（Assertions）

驗證（Assertions）就像是存取（Accessors），但它們是用來確認應用程式的狀態是否符合預期的結果。這些例子包括「確定網頁標題是否是X」（X將會寫在驗證指令中）、「確認這個核取表單（checkbox）是呈現勾選狀態」。

Selenium中所有的驗證都有三種模式：「驗證（assert）」、「辨識（verify）」以及「等待（waitFor）」。例如，同樣是驗證網頁中是否有某段文字存在，你可以執行「assertText」、「verifyText」以及「waitForText」。

前兩者之間的差別在於處理錯誤的方式。當「驗證」發生錯誤時，測試將會終止。當「辨識」發生錯誤時，測試將會繼續執行，並在記錄中保留錯誤訊息。你可以用「驗證」來確保應用程式是在正確的網頁中，如果不在正確網頁，那麼就不執行後續的測試。而「辨識」的驗證指令則可以用於測試表單的欄位值、標題文字等細節是否正確。

「等待（waitFor）」指令將會等待某些情況發生時才生效，這對AJAX應用來說特別好用，例如頁面等待著從伺服器回傳的資料時。當指定情況發生時，等待指令會馬上變成成功的狀態。反之，當情況一直沒有發生時，而等待時間又超過了逾時（timeout）設定，等待指令就會失敗，並終止後續的測試。

元素定位器（Element Locators）

元素定位器（Element Locators）是用來告訴Selenium哪些HTML元素將會用於指令中。許多指令都需要元素定位器作為「目標（target）」屬性。常見的元素定位器包括「elementId」（元素的ID屬性）、「document.forms[0].element」（文件中、第1個表單底下的元素）。

Selenium支援多種定位器寫法：

• identifier=id
  選擇帶有特定@id屬性的元素。如果@id沒有找到元素，則會改以選擇@name中符合 id 的值。指令需要元素定位器為參數時，大多都是以此作為預設值。
• name=name
  選擇帶有特定@name屬性的元素。
• dom=javascriptExpression
  以JavaScript的方式選擇DOM，開頭必定是「document.」。例如「dom=document.images[56]」。
• xpath=xpathExpression
  以XPath表示式來定位元素。
• link=textPattern
  選擇包含指定文字比對模式（text patterns）的連結（link）或錨點（anchor）元素，也就是<a>。
• css=cssSelectorSyntax
  以CSS選擇器來選擇元素，請參考CSS2選擇器、CSS3選擇器的說明。這應該是網頁工程師最容易使用的定位器吧。

  比對模式（Patterns）

  比對模式（Patterns）有許多用途，例如，檢查輸入欄位或是選項中是否有預期的字串出現。Selenium支援多種比對模式，包含正規表示式（regular expressions）。

小結

其實我本來是打算做個Selenium的簡介，然後主要是介紹以Selenium IDE建置測試案例的過程。不過光是簡介好像就足以成為一篇文章了，而Selenium令人值得一提的功能還多著呢。

接下來兩篇文章都是介紹以Selenium IDE建置測試案例的過程，希望能以Step by Step的方式，簡單易懂地說明如何建置。讓人光看就知道怎麼建置測試案例。

這兩篇文章是：

• 以Selenium IDE建立測試案例：圖片延緩載入
• 以Selenium IDE建立測試案例：無限捲頁

請多多指教。