6.0 导读
测试Web应用程序,最简单的形式就是通过手工进行UI测试;但是,手工测试经常速度很慢,效率也不高,而且非常乏味。一种比较好的策略是针对Web应用程序UI进行基本的自动化测试来代替手工测试。我们可以通过好几种方法来做这件事情。最古老的技术是通过JavaScript,使用Internet Explorer Document Object Model(IE DOM)来操纵Web程序的控件。要讲解这种测试方法,最好的途径就是通过活生生的例子,图6-1展示的就是一个基于脚本的Web UI自动化测试套件的运行情况。

图6-1 基于脚本的Web UI测试
如图6-1所示,我们可以看到测试套件是一个包含两个frame的网页。右边的frame是待测的Web程序;它的显示标题是MiniCalc。在本例中,待测程序是一个简单的计算器程序。左边的frame页面包含一些JavaScript函数,这些函数用于操纵待测的Web程序,并且把测试结果记录到外部文件。本章展示了基于脚本的Web UI自动化测试套件所用到的各种不同的技术。
本章的许多小节都涉及图6-1所示的右边frame列的Web页面。这个页面的名字叫作WebApp.aspx。它的完整代码如下:
<%@ Page Language="C#" Debug="true" %>
<script language="c#" runat="server">
private void Button1_Click(object sender, System.EventArgs e)
{
int alpha = int.Parse(TextBox1.Text.Trim());
int beta = int.Parse(TextBox2.Text.Trim());
if (RadioButton1.Checked)
{
TextBox3.Text = Sum(alpha, beta).ToString("F4");
}
else if (RadioButton2.Checked)
{
TextBox3.Text = Diff(alpha, beta).ToString("F4");
}
else if (RadioButton3.Checked)
{
TextBox3.Text = Product(alpha, beta).ToString("F4");
}
else
TextBox3.Text = "Select method";
}
private static double Sum(int a, int b)
{
double ans = 0.0;
ans = a + b;
return ans;
}
private static double Diff(int a, int b)
{
double ans = 0.0;
ans = a - b;
return ans;
}
private static double Product(int a, int b)
{
double ans = 0.0;
ans = a * b;
return ans;
}
</script>
<html>
<head><title>WebApp.aspx</title></head>
<style type="text/css">
fieldset { width: 16em }
body { font-size: 10pt; font-family: Arial }
</style>
<body bgColor="#ccffff">
<h3>MiniCalc</h3>
<form method="post" name="theForm" id="theForm" runat="server">
<p><asp:Label id="Label1" runat="server">Enter integer:  
</asp:Label>
<asp:TextBox id="TextBox1" size="6" runat="server" /></p>
<p><asp:Label id="Label2" runat="server">Enter another: 
</asp:Label>
<asp:TextBox id="TextBox2" size="6" runat="server" /></p>
<p></p>
<fieldset>
<legend>Operation</legend>
<p><asp:RadioButton id="RadioButton1" GroupName="ops"
runat="server"/>Addition</p>
<p><asp:RadioButton id="RadioButton2" GroupName="ops"
runat="server"/>Subtraction</p>
<p><asp:RadioButton id="RadioButton3" GroupName="ops"
runat="server"/>Multipication</p>
<p><asp:RadioButton id="RadioButton4" GroupName="ops"
runat="server"/>Division</p>
<p></p>
</fieldset>
<p><asp:Button id="Button1" runat="server" text=" Calculate "
onclick="Button1_Click" /> </p>
<p><asp:TextBox id="TextBox3" size="10" runat="server" />
</form>
</body>
</html>
为了简单起见,所有的Web页面代码都放在了一个单独的源文件里,而没有像通常那样把用于HTML显示的代码和C#(或其他兼容于.NET的语言)代码分开放到两个不同的文件里。通过这段代码我们可以看到,UI包含两个文本框,用户可以在这两个文本框里输入整数,还有4个radio button控件,供用户选择要实施的数学运算(加减乘除),另外,还有一个按钮控件,用来提交计算请求,以及一个文本框用来显示计算结果(显示精度为小数点后4位)。
|
注意 表示乘法(multiplication)的那个radio button控件旁边的Label上的文字被错写成了“Multipication”。拼写错误在测试阶段是很常见的,所以编写自动化测试套件时也要考虑到这一点。 |
这个Web程序非常简单,而待测Web程序可能要复杂得多。但是,这个程序包含所有用于描述基于脚本的UI测试所必需的主要部件。即使待测Web程序所做的是复杂的数值计算,或者从SQL数据库里提取复杂的数据,每个HTTP“请求-响应”都会导致新的页面状态,而这一点会在UI上反映出来。
本章的代码假定自动化测试套件所在的根目录包含两个叫作TheWebApp和TestAutomation的子文件夹。TheWebApp文件夹存放的是待测的Web程序(WebApp.aspx)。TestAutomation文件夹包含主测试套件(它是一个单独的网页(WebAuto.html))以及含有用于执行测试场景的JavaScript网页(TestCode.html)。
与本章内容相关,但是更为底层的一些通过UI来测试Web页面的技术将在第7章进行介绍。本章所讲的这些技术可以处理绝大部分基本的UI测试,前提是JavaScript在配置项中不能被禁止。这些技术也不能用于操纵超出浏览器客户区以外的对象(比如alert对话框)。图6-1所示的测试套件的完整代码清单见6.8节。







