[技術分享]UI自動測試 WatiN

2010-02-12

9707
0

[技術分享]UI自動測試 WatiN

去年在之前的案子有使用到WatiN作UI的測試，在這邊小小的來介紹一下。

1.WatiN的念法？
看到這五個字母的組合，大家的念法也很多種，心中不禁想問到底他真正的念法是什麼？
在他的官網中就給大家帶來解答了！
pronounced as What-in

2.WatiN命名的由來？
WatiN => Web Application Testing In .NET
由此可知他是for .NET 這個平台來開發網頁應用程式的測試工具。
所以，WatiN可以拿來作UI的測試，對瀏覽器上的網頁物件作操作，進一步測試其功能是否正常。

3.WatiN的使用
①下載WatiN RC
p.s. 印象中是免安裝的，只要將WatiN.Core.dll加入參考即可...只是不懂為何官網上有說要install...

下載位置：http://sourceforge.net/projects/watin/files/

②打開Vs.Net2005，新建一個Console專案。
③加入Watin.core參考
④在Main中加入測試碼
⑤下載IE Developer Toolbar 到此下載

-------------------------以下是簡單的範例---------------------------------------------------------------------------


using System;
using System.Collections.Generic;
using System.Text;
using WatiN.Core;

namespace WatiNGettingStarted
{
    class WatinConsoleExample
    {
        [STAThread]
        static void Main(string[] args)
        {
            // Open a new Internet Explorer window and
            // goto the google website.
            IE ie = new IE("http://www.google.com.tw");

            // Find the search text field and type Watin in it.
            ie.TextField(Find.ByName("q")).TypeText("WatiN");

            // Click the Google search button.
            ie.Button(Find.ByValue("Google 搜尋")).Click();   

            Div div = ie.Div(Find.ById("ssb"));

            string resultStats = div.Text;

            #region 直接輸出搜尋結果

            // Write these statistics to the console window.
            Console.WriteLine(resultStats);

            #endregion

            #region 驗證搜尋結果是否如搜尋條件

            bool isSearchSuccess = div.InnerHtml.Contains("WatiN");

            if (isSearchSuccess)
                Console.WriteLine("搜尋WatiN結果正確！！");
            else
                Console.WriteLine("搜尋WatiN結果錯誤！！");
            
            #endregion
            

            // Uncomment the following line if you want to close
            // Internet Explorer and the console window immediately.
            //ie.Close();
        }
    }
}

※使用官網的sample作修改並添加驗證→WatiNGettingStarted.rar

此範例為簡單的將IE打開（WatiN也支援FireFox的瀏覽器操作）
利用網頁上元素的屬性來找到該物件，如Find.ByName("q"))
"q"是Google的搜尋輸入框的name，可使用IE Developer tool 來得知網頁上DOM結構。

*其餘的搜尋按鈕及DIV的tag找法依此類推。

利用WatiN.Core所提供的類別庫裡面的類別和方法來在網頁上作操作。
將重複測試網頁功能的操作動作寫成一個腳本，將來只要執行此腳本就能節省許多測試時間。
並且，若是網頁功能或畫面有一更動造成UI測試腳本run不下去時，也能及時得知並解決之。
若大家對WatiN有興趣的話，官方網站有少許的東西可參考，例如HTML Mapping Table
（This document provides a mapping table between the html element code in a webpage and the WatiN API. ）

而在WatiN下載的壓縮檔裡面有有蠻豐富的範例可供參考
在..\src\WatiN.8.sln中就有很多網頁元素的操作及驗證方法
例如，如何下載檔案、ConfirmDialog、AlertDialog的操作等等，在很少資源的環境下，是蠻值得參考的。

另外，有一個WatiN Test Recorder，可以自動幫你產生WatiN測試的程式碼，減輕撰寫程式的負擔。

現在的版本Version 2.0 Beta ，比我那時候用的更 frendly了！功能強化很多。

（使用這個入門應該可以減低學習痛苦值...XD）

官網： http://watintestrecord.sourceforge.net/

MSDN介紹參考：http://msdn.microsoft.com/zh-tw/magazine/cc163283.aspx

參考網站：
WatiN官網：http://watin.sourceforge.net/
大陸技術人分享的文章：http://www.cnblogs.com/oscarxie/archive/2008/04/16/1155675.html
--
以上簡略的分享，請大家多多指教：）

回首頁