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

10 年前

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

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

Toggle

安裝 Selenium IDE

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

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

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

透過 Selenium IDE 錄製測試腳本

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

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

錄製時先按下右上角的紅色按鈕，如下圖：

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

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

調整好這些測試腳本之後，我們可以透過工具列將腳本匯出成其他格式 (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 等等程式語言所設計的測試腳本，執行架構如下：

這裡我們先用前面出儲存的 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 上：

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

以上的測試腳本 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」即可，如下：