[教學] 前端自動化測試 (上) -- YUI Test + Selenium

Why YUITest

在 Web 前端測試中，常見的 JavaScript Unit Test 工具有 JSUnit、 QUnit 等，本文介紹的不只是 Unit Test ，而是自動化的 Unit Test！整個流程使用到的工具包含 YUITest 與 Selenium RC。有別於其他 JavaScript 測試工具，YUITest 具有以下特色：

1. 模擬真實瀏覽器環境下的 DOM Event 行為。
2. 支援非同步 (Asynchronous) 與 Ajax 測試。
3. Code Coverage 分析，確保所有程式邏輯都包含在測試中。
4. 獨立運作，可搭配使用其他 JavaScript Library (e.g. jQuery, Dojo, Ext JS... ) 使用。
5. 整合 Hudson 以及 Selenium 成為完整的 Continuous Integration, CI  系統。

準備測試網頁

以下的 YUITest 測試網頁原始碼可以在這裡下載。如果使用瀏覽器開啟的話，會看到 YUITest 的測試結果。可是手動開啟網頁測試實在太沒效率，因此我們使用 Selenium 自動化測試產生報表，如此一來就能將珍貴的時間放在更有價值的開發上！

安裝並啟動 Selenium RC

下載 Selenium RC 後，到所在的目錄（任意目錄皆可），執行以下 Command 啟動 Selenium RC Server：

java -jar selenium-server-standalone.jar

執行 YUITest 測試

確認 Selenium RC Server 啟動後，接著執行 YUITest ，測試標的是剛才準備好的測試網頁：

java -jar yuitest-selenium-driver.jar --resultsdir ~/results http://127.0.0.1/examples/basic-usage-example.htm

附註：YUITest Selenium Driver 需要 Java Client Driver，下載後放到 {JRE}/lib/ext 下或是用其他的方法引用該 selenium-java-{version}.jar 檔。(e.g. Mac 預設的 Java 目錄為 /Library/Java/Home )

測試結果告訴我們，YUITest 一共執行了七個測試，其中一個失敗了。詳細的報表在指定的目錄（本例為 ~/results ）下可以找到。接下來只要針對這個錯誤 Debug 即可，不必等待 QA 回報 Bug ，也不需要如大海撈針般尋找問題根源，大幅縮減開發時間！（Engineer 心中 OS: 終於可以準時下班了 T_T）

接下來 Selenium RC 會自動開啟瀏覽器並做測試：

Next Step

雖然 YUITest + Selenium 已經大大提昇了 JavaScript 程式碼的品質，但這還不夠，為了去除所有手工的步驟，接下來我們還要繼續整合 Hudson ，完成整個 Continuous Integration 流程。

下篇：[教學] 前端自動化測試 (下) -- YUI Test + Selenium + Hudson

Reference

1. Introducing New YUI Test
2. Video: Nicholas C. Zakas — YUI Test
3. nzakas / yuitest source code on github
4. YUITest Selenium driver wiki
5. YUI 3 Test
6. Selenium RC
7. 命令行方式執行YUITest單元測試
8. Web UI 測試的好幫手 – Selenium
9. JUnit 學習筆記