Unit Test 寫了這麼多，到是從來沒寫過 Functional Test。前些日子發現了一個很特別的工具，叫Seleinum ，這是由 ThoughtWorks (Martin Fowler 的公司) 所設計的 Web Functional Test 的工具。不多說，各位可以先玩玩看 Demo。網頁的上半邊是 Selenium TestRunner 執行的環境，下半部則是被測試的 web app。按下右上角 frame 的 All Tests 的 button，測試就會開始跑。
如何？很酷吧！整個運作流程是這樣的，首先你寫一個 foo.html 的網頁，然後將它的 link 加到左上方 frame 的 TestSuite 表格裡。當你點選 TestSuite 上 foo.html 的連結後，foo.html 的內容就會呈現在中間那個 frame，而裡面的三欄位表格就是測試的 "程式碼"。當你按下右邊的 Selected Test 或是 All Tests 按鈕後，Selenium 便會一行一行的執行那些 "程式碼"，而你的 web app 就會跟著這些程式碼而行動，比方說按下某連結啦，或是輸入一些字這樣。Selenium 也提供一些指令，讓你可以 verify 網頁是不是正常的輸入、顯示 (demo 中出現紅色的就是 verify 失敗，綠色的就是成功，跟一般測試的 convention 一樣)。這樣一來便可以 自動化 執行有關功能面的測試，比方說網頁的回應時間是否太長；也可以測試 web app 相不相容於不同的 browser，因為這個測試工具是跑在真正的 browser 上啊！只要開不同的 browser 跑這些 "html 程式碼" 即可！
這個工具實在是太酷啦！來寫寫看吧：我們現在有個 web app 叫 Hello，裝在 tomcat 上通常要這樣連：
http://localhost:8080/Hello/
好，這個 web app 有兩個jsp：
index.jsp:
<head><title>Home</title></head>
<body>
<form action="/login.do" name="loginForm">
<input type="text" name="username" value="" >
<input type="submit" name="submit" >
</form>
</body>
success.jsp:
<head><title>Welcome</title></head>
<body>
Welcome, ${username}
</body>
流程很簡單：在 index.jsp 填上 username，接著 submit 成功後便會到 success.jsp 顯示 Welcome, XXX。後端的 login.do 我們就不提了。接下來我們要安裝 Selenium 來測試這個 Hello web app。
- 到 Selenium 下載 selenium-0.5.0.zip
- 解開後，將 selenium-0.5 下的 "selenium" 目錄 copy 到 c:\tomcat\webapps\ROOT 底下
- 連結到 http://localhost:8080/selenium 應該會出現 selenium 的 demo 環境。
- 在 selenium 目錄下開個資料夾，叫 hello
- 在 selenium/hello 底下建立兩個檔案，一個叫 TestSuite.html:
<html> <head> <meta content="text/html; charset=Big5" http-equiv="content-type"> <title>Test Suite</title> </head> <body> <table cellpadding="1" cellspacing="1" border="1"> <tbody> <tr><td><b>Test Suite</b></td></tr> <tr><td><a href="./TestLogin.html">TestLogin</a></td></tr> </tbody> </table> </body></html>這個就是待會放在左半邊 frame 的 html，而裡面寫的 ./TestLogin.html 則是：
<html> <head> <meta content="text/html; charset=Big5" http-equiv="content-type"> <title></title> </head> <body> <table cellpadding="1" cellspacing="1" border="1"> <tbody> <tr> <td rowspan="1" colspan="3">Test Login<br> </td> </tr> <tr><td>open</td><td>/Hello/</td><td> </td></tr> <tr><td>type</td><td>username</td><td>ingram</td></tr> <tr><td>clickAndWait</td><td>submit</td><td> </td></tr> <tr><td>verifyTitle</td><td>Welcome</td><td> </td></tr> </tbody> </table> </body> </html>這個 TestLogin.html 就是測試的程式碼了，中間那三欄位 table 寫的 open /hello/, type username 等等的就是 Selenium 的指令。
- 準備好這兩個檔案後，用下列網址啟動測試主頁：
http://localhost:8080/selenium/TestRunner.html?test=hello/TestSuite.html
- 按下 All tests 就可以開始跑囉，我稍微解釋一下程式碼：
open /Hello/ 這個就是打開 http://localhost:8080/Hello/ 這個網址。
type username ingram 這一行則是在名為 username 的 form 欄位中輸入 ingram
clickAndWait submit 這一行則是按下在名為 submit 的 按鈕，並且等待網頁 request 結束
verifyTitle Welcome 最後一行則是 verify 我們新到的網頁中，它的 title 是否為 "Welcome"。
- 如果沒意外的話，結果應該是綠燈 :-)
Selenium 的指令在網頁上有手冊可以查，而且指令並不多，都很直覺簡單，還可以用 javascript 自訂，相當有彈性，推薦給大家！