:::

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

 image

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


Selenium簡介

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

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

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

how-it-works(chi)2

Selenium IDE

image

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)。每一個指令都會是以下表單中測試表格中的一行:

指令(command) 目標(target) 參數值(value)
操作(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的方式,簡單易懂地說明如何建置。讓人光看就知道怎麼建置測試案例。

這兩篇文章是:

請多多指教。

總共1 則留言, (我要發問)

  1. 有網友在詢問Selenium IDE要怎麼錄製網頁內有同樣ID的情況

    基本上...網頁出現第二個相同ID的時候,你的網頁就是一個錯誤網頁了
    https://www.w3schools.com/tags/att_global_id.asp
    The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

    所以我想這位網友問的不是ID,是class
    https://www.w3schools.com/tags/att_class.asp

    Selenium IDE可以用很多種元素定位器來找到指定元素
    如果是class的話,這時候就能夠用css=cssSelectorSyntax了
    cssSelector也是jQuery的主要工具,很值得學習

    關於cssSelector,可以看下面的規格書
    https://www.w3.org/TR/2001/CR-css3-selectors-20011113/

    Selenium IDE的自動錄製很多時候無法正常運作
    請手動修改元素選擇器吧

    回覆刪除

留言工具: