演练：使用 Firefox 播放编码的 UI 测试

项目
08/12/2011

可以为用户界面 (UI) 创建自动测试（称为“编码的 UI 测试”）。这些测试提供对 UI 的功能测试和对 UI 控件的验证。利用编码的 UI 测试，可以测试用户界面的功能。通过使用 Microsoft Visual Studio 2010 Feature Pack 2，可以在网站上或基于 Web 的应用程序上录制 UI 操作，并创建编码的 UI 测试。可以使用 Windows Internet Explorer 录制操作，然后使用 Mozilla Firefox 浏览器播放测试。

有关以下内容的更多信息编码的 UI 测试的更多信息，请参见使用自动 UI 测试来测试用户界面。

警告

在安装完 Microsoft Visual Studio 2010 Feature Pack 2 后，若要使用 Test Package for Mozilla Firefox，您必须安装和配置 Test Helper Extension for Mozilla Firefox。有关更多信息，请参见如何：为 Mozilla Firefox 安装测试帮助器扩展.

警告

只能使用 Firefox 浏览器来播放编码的 UI 测试。无法使用 Firefox 浏览器录制网站上和 Web 应用程序上的编码的 UI 测试。

系统必备

本演练需要：

Visual Studio 2010 旗舰版、Visual Studio 2010 高级专业版或专业测试工具版 2010。
Mozilla Firefox Web 浏览器版本 3.5 或 3.6。
确保您已安装 Microsoft Visual Studio 2010 Feature Pack 2 和 Test Helper Extension for Mozilla Firefox。简介中包含了有关安装的信息。

创建 Web 应用程序

在 Visual Studio 2010 的**“文件”菜单上，单击“新建”，然后单击“项目”**。

此时将出现**“新建项目”**对话框。
在**“已安装的模板”下，展开所需的编程语言，然后单击“Web”**。
在 Web 项目类型的列表中，选择**“ASP.NET 空 Web 应用程序”**。

提示

在本演练中，您将编写少量的代码。
在**“名称”**框中键入 ColorWebApp。
在**“位置”**框中，指定要用于创建 Web 应用程序的文件夹。
选择**“创建解决方案的目录”**。
单击**“确定”**。
在解决方案资源管理器中，确认选择了新的 ColorWebApp 项目。
在**“项目”菜单上选择“添加新项”**。

将显示**“添加新项”**对话框。
在项列表中选择**“Web 窗体”**。
在**“名称”文本框中，键入 Default.aspx，然后单击“添加”**。

向 Web 应用程序添加控件

在**“解决方案资源管理器”中右击 Default.aspx，并选择“视图设计器”**。

随即显示一个空白页。
如果工具箱不可见，请单击**“视图”，再单击“工具箱”**。
从**“标准”**组中将一个 RadioButtonList 控件拖到页上。

RadioButtonList 控件随即添加到设计图面上。
在**“RadioButtonList 任务”操作标记窗格上，单击“EditItems”**链接。

随即出现**“ListItem 集合编辑器”**。

提示

通过编辑“属性”窗口上的“项”集合，也可以显示“ListItem 集合编辑器”。
单击**“添加”**添加新项。
在**“ListItem 属性”**下：
1. 将**“Text”**属性更改为 Red。
2. 将**“Selected”属性设置为“True”**。
单击**“添加”**再添加一项。
在**“ListItem 属性”下，将“Text”**属性更改为 Blue。
单击**“确定”以关闭“ListItem 集合编辑器”**。
将一个 Button 控件拖到页上。在“属性”窗口中，将**“Text”**属性更改为 Submit。
在**“文件”菜单上，单击“全部保存”**。

向 Web 应用程序添加页

在**“项目”菜单上，单击“添加新项”**。
在**“添加新项”对话框中，从模板列表中选择“Web 窗体”。在“名称”中，键入 Red.aspx，然后单击“添加”**。
在文档窗口的底部，单击**“设计”**选项卡以切换到设计视图。
将一个 Label 控件拖到页上。在“属性”窗口中，将**“Text”属性设置为 Red。将“ForeColor”属性设置为“Red”**。
在**“项目”菜单上，单击“添加新项”**。
在**“添加新项”对话框中，单击“Web 窗体”模板，并将其命名为 Blue.aspx。单击“添加”**。
在文档窗口的底部，单击**“设计”**选项卡以切换到设计视图。
将一个 Label 控件拖到页上。在“属性”窗口中，将**“Text”属性设置为 Blue。将“ForeColor”属性设置为“Blue”**。
在**“文件”菜单上，单击“全部保存”**。

向 Web 应用程序添加功能

在**“解决方案资源管理器”中右击 Default.aspx，并单击“视图设计器”**。
双击 Submit Button。 Visual Studio 即会切换到页代码，并为 Button 控件的 Click 事件创建一个主干事件处理程序。

将以下代码添加到事件处理程序中：

if (this.RadioButtonList1.SelectedValue == "Blue")
{
    Response.Redirect("Blue.aspx");
}
else
{
    Response.Redirect("Red.aspx");
}

If RadioButtonList1.SelectedValue = "Blue" Then
    Response.Redirect("Blue.aspx")
Else
    Response.Redirect("Red.aspx")
End If

在**“文件”菜单上，单击“全部保存”**。

验证 Web 应用程序是否正常运行

警告

此过程假定将 Microsoft Internet Explorer 设置为您的默认 Web 浏览器。

运行 Web 应用程序

在**“解决方案资源管理器”中右击 Default.aspx，再单击“设为起始页”**。
按 Ctrl+F5 在浏览器中运行该 Web 应用程序。您将看到第一页。
单击 Red，再单击 Submit。如果应用程序工作正常，您将转到 Label 为 Red 的页。
返回到第一页。
单击 Blue，再单击 Submit。如果应用程序工作正常，您将转到 Label 为 Blue 的页。
将您的 Web 应用程序的地址复制到剪贴板或记事本文件中。例如，该地址可能如下所示：https://localhost:<PortNumber>/ Default.aspx
关闭浏览器。

为 Web 应用程序创建并运行编码的 UI 测试

创建并运行编码的 UI 测试

在解决方案资源管理器中，右击该解决方案，单击**“添加”，然后选择“新建项目”**。

随即出现**“添加新项目”**对话框。
在**“已安装的模板”窗格中，展开“Visual C#”或“Visual Basic”，然后选择“测试”**。
在中间窗格中，选择**“测试项目”**模板。
单击**“确定”**。

在解决方案资源管理器中，名为**“TestProject1”**的新测试项目将添加到解决方案中，而且 UnitTest1.cs 或 UnitTest1.vb 文件会出现在代码编辑器中。由于本演练中不使用 UnitTest1 文件，因此可将其关闭。
在解决方案资源管理器中，右击**“TestProject1”，单击“添加”，然后选择“编码的 UI 测试”**。

此时将显示**“为编码的 UI 测试生成代码”**对话框。
选择**“录制操作、编辑 UI 映射或添加断言”选项，然后单击“确定”**。

将出现“UIMap – 编码的 UI 测试生成器”。

有关此对话框中选项的更多信息，请参见如何：创建编码的 UI 测试。
在“UIMap – 编码的 UI 测试生成器”中单击**“开始记录”**。几秒后，“编码的 UI 测试生成器”将准备就绪。
启动 Internet Explorer。
在 Internet Explorer 的地址栏中，输入您在上一过程中复制的 Web 应用程序的地址。例如：

https://localhost:<PortNumber>/ Default.aspx

（可选）可以按**“Red”、“Blue”**和浏览器的后退按钮在 Web 应用程序中导航。
关闭 Internet Explorer。
在“UIMap – 编码的 UI 测试生成器”中，单击**“生成代码”**。
在“方法名称”中，键入 SimpleWebAppTest，然后单击**“添加并生成”**。几秒后，编码的 UI 测试将出现，并且会添加到“解决方案”中。
关闭“UIMap – 编码的 UI 测试生成器”。

CodedUITest1.cs 文件将出现在代码编辑器中。

确认编码的 UI 测试在 Internet Explorer 中正常播放

在 CodedUITest1.cs 文件中，找到**“CodedUITestMethod1”方法，右击并选择“运行测试”**。

当编码的 UI 测试运行时，ColorWebApp 将可见。它会执行您在前面的过程中执行的步骤。

将属性添加到 SpecifyFirefox 播放，并重新运行编码的 UI 测试

在 CodedUITest1.cs 文件中，找到 MyTestInitialize() 方法，该方法使用 TestInitializeAttribute 取消对代码的注释并添加其值分配为“FireFox”的 CurrentBrowser 属性，如以下代码所示：

提示

（可选）可以创建一个名为 CodedUITestCurrentBrowser 的环境变量（其值为“Firefox”），然后重新启动 Visual Studio，而不是添加 BrowserWindow 属性。

////Use TestInitialize to run code before running each test 
        [TestInitialize()]
        public void MyTestInitialize()
        {        
        //    // To generate code for this test, select "Generate Code for Coded UI Test" from the shortcut menu and select one of the menu items.
        //    // For more information on generated code, see https://go.microsoft.com/fwlink/?LinkId=179463
            BrowserWindow.CurrentBrowser = "Firefox";
        }

' Use TestInitialize to run code before running each test
    <TestInitialize()> Public Sub MyTestInitialize()
        '
        ' To generate code for this test, select "Generate Code for Coded UI Test" from the shortcut menu and select one of the menu items.
        ' For more information on generated code, see https://go.microsoft.com/fwlink/?LinkId=179463
        '
        BrowserWindow.CurrentBrowser = "Firefox"


    End Sub

有关以下内容的更多信息使用 TestInitialze() 特性的更多信息，请参见如何：通过录制受测应用程序来生成编码的 UI 测试。

在**“测试”菜单上，选择“Windows”，然后单击“测试视图”。在“测试视图”中，在“测试名称列下选择“CodedUITestMethod1”，然后单击工具栏中的“运行选定内容”**。

应使用 Mozilla Firefox 运行编码的 UI 测试。

请参见

概念

使用自动 UI 测试来测试用户界面

其他资源

使用 Windows Internet Explorer 录制测试，使用 Mozilla Firefox 播放

演练：使用 Firefox 播放手动测试

如何：使用 Firefox 播放基于 Web 的编码的 UI 测试