Web UI自动化测试原理

因为是转载文章 在此标明出处，以前有文章是转的没标明的请谅解，因为有些已经无法找到出处，或者与其它原因。

如有冒犯请联系本人，或删除，或标明出处。

因为好的文章，以前只想收藏，但连接有时候会失效，所以现在碰到好的直接转到自己这里。

原文 出处http://www.cnblogs.com/keepSmile/archive/2013/07/03.html

目前市面上有很多Web UI自动化测试框架，比如WatiN, Selinimu,WebDriver，还有VS2010中的Coded UI等等.  这些框架都可以操作Web中的控件，模拟用户输入，点击等操作，实现Web自动化测试。其实这些工具的原理都一样，都是通过调用IE COM接口和HTML DOM 对IE浏览器以及WEB测试对象的操作。

 

本文介绍脱离这些自动化测试框架。  直接使用.NET提供的shdocvm.dll库来操作IE浏览器，使用mshtml.dll库来操作IE中的 HTML对象。

阅读目录

1. 优点
2. 添加引用
3. 操作IE
4. 使用IE Develop Toolbar 查看HTML DOM
5. 操作IE中的HTML元素
6. 源代码下载

优点

通过直接操作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以上打开

以上文章转自http://www.cnblogs.com/TankXiao/archive/2012/03/29/2418219.html。谢谢该文作者的分享。

 

在实践的过程中，我遇到一个问题，IE.Document 无法识别。编译提示如下错误：
     错误 1 预定义的类型“Microsoft.CSharp.RuntimeBinder.Binder”未定义或未导入
     错误 2 找不到编译动态表达式所需的一种或多种类型。是否缺少对 Microsoft.CSharp.dll 和 System.Core.dll 的引用? 
     错误 3 找不到编译动态表达式所需的一种或多种类型。是否缺少对 Microsoft.CSharp.dll 和 System.Core.dll 的引用? 

该问题可由一下方法解决：

        用记事本打开专案资料夹里的 *.csproj

        找到区段
        手动加入
             

             

        即可。

该解决方案来源于：http://blog.csdn.net/fishernemo/article/details/7447306

此文章属于转载，主要用于学习保存。