13 August 2005

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 自訂,相當有彈性,推薦給大家!


回響

可以用 Tag <I>、<B>,程式碼請用 <PRE>