Zi 字媒體

距離上一次介紹 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： 如果您先前有正確安裝 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」即可，如下： 建議可以將 Job 設定為輪詢版本控制系統 (Version Control System) 變更時自動建置，加上一些自行定義的 Script 進行自動化佈署，接著讓 Selenium 進行自動化測試，整個過程都是「自動化」，這樣就完成囉，下此再見！ 分享到 Twitter(在新視窗中開啟) 按一下以分享至 Facebook(在新視窗中開啟) 分享到 LinkedIn(在新視窗中開啟) 點這裡寄給朋友(在新視窗中開啟) 按一下即可分享至 Skype(在新視窗中開啟) 分享到 Reddit(在新視窗中開啟) 分享到 Tumblr(在新視窗中開啟) 按一下以分享到 Telegram(在新視窗中開啟)