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
使用IE Develop Toolbar 查看HTML DOM
操作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

Paste_Image.png

mshtml.dll的COM组件名字叫"Microsoft.mshtml", 添加引用如下Add References-> .NET Tab->Microsoft.mshtml

Paste_Image.png

添加完引用后，就可以引用命名空间了

此处加入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，以便模拟一些用户的操作，比如调整浏览器的大小，刷新页面等。

复制代码

staticvoidMain(string[] args){ InternetExplorer IE =newInternetExplorer(); IE.Visible =true;objectnil =newobject();stringCnblogUrl =" http://www.cnblogs.com";//打开IE并且打开博客园主页IE.Navigate(CnblogUrl,refnil,refnil,refnil,refnil); Thread.Sleep(3000);//设置IE左上角的位置IE.Top =10; IE.Left =10;//设置IE的高度和宽度IE.Height =800; IE.Width =1000;//导航到 百度主页Thread.Sleep(3000);stringBaiduUrl =" http://www.baidu.com"; IE.Navigate(BaiduUrl,refnil,refnil,refnil,refnil);//点击后退按钮Thread.Sleep(3000); IE.GoBack();//刷新IEThread.Sleep(3000); IE.Refresh();//关闭IEThread.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元素的引用。 然后你可以操作这个对象，比如输入值和点击它

复制代码

staticvoidMain(string[] args){ InternetExplorer IE =newInternetExplorer(); IE.Visible =true;objectnil =newobject();stringCnblogUrl =" http://www.cnblogs.com";//打开IE并且打开博客园主页IE.Navigate(CnblogUrl,refnil,refnil,refnil,refnil); 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();}

复制代码

运行效果如下:

点击图片可在新窗口打开

在实践的过程中，我遇到一个问题，IE.Document 无法识别。编译提示如下错误： 错误 1 预定义的类型“Microsoft.CSharp.RuntimeBinder.Binder”未定义或未导入 错误 2 找不到编译动态表达式所需的一种或多种类型。是否缺少对 Microsoft.CSharp.dll 和 System.Core.dll 的引用? 错误 3 找不到编译动态表达式所需的一种或多种类型。是否缺少对 Microsoft.CSharp.dll 和 System.Core.dll 的引用?
该问题可由一下方法解决：
用记事本打开专案资料夹里的 *.csproj
找到区段 手动加入

即可。