1. 程式人生 > >Web UI自動化測試原理

Web UI自動化測試原理

因為是轉載文章 在此標明出處,以前有文章是轉的沒標明的請諒解,因為有些已經無法找到出處,或者與其它原因。

如有冒犯請聯絡本人,或刪除,或標明出處。

因為好的文章,以前只想收藏,但連線有時候會失效,所以現在碰到好的直接轉到自己這裡。

目前市面上有很多Web UI自動化測試框架,比如WatiN, Selinimu,WebDriver,還有VS2010中的Coded UI等等.  這些框架都可以操作Web中的控制元件,模擬使用者輸入,點選等操作,實現Web自動化測試。其實這些工具的原理都一樣,都是通過呼叫IE COM介面和HTML DOM 對IE瀏覽器以及WEB測試物件的操作。

本文介紹脫離這些自動化測試框架。  直接使用.NET提供的shdocvm.dll庫來操作IE瀏覽器,使用mshtml.dll庫來操作IE中的 HTML物件。

閱讀目錄

優點

通過直接操作IE COM來實現Web自動化,能讓你在幾分鐘之內快速建立一個輕量型的自動化測試程式。 大大的提高了測試效率。 也有助於你理解WatiN這些自動化測試框架的執行原理.

新增引用

shdocvm.dll和mshtml.dll這兩個庫的COM元件名字和他們的dll名字不一樣。所以比較難找。

shdocvm.dll 的COM 元件名字叫"Microsoft Internet Controls". 新增引用如下Add References->Com Tab-> Microsoft Internet Controls

mshtml.dll的COM元件名字叫"Microsoft.mshtml", 新增引用如下Add References-> .NET Tab->Microsoft.mshtml

新增完引用後,就可以引用名稱空間了

using mshtml;
using SHDocVw;

 -------------------------------------------------------------------------------------------------------

此處加入mshtml和SHDocVw的介紹,來至 http://www.cnblogs.com/liulf/archive/2010/04/26/1721400.html

      首先我們看使用的非託管的類庫。我們在這裡將會使用兩個非託管類庫:mshtml.dll和Interop.SHDocVw.dll。 mshtml是微軟IE的核心類庫,下面是Wiki百科的解釋:

Trident (also known as MSHTML) is the name of the layout engine for the Microsoft Windows version of Internet Explorer. It was first introduced with the release of Internet Explorer version 4 in October 1997, has been steadily upgraded and remains in use today. For version 7 of Internet Explorer, Microsoft made significant changes to the Trident layout engine to improve compliance with web standards and add support for new technologies.

      開發人員可以通過mshtml提供的介面,訪問到IE佈局物件,從而達到對Web的控制和檢查。

      另一個類庫Interop.SHDocVw.dll則提供了一個InternetExploer的介面,可以幫助我們操縱IE程序,並且進行一些簡單的如前進,後退等操作。

這 兩個類庫如果裝了VS2005都可以找到。mshtml是IE自帶的,在專案中選擇新增引用,然後在.net標籤下面找到 Microsoft.mshtml就可以找到了。而Interop.SHDocVw要複雜一點,新增引用中,選擇瀏覽標籤,然後在下面的路徑就可以找 到:C:\Program Files\Microsoft Visual Studio 8\Application\PreEmptive Solutions\Dotfuscator Community Edition

--------------------------------------------------------------------------------------------------------

      因此我們可以知道:

            1. mshtml, 也叫Trident,  是微軟IE的核心類庫,使用者可通過mshtml提供的介面訪問IE佈局物件,來對Web進行控制和檢查。

            2. SHDocVm 提供InternetExploer的介面,可操作IE程序,和一些對IE的操作,如前進,後退,重新整理,退出等。

--------------------------------------------------------------------------------------------------------

操作IE

通過shdocvm.dll中的InternetExplorer物件的屬性和方法, 比如Height,Width。我們能夠操作IE,以便模擬一些使用者的操作,比如調整瀏覽器的大小,重新整理頁面等。

複製程式碼
static void Main(string[] args)
{      
    InternetExplorer IE = new InternetExplorer();
    IE.Visible = true;
    object nil = new object();
    string CnblogUrl = "http://www.cnblogs.com";
    // 開啟IE並且開啟部落格園主頁    IE.Navigate(CnblogUrl, ref nil, ref nil, ref nil, ref nil);
    Thread.Sleep(3000);

    // 設定IE左上角的位置    IE.Top = 10;
    IE.Left = 10;
    // 設定IE的高度和寬度    IE.Height = 800;
    IE.Width = 1000;
    // 導航到百度主頁    Thread.Sleep(3000);
    string BaiduUrl = "http://www.baidu.com";
    IE.Navigate(BaiduUrl, ref nil, ref nil, ref nil, ref nil);

    // 點選後退按鈕    Thread.Sleep(3000);
    IE.GoBack();

    // 重新整理IE    Thread.Sleep(3000);
    IE.Refresh();

    // 關閉IE    Thread.Sleep(3000);
    IE.Quit();
}
複製程式碼

使用IE develop toolbar 檢視HTML DOM

下節中我們要操作HTML中的元素, 我們先需要知道這些控制元件的id,  使用IE Develop Toolbar或者firebug可以方便檢視控制元件的id.

按F12啟動IE Develop Toolbar, 或者點選IE工具欄中的Tools->Develop Tools

 從圖中可以看到部落格園中的搜尋textbox的id是"q"

操作IE中的HTML元素

 模擬一個在部落格園首頁進行搜尋的場景。 模擬在文字框中輸入資料, 然後點選"找找看按鈕"。

 我們通過mshtml.dll庫裡的getElementById()方法獲得你要操作的HTML元素的引用。 然後你可以操作這個物件,比如輸入值和點選它

複製程式碼
static void Main(string[] args)
{      
    InternetExplorer IE = new InternetExplorer();
    IE.Visible = true;
    object nil = new object();
    string CnblogUrl = "http://www.cnblogs.com";
    // 開啟IE並且開啟部落格園主頁    IE.Navigate(CnblogUrl, ref nil, ref nil, ref nil, ref nil);
    Thread.Sleep(3000);

    // 獲取DOM物件    HTMLDocument doc = (HTMLDocument)IE.Document;

    // 部落格園主頁上的搜尋Textbox的id是 "q"    HTMLInputElement SearchTextBox = (HTMLInputElement)doc.getElementById("q");
    SearchTextBox.value = "小坦克";

    // 部落格園主頁上的"找找看"按鈕的id是"btnBloggerSearch"    HTMLInputElement SearchButton = (HTMLInputElement)doc.getElementById("btnBloggerSearch");
    SearchButton.click();
}
複製程式碼

 執行效果如下:

原始碼下載

點選這裡,請用VS2008以上開啟

在實踐的過程中,我遇到一個問題,IE.Document 無法識別。編譯提示如下錯誤:
     錯誤 1 預定義的型別“Microsoft.CSharp.RuntimeBinder.Binder”未定義或未匯入
     錯誤 2 找不到編譯動態表示式所需的一種或多種型別。是否缺少對 Microsoft.CSharp.dll 和 System.Core.dll 的引用? 
     錯誤 3 找不到編譯動態表示式所需的一種或多種型別。是否缺少對 Microsoft.CSharp.dll 和 System.Core.dll 的引用? 

該問題可由一下方法解決:

        用記事本開啟專案資料夾裡的 *.csproj

        找到<ItemGroup>區段
        手動加入
              <Reference Include="Microsoft.CSharp" />

              <Reference Include="System.Core" />

        即可。

此文章屬於轉載,主要用於學習儲存。