fbpx

持續整合 - 透過 Selenium 實現自動化測試

selenium-logo距離上一次介紹 Selenium 的文章也已經隔了好幾年了,很多功能都已經更新,所以來寫一篇新的教學文章。Selenium 這幾年一直持續發展,已經可以透過 Web Driver 支援數十種 Browser,測試腳本的寫法也支援大部分常用的程式語言,可以算是很成熟的 OpenSource Web 測試框架。

今天介紹透過 Selenium IDE (FireFox Extension) 進行腳本設計,讓不懂程式的朋友們也能撰寫測試案例。

安裝 Selenium IDE

Selenlium IDE 是一個 FireFox 瀏覽器外掛,安裝後可以透過它來錄製瀏覽器的操作動作,並成為測試腳本,當然也可以對腳本進行回放與匯出。此外 Selenium IDE 還支援許多 Extension,可以擴充功能,像是畫面截圖、Highlight 等等。安裝時請先裝好 FireFox 瀏覽器,接著到官方網站下載 Selenium IDE,字蠻小的要找一下。畫面如下,目前的版本是 2.9.0:

selenium-ide-download

如果您先前有正確安裝 FireFox,下載後就可以自動開啟 .xpi 檔案進行安裝,安裝時會出現要求安裝相依的 Extension,畫面如下:

selenium-ide-plugins

 

安裝完成後就可以在工具列看到「Selenium」按鈕,啟動後會有一個新視窗開啟 Selenium IDE,如下:

selenium-ide

透過 Selenium IDE 錄製測試腳本

測試腳本可以用錄製的算是很方便了,Selenium IDE 跟幾年前比起來已經進步許多,錄下來的腳本只要稍作修改後,進行回放都不會有太大的問題。我們先來錄個測試腳本跑看看,測試的動作如下:

  1. 開啟 Google 搜尋引擎
  2. 輸入「Soul & Shell Blog」按下搜尋
  3. 點擊「Soul & Shell Blog」進入網站

錄製時先按下右上角的紅色按鈕,如下圖:

selenium-ide-0

接著在網頁上操作步驟,動作就會被錄下來囉,錄好的畫面會像下面這樣,然後可以按下綠色的 Play 可以進行回放,回放的過程通常都會有錯誤,像下面這樣:

selenium-ide-2

實務上,對於直接錄製的腳本發生錯誤是常見的事,千萬不要太緊張(也不要氣餒),多調整幾次就可以順利執行了。上圖執行的過程中我們可以看到 Selenium IDE 錄了四個 Command,回放錯誤的問題在於搜尋結果的網頁連結還沒有顯示就執行「clickAndWait」命令,導致找不到 DOM Element 可以進行操作。為了修正這個錯誤,我們需在「clickAndWait」之前新增一個「waitForElementPresent」命令,好讓 Selenium 等待 DOM 元素出現才進行,這樣就沒有問題了。如下:

selenium-ide-3

 

調整好這些測試腳本之後,我們可以透過工具列將腳本匯出成其他格式 (File -> Export Test Case As...),但我還是比較喜歡最原始的 HTML 格式,是由 Table, Tr, Td 所記錄的一種方式。

透過 Selenium-RC Server 自動執行測試腳本

接下來我們介紹如何透過 Selenium-RC 自動執行測試腳本,RC 是 Remote Control 的意思,Selenium-RC 是透過 Java 所設計的測試執行器,因此執行時需安裝 JRE 環境。當我們執行 Selenium-RC 時,會透過 Jar 檔裡頭自帶的 Jetty (HTTP Server / Servlet Container) 創建服務,並且自動開啟我們所指定的瀏覽器進行測試腳本回放測試。透過 Selenium-RC 我們可以執行由 Java, Ruby, Python, Perl, PHP, .Net 等等程式語言所設計的測試腳本,執行架構如下:

selenium-rc_Architecture

 

這裡我們先用前面出儲存的 HTML 測試腳本來執行看看,有一點很重要! Selenium-RC 無法直接執行 Test Case,它只能載入 Test Suite,因此切記指定的檔案必須要是一個 Test Suite。執行的命令如下:

java -jar selenium-server-standalone-2.45.0.jar -port 4546 -trustAllSSLCertificates -htmlSuite *firefox "http://google.com" TestSuite.html result.html

-htmlSuite 就是指定輸入的腳本格式,TestSuite.html 就是腳本 Test Suite,最後的測試結果會輸出到 result.html 檔案中。 以下是在 M$ Windows 跑起來的畫面,當然在 Linux 也是可以正確執行,這裡只是為了測試所以先跑在 Windows 上:

selenium-rc.runing

 

執行後會看到 FireFox 被自動啟動,會開啟兩個 FireFox,一個負責控制腳本執行,而另一個負責執行測試腳本。測試過程畫面如下:

selenium-4

以上的測試腳本 HTML 檔可以從 GitHub 下載。

整合 Jenkins 實踐自動化測試

如果您已經設計了許多測試腳本,那麼與「持續整合系統」進行整合是個很棒的方法。這樣每次一但有新的程式碼被提交,就可以自動進行測試,順便在測試失敗時自動發信提醒相關開發者。我們選用最受歡迎的 Jenkins 來實作自動化測試,Jenkins 的安裝我就不介紹了,有興趣可以參考以前的 Jenkins 安裝教學文章

先介紹一下整合的重點,由於我們必須透過瀏覽器來測試,因此我們的 Jenkins Server 必須安裝 X-Window 套件與 Firefox,今天選用的 Linux Distribution (發佈版) 是採用 Ubuntu 14.04,在測試時我們需要安裝 xvfb 這個套件,xvfb 是一個虛擬的 X-Window Framebuffer,相當輕量。請透過以下命名安裝:

sudo apt-get install xvfb

安裝好之後可以透過以下命名啟動 xvfb

Xvfb :99 -ac -screen 0 1280x960x16

上述的命令表示啟用一個 1280x960 大小 16 Bit Color 的虛擬桌面,切記不要用太小的畫面,免得測試時出問題,例如用到 CSS Media Query 等等都要注意。啟動後如果要將測試跑在這個虛擬的桌面中,請使用以下命令執行即可:

export DISPLAY=":99" && java -jar selenium-server-standalone-2.45.0.jar -port 4546 -trustAllSSLCertificates -htmlSuite *firefox "http://google.com" TestSuite.html result.html

如此一來我們就可以在 Command Line 環境下執行測試了,最後當然就是要整合到 Jenkins Job 中,我們將以上啟動 xvfb 與測試命令一併寫在 Jenkins Job 中的「執行 Shell」即可,如下:

jenkins-ci

建議可以將 Job 設定為輪詢版本控制系統 (Version Control System) 變更時自動建置,加上一些自行定義的 Script 進行自動化佈署,接著讓 Selenium 進行自動化測試,整個過程都是「自動化」,這樣就完成囉,下此再見!

  5 comments for “持續整合 - 透過 Selenium 實現自動化測試

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料