:::
顯示具有 Programming/SeleniumIDE 標籤的文章。 顯示所有文章

網頁應用測試工具:Selenium IDE / Testing Tool for Webpage: Selenium IDE

網頁應用測試工具:Selenium IDE / Testing Tool for Webpage: Selenium IDE

image

Selenium IDE是一個網頁應用測試工具,可以應用在許多網頁程式設計上。我製作了一份投影片簡單地介紹了Selenium IDE的主要功能,進一步的詳細操作則可以參考我以前介紹Selenium IDE的文章來使用。

Selenium IDE is a testing tool for webpage. I made a slide to introduce the features of Selenium IDE. For more details, you can read my other articles about Selenium IDE.


為什麼要用Selenium IDE? / Why sholud you use Selenium IDE

image

不論背後是用什麼程式語言來開發,最後成品大多都會是瀏覽器可以運作的網頁。因此只要最後網頁上運作結果正確,那麼大致上整體系統就能維持一定品質。

Selenium IDE他就像是操作瀏覽器的機器人一樣,你可以撰寫機器人執行的腳本,讓機器人自動去測試。當腳本無法順利執行時,則回報錯誤訊息給你。Selenium IDE省下很多我們手動用滑鼠去點選、操作的瑣碎時間,可以讓我們更專心於開發本務上。

用Selenium IDE取代功能測試員 / Replace Human Testers By Selenium IDE

image

我以前做過資料庫功能測試員。功能測試會附帶著一張測試目標的表格,表格內每一列都是要測試的項目。測試員依照測試項目的指示一一操作、確認,沒問題之後再到表格上勾選確認無誤。

事後我常常在想,為什麼這種機械化的動作,還要聘用一個活生生的人來做呢?後來我在Selenium IDE身上,找到了取代功能測試員的方案。

Selenium IDE介紹 / Introduce of Selenium IDE

檔案:Google雲端平台Box.netSkyDrive

這份投影片介紹了以下內容:

  • 軟體測試的重要性:我想要強調程式開發與測試應該是要齊頭併行的,並不是開發完成之後再來測試。
  • Selenium IDE介紹:介紹Selenium系列家族的主要功能,以及Selenium IDE的安裝與開啟。
  • Selenium IDE的指令:介紹操作型(Actions)、存取型(Accessors)、驗證型(Assertions)三種類別的指令
  • 快速錄製功能:使用Selenium IDE製作測試案例的第一步,並介紹錄製完成之後如何進一步修改測試案例。

這份投影片只有概述Selenium IDE的功能,如果要詳細操作,可以看我之前的文章:

我也寫了兩份測試案例的例子可供參考:


結語:開發與測試並進 / Conclusion: Development And Testing Are Both Important

image

我們在做軟體開發的時候,通常會有一個目標。而這個目標有兩種:一個是想要做、但還沒做的功能;另一個是本來的功能無法如預期般地運作。不管是哪一種,他都可以用「測試案例」(test case)的形式來表現。只要測試案例能夠順利通過,那麼我們就完成了程式開發的目標了──這就是測試驅動開發(Test-Driven Development, TDD)的基本概念。

狂熱的TDD教義派開發者會在系統開發不同階段使用單元測試(unit test)整合測試(integration testing)功能測試(functional testing)回歸測試(regression testing)持續整合(continuous integration)等策略維護軟體品質。但是這對我們這種小型團隊來說,學習、製作、維護測試案例是相當高成本的工作。

因此我建議是只採用Selenium IDE製作功能測試,確保系統的主要功能能夠順利運作。發生錯誤時,Selenium IDE可能無法像是單元測試或整合測試回報詳細錯誤內容,但是能夠提醒程式開發人員注意到「有錯誤」這件事情,那就幫得上許多忙了。

Selenium IDE快速錄製測試案例的功能真的很好用,我希望能把這方法引入開發團隊中,進一步地提高大家的開發品質。再加油吧。

(more...)

以Selenium IDE建立測試案例:無限捲頁

以Selenium IDE建立測試案例:無限捲頁

 image

無限捲頁是我近日在「布丁布丁吃什麼?」新增的功能。當使用者瀏覽到網頁末端時,他不需要點選「較舊的文章」連結換下一頁,無限捲頁功能就會自動載入下一頁的內容。

現在我要撰寫一個測試案例(Test Case),檢查無限捲頁功能是否能夠正確地運作。


測試目的

  1. 將瀏覽範圍移到畫面尾端,觸發無限捲動功能,然後確定文章數量有比之前更多。

測試指令大綱

無限捲頁測試指令編號清單

功能 測試指令編號
B. 無限捲頁功能  

1. 讀取網頁

B1-1 B1-2 B1-3

2. 觸發無限捲頁

B2-1 B2-2 B2-3

無限捲頁測試指令清單

測試指令編號及測試目的 初始狀態 操作 預期輸出資料或結果
B1-1
開啟首頁
使用者在瀏覽器中開啟首頁網址 瀏覽器開啟首頁網址 首頁正確載入,JavaScript皆有正確初始化
B1-2
確認讀取前文章數量
接B1-1 計算css:.post-outer的個數,存入變數postOuterBefore 變數值低於5
B1-3
顯示讀取前文章數量
接B1-2 在記錄中顯示postOuterBefore的值 變數值低於5
B2-1
捲動頁面到最下方,觸發無限捲頁功能
接B1-3 網頁捲軸往下移動到畫面末端 觸發無限捲頁功能
B2-2
確認無限捲頁功能開始讀取
接B2-1 確認無限捲頁讀取訊息顯示 無限捲頁正常顯示讀取訊息
B2-3
確認無限捲頁功能正常讀取完畢
接B2-2 等待無限捲頁讀取訊息隱藏 讀取訊息隱藏,下一頁文章已經載入
B3-1
確認讀取後文章數量
接B2-3 計算css:.post-outer的個數,存入變數postOuterAfter 變數值低於10
B3-2
顯示讀取後文章數量
接B3-1 在記錄中顯示postOuterAfter的值 變數值低於10
B3-3
確認讀取後文章數量大於讀取前文章數量
接B3-2 確認postOuterAfter大於postOuterBefore true


建立測試指令

這次的測試指令需要用到Selenium的元素計算與變數儲存,也不是單純用錄製(Record)功能就能完成。

詳細的指令內容,請參考Selenium的指令說明。在前一篇「以Selenium IDE建立測試案例:圖片延緩載入」中介紹過的指令,這邊就只會簡略敘述而已。

設定等待時間
  • Commend: setTimeout
  • Target: 60000
  • Value:

由於「布丁布丁吃什麼?」的首頁開啟速度非常慢。為了避免open指令在開啟網頁的過程中因為讀取太久而發生錯誤,所以測試案例正式開始之前,先將逾時限制時間設定為60秒。

B1-1 開啟首頁

接著使用open指令開啟「布丁布丁吃什麼?」的首頁。開啟之後的網頁畫面如下:

image 

B1-2 確認讀取前文章數量

待首頁開啟完畢之後,接下來就是要計算進行無限捲動讀取前的文章數量。Blogger版面中,文章會放在class為post-outer的元素中。而在這個指令中,我想要把讀取前的文章數量存放入postOuterBefore變數中。

既要計算元素的數量,也要存入變數,就要使用Selenium的storeXpathCount指令:

  • Command: storeXpathCount
  • Target: //*[@class="post-outer"]
  • Value: postOuterBefore
    storeXpathCount(xpath, variableName)

參數:

  • xpath - XPath表示式。不需要用XPath的count()函式,Selenium會自動產生。

回傳:

指定XPath符合的元素數量。

這似乎是目前為止第一次用到Value欄位的指令。storeXpathCount會需要兩個參數:第一個參數是XPath表示式,寫在Target欄位中;第二個參數是變數名稱,寫在Value欄位中。

值得一提的是,第一個參數只能用XPath表示式,而不能用平常習慣的CSS選擇器。不過XPath倒也沒這麼難學,我比較一下這兩者的差別。

  • CSS選擇器:css=.post-outer
  • XPath表示式:xpath=//*[@class=”post-outer”]

相信聰明的你應該能夠輕易地從CSS選擇器轉換到XPath表示式吧。

storeXpathCount指令不會發生任何錯誤,執行完畢之後就會直接執行下一個指令。

B1-3 顯示讀取前文章數量
  • Command: echo
  • Target: postOuterBefore的數量:${postOuterBefore}篇文章
  • Value:

為了確認storeXpathCount計算時讀取前文章的數量到底正不正確,在此以echo指令來輸出postOuterBefore變數。你可以注意到postOuterBefore變數在Selenium的指令中是以「${變數名稱}」的方式使用。你也可以在JavaScript中讀取Selenium的變數,用法是「storedVars[ “變數名稱]” ] 」,這在下面指令中也會用到。

echo會在Log欄位中顯示訊息,預期的訊息將會是:

[info] echo: postOuterBefore的數量:7篇文章

由於首頁的文章數量可能會變動,所以數值也會隨之改變。在此只要先記錄讀取前的文章數量即可,以方便進行比較。

B2-1 捲動頁面到最下方
  • Command: runScript
  • Target: window.scrollTo(0, $("#footer-wrapper").offset().top);
  • Value:

接下來執行一段JavaScript程式,讓頁面捲動到頁尾的位置。$(“#footer-wrapper”)是Blogger的頁尾區塊,如下圖:

image

B2-2 確認無限捲頁功能開始讀取

如果無限捲頁有正常執行,那麼此時應該會顯示讀取中的訊息,並有一個小型的動畫圖片,如下圖:

17510352447 首頁圖

這個讀取中的訊息會包含在id為infscr-loading的元素中,所以在此要先等待這個元素顯示,使用waitForVisible指令。

  • Command: waitForVisible
  • Target: css=#infscr-loading
  • Value
    waitForVisible(locator)

    參數:

  • locator - 元素定位器

    回傳

    如果該元素呈現可見狀態(visible),則回傳true;否則回傳false。

這邊使用了waitForVisible,而不是用waitForElementPresent,這兩者的差別在於前者特別指定該元素的狀態是「可見的」,而後者只要該元素存在這頁面中,不管是顯示或隱藏,都會回傳true。

在這邊我們要確定讀取訊息的顯示,所以是用waitForVisible,而不是用waitForElementPresent。

B2-3 確認無限捲頁功能正常讀取完畢

當無限捲頁順利讀取完之後,讀取訊息會隱藏起來。在此用waitForNotVisible來確認無限捲頁讀取訊息是否有正確地隱藏。

  • Command: waitForNotVisible
  • Target: css=#infscr-loading
  • Value:

waitForNotVisible剛好跟waitForVisible相反。當無限捲頁順利讀取完成之後,這個指令就會回傳true,然後進入下一個指令。

B3-1 確認讀取後文章數量

經過無限捲頁讀取下一頁的文章之後,在此再用storeXpathCount來記錄讀取後文章的數量,並存到變數postOuterAfter中。

  • Command: storeXpathCount
  • Target: //*[@class="post-outer"]
  • Value: postOuterAfter
B3-2 顯示讀取後文章數量

跟之前顯示讀取前文章數量一樣地,現在也用echo顯示一下postOuterAfter的結果吧。

  • Command: echo
  • Target: postOuterAfter的數量:${postOuterAfter}篇文章
  • Value:
B3-3 確認讀取後文章數量大於讀取前文章數量

如果無限捲動真的讀取了下一頁的文章,那麼變數postOuterAfter應該要大於變數postOuterBefore才對。在Selenium的指令中,可以利用JavaScript語法來撰寫表示式,並用assertExpression指令來檢查該表示式的結果是否符合預期:

  • Command: assertExpression
  • Target: javascript{storedVars['postOuterAfter'] > storedVars['postOuterBefore']}
  • Value: true
assertExpression(expression, pattern)

參數:

  • expression - 一段表示式,它將會回傳一個值。
  • pattern - 預期比對的值

回傳:

expression符合pattern,則回傳true;否則回傳false。

assertExpression特別適合用來檢查JavaScript執行結果是否正確,不過在此我是用JavaScript來檢查Selenium的變數值。如果要用JavaScript表示式,那麼語法將會是「javascript{程式}」。在JavaScript中取得Selenium變數的方法則是使用「storedVars[“變數名稱"]」。

在assertExpression中的expression參數不使用JavaScript表示式的話,expression通常會被視為字串來處理,而pattern也就是字串比對的模式了。

如果無限捲頁有順利運作,postOuterAfter應該要大於postOuterBefore,而測試也會順利通過。

測試案例結束訊息

在測試案例結束時加上一個訊息,表示測試已經結束。

    • Commend: echo
    • Target: 無限捲頁測試完成
    • Value:
幫測試案例加上註解

image

最後在測試案例中寫些註解,讓人更容易理解測試的內容與目的。這樣子無限捲頁測試案例就大功告成了。


測試運作結果

image

在Selenium IDE中按下「Play current test case」按鈕,就能夠執行目前選擇的測試案例,用以檢查剛剛建立的各種測試指令是否有如預期地運作。

檔案下載
運作影片

結語

總算是寫完了。其實我還想要繼續研究一下Selenium Remote Control伺服器的架設,不過似乎沒有這麼多時間來摸索。所以這次就先學著寫測試案例,以後有機會再繼續研究吧。

(more...)

以Selenium IDE建立測試案例:圖片延緩載入

以Selenium IDE建立測試案例:圖片延緩載入

image

圖片延緩載入是我近日在「布丁布丁吃什麼?」新增的功能。在使用者開啟網頁時,此功能會停止載入瀏覽範圍外的圖片,當瀏覽範圍移至該圖片時,該圖片才正式進行載入動作。

現在我要撰寫一個測試案例(Test Case),檢查圖片延緩載入功能是否能夠正確地運作。


測試目的

  1. 確定瀏覽範圍外的某張圖片沒有載入。
  2. 將某張沒有載入的圖片移至瀏覽範圍內,確定圖片有正確載入。

測試步驟大綱

圖片延緩載入測試指令編號清單

功能 測試指令編號
A. 圖片延緩載入功能  

1. 讀取網頁與初始化

A1-1 A1-2

2. 確認瀏覽範圍外圖片沒有載入

A2-1

3. 移動瀏覽範圍到該圖片,確認圖片載入

A3-1 A3-2

圖片延緩載入測試指令清單

測試指令編號及測試目的 初始狀態 操作 預期輸出資料或結果
A1-1
開啟指定頁面
使用者在瀏覽器中開啟指定頁面網址 瀏覽器開啟指定頁面網址 指定頁面正確載入,JavaScript皆有正確初始化
A1-2
等待圖片延緩載入初始化
接A1-1 確認瀏覽範圍外的圖片出現original屬性 瀏覽範圍外的圖片出現original屬性
A2-1
確認瀏覽範圍外的圖片沒有載入
接A1-2 確認瀏覽範圍外的圖片的src屬性不是圖片正確的網址。(實際上只是佔位圖片) 瀏覽範圍外的圖片的src屬性不是正確的圖片網址
A3-1
觸發圖片延緩載入功能
接A2-1 網頁捲軸往下移動到範圍外的圖片位置 觸發圖片延緩載入功能
A3-2
確認圖片正常載入
接A3-1 等待圖片載入正確的圖片網址 圖片正確的網址順利載入


建立測試指令

由於這個功能並不是像Selenium IDE介紹影片中只是單純的網頁點擊,所以在此並不使用Selenium IDE的錄製(Record)功能,而是純手工建立一條一條的測試指令。

詳細的指令內容,請參考Selenium的指令說明。以下我僅以會使用到的部分來進行說明。

設定等待時間
  • Commend: setTimeout
  • Target: 60000
  • Value:

    下文中每條測試指令都會以上述的方式來呈現。Commend、Target、Value分別對應到Selenium IDE中的三個欄位,見下圖:

    image

    通常Target會作為指令第一個參數輸入,而Value會作為指令第二個參數來輸入。Target不一定每次都是元素定位器,要視指令需要的參數而定。

    Selenium IDE會在下方Reference裡說明指令的用途。在此我也會簡單說明初次使用的指令用法。

setTimeout(timeout)

參數:

timeout - 逾時限制時間,單位是毫秒。超過逾時限制時間的話,該指令會發生錯誤。

使用「open」(開啟網頁)與「waitFor」開頭的指令時,都會用到逾時限制時間的設定。當該指令超過逾時限制時間,則該指令會發生錯誤。預設的逾時限制時間是30秒。舉例來說,使用「open」指令開啟網頁時,當網頁開啟超過30秒仍未完成,則「open」指令會發生錯誤。

由於「布丁布丁吃什麼?」開啟網頁的速度挺沒效率的,很容易就超過預設的30秒。在整個測試正式開始之前,我先用setTimeout將逾時限制時間設定為60秒。由於setTimeout參數的單位是毫秒,60秒 x 1000 = 60000毫秒,所以輸入的參數是60000。

然後接下來就是正式開始測試了!

A1-1:開啟指定頁面
open(url)

參數:

  • url - 要開啟的網址,可以是絕對網址或相對網址(相對網址是相對於Base URL的設定)。

使用open指令就能開啟指定頁面,用法簡單易懂。開啟之後的網頁如下:

image

等待網頁開啟完成之後,就會進入下一個指令。

A1-2:等待圖片延緩載入初始化

由於我在Blog中用了一些AJAX技巧,讀完網頁之後,還需要一段時間才會載入其他的功能,所以我需要知道圖片延緩載入初始化完成的時間。

圖片延緩載入的初始化特徵是會在圖片<img>標籤加上original屬性,用於記錄原本圖片的src網址。因此我們可以藉由偵測此屬性出現的時間,得知圖片延緩載入初始化完成。

同樣的,因為這是需要等待的測試指令,在此我使用waitForElementPresent:

    • Commend: waitForElementPresent
    • Target: css=img[title="2011-06-25_233326 設計 網頁元素"][original="http://lh4.ggpht.com/-a6cwLWbFve8/Tgg8J05sfPI/AAAAAAAAIYE/lU7sCSU6L0o/Image.png"]
    • Value:
waitForElementPresent(locator)

參數:

  • locator - 元素定位器

回傳:

如果元素定位器存在,則會傳true;否則回傳false。

再複習一下元素定位器的用法

  • identify=id
  • id=id
  • name=name
  • dom=javascriptExpression
  • xpath=xpathExpression
  • link=textPattern
  • css=cssSelectorSyntax

在這個例子中,我想要找的是瀏覽畫面以外的一張圖片,他帶有title屬性、值為「2011-06-25_233326 設計 網頁元素」。看它是否有original元素出現。正確的圖片如下:

我參考CSS3選擇器的語法,制定元素選擇器的內容:

css=img[title="2011-06-25_233326 設計 網頁元素"][original=http://lh4.ggpht.com/-a6cwLWbFve8/Tgg8J05sfPI/AAAAAAAAIYE/lU7sCSU6L0o/Image.png]

image

你可以用Selenium IDE的Target旁邊的Find按鈕來確認元素定位器是否正確。Find按鈕會找尋頁面中你定位的元素,並讓捲軸跳到該處。如果找不到或是語法錯誤,則會顯示錯誤訊息。

等待orginal屬性出現之後,測試就會進入下一個指令。

A2-1:確認瀏覽範圍外的圖片沒有載入

知道圖片延緩載入功能初始化成功之後,接下來我們要確認瀏覽範圍外的圖片並沒有src屬性中載入正確的網址。

  • Commend: assertElementNotPresent
  • Target: css=img[title="2011-06-25_233326 設計 網頁元素"][src="http://lh4.ggpht.com/-a6cwLWbFve8/Tgg8J05sfPI/AAAAAAAAIYE/lU7sCSU6L0o/Image.png"]
  • Value:
assertElementNotPresent(locator)

參數

  • locator - 元素定位器

回傳

如果元素定位器並不存在,則回傳true;如果存在,則回傳false。

注意到這邊是以否定情況來測試,而這次元素定位器中css選擇器的屬性是src,而不是前一個指令中的original。

預期src的值會被取代為圖片佔位器的圖片,而不是原本圖片的網址。測試通過的話則進入下一個指令,否則終止測試。

A3-1:觸發圖片延緩載入功能

觸發圖片延緩載入的條件是將瀏覽範圍移動到該圖片的位置。Selenium並沒有移動捲軸的指令,但是卻可用runScript指令執行JavaScript程式碼,來達到移動捲軸的效果。

  • Commend: runScript
  • Target: window.scrollTo(0, $("img[title='2011-06-25_233326 設計 網頁元素']").offset().top);
  • Value:
runScript(script)

    參數

    • script - JavaScript程式碼

    由於我的Blog中已經載入了jQuery框架,所以在這邊我直接用jQuery的offset()方法來取得圖片距離頁面頂部的位置。然後再用JavaScript既有的window.scrollTo(x, y)來指定瀏覽範圍的位置。

    透過runScript指令,即使你可能還不熟Selenium所有的指令,但你可能已經可以開始用任何你熟知的JavaScript方法來操作頁面的功能了。

    runScript指令實際上是在頁尾插入一段<script>標籤,以執行指令中的JavaScript程式碼。例如上述指令則會在頁面最後插入以下程式碼:

    <script type="text/javascript">
    window.scrollTo(0, $("img[title='2011-06-25_233326 設計 網頁元素']").offset().top);
    </script>

    但是Selenium並不能掌控JavaScript程式碼執行時發生的錯誤,runScript永遠都是正確執行,並直接進入下一個指令。

    A3-2:確認圖片正常載入

    當瀏覽畫面移到該圖片的位置時,圖片延緩載入功能應該要能順利運作,將該圖片的src屬性換回正確的網址,讓圖片順利載入正確的圖片。

    上一個指令是移動瀏覽畫面,然後還要等待圖片延緩載入替換圖片的src屬性。儘管這是人類難以察覺的短暫間隔,但這仍是要等待一小段時間。因此在此我用的是waitForElementPresent指令來確認圖片是否有正常地載入。

    • Commend: waitForElementPresent
    • Target: css=img[title="2011-06-25_233326 設計 網頁元素"][src="http://lh4.ggpht.com/-a6cwLWbFve8/Tgg8J05sfPI/AAAAAAAAIYE/lU7sCSU6L0o/Image.png"]
    • Value:
    waitForElementPresent(locator)

    參數:

    • locator - 元素定位器

    回傳:

    如果元素存在,則回傳true;否則回傳false。

     

    waitForElementPresent會等待30秒鐘(可由setTimeout指令來改變預設的逾時時間),檢查該元素是否存在。如果圖片延緩載入有順利運作,那麼title為「2011-06-25_233326 設計 網頁元素」的圖片,其src屬性應該順利成為「http://lh4.ggpht.com/-a6cwLWbFve8/Tgg8J05sfPI/AAAAAAAAIYE/lU7sCSU6L0o/Image.png

    當圖片延緩載入順利啟動之後,這個測試指令就會成功。

    測試案例結束訊息

    Selenium IDE在測試結束之後不太會有明顯的通知。跑過幾次之後,我覺得是應該在測試案例最後加上測試結束的訊息。

    • Commend: echo
    • Target: 圖片延緩載入測試完成
    • Value:
    echo(message)

    參數:

    • message - 要顯示的訊息。

    echo的訊息會顯示在Selenium IDE下方的Log欄位,如下圖:

    image

    如果看到Log中有「圖片延緩載入測試完成」的訊息,那麼就表示這整個測試案例已經跑完了,可以來確認一下有沒有哪些指令發生了錯誤。

    幫測試案例加上註解

     image

    最後,為了讓測試案例容易閱讀,我們可以插入註解(Insert New Comment)來分隔各個測試指令。

    image

    註解的內容寫在Commend欄位裡面,如上圖。註解純粹只是在撰寫時給自己看的,並不會在測試時執行任何動作,也不會在Log中出現。

    至此,整個測試案例就大功告成了。


    測試運作結果

    image

    在Selenium IDE中按下「Play current test case」按鈕,就能夠執行目前選擇的測試案例,用以檢查剛剛建立的各種測試指令是否有如預期地運作。

    檔案下載

    Selenium IDE的測試案例(Test Case)跟測試組合(Test Suite)都是以HTML形式來儲存。

    image

    你也可以直接用瀏覽器來開啟,檢視測試案例的概要內容,如上圖所示。

    運作影片

    螢幕錄影是使用Cute Screen Recorder工具,這段影片沒有錄進聲音喔。


    結語

    這是我第一次製作Selenium測試案例。一開始草草上手,在寫這篇介紹的時候,又把測試案例的內容做過相當多修改。前前後後改了好幾次,也花了不少時間來寫,甚至比單純地學習如何操作Selenium IDE還要花上了更多時間。

    如果有人發現我哪裡講錯了、或是前後不合的話,請務必告知指教。

    image

    題外話,在寫這篇的時候,WLW的排版也變得非常奇怪。左邊的邊界時常在變動,讓我挺擔心最後輸出時是否會有問題。總之,總算是寫完啦。

    (more...)

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

    網頁應用程式測試工具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的方式,簡單易懂地說明如何建置。讓人光看就知道怎麼建置測試案例。

    這兩篇文章是:

    請多多指教。

    (more...)