一个基本的 MVC 应用程序和通过 Selenium Web Driver 进行的 UI 测试

SrikantSahu

4.63/5 (9投票s)

2014 年 12 月 1 日

CPOL

3分钟阅读

44232

1477

这是一个使用 C# MVC 和 jquery 开发的简单应用程序，用于基本的 CRUD 操作。可以使用 selenium web driver 对应用程序进行单元测试。

下载测试应用程序 - 111.3 KB

引言

本技巧描述了应用于员工列表的基本 CRUD 操作。然后通过 Selenium Webdriver 对相同的操作进行单元测试。

背景

该应用程序使用简单的 MVC 概念，如模型绑定到视图、将数据发布到控制器以及使用 selenium 进行基本元素发现，并通过驱动程序执行操作。selenium 驱动程序还会截取操作的屏幕截图并将其存储在指定位置。

Using the Code

附件包含一个解决方案，该解决方案应在支持 C#4.0 的 Visual Studio 中打开。

步骤

在 VS2012 或最好是支持 MVC4.0 的 IDE 中打开该解决方案。
使用 Nuget 管理器下载 Selenium 驱动程序和支持类。下载完成后，将它们附加到 TestApplication.Test 项目。
下载 web 驱动程序（Internet Explorer、Firefox、Chrome）
- Chrome - http://chromedriver.storage.googleapis.com/index.html?path=2.9/
- Internet Explorer - http://selenium-release.storage.googleapis.com/2.44/IEDriverServer_x64_2.44.0.zip
- Firefox - 默认添加
您应该已经在您的系统中安装了任何浏览器。我在这里的应用程序中使用 Internet Explorer，因为它已预先安装。 :)
该解决方案中有两个项目 - 一个是 MVC 项目，另一个是测试项目。
为了运行测试项目，web 项目应该运行 IISExpress。您也可以将其配置为在 IIS 或 VS 附带的开发服务器中运行。但这里要注意的一件事是，Selenium web 驱动程序将网站的 URL 作为输入接收。因此，请务必编辑测试项目代码以匹配 web 项目的运行 URL。
我在这里使用了 IISExpress。转到 web 项目 (MVCApplication) 属性并将 IISExpress 设置为服务器和端口。我们在这里几乎完成了。
编译项目。右键单击 MVC 项目，然后单击查看（首选浏览器）。瞧！网站启动了。
我们可以在这里执行添加/编辑/删除操作。请手动测试所有功能一次，以确认一切都已设置。
在您的C驱动器中创建两个文件夹，如下所示。 selenium 驱动程序应包含 webdriver 的路径（Internet Explorer 或 Chrome）。因此，请将您在步骤 3 中下载的 webdriver 复制到此位置。另一个文件夹将用于在 selenium 测试应用程序时存储屏幕截图。
```
private const string IE_DRIVER_PATH = @"C:\SeleniumDriver";
private const string ScreenShotLocation = @"C:\ScreenShot";
```
一旦您确定项目运行正常，现在是时候通过 selenium 进行测试了。
selenium 基本上是一个测试项目。因此，我们可以使用“运行测试”功能来运行测试用例。
转到EmployeeControllerTest文件并右键单击 -> 运行测试。这将启动选定的 web 驱动程序并运行测试场景。
如果一切顺利，浏览器将启动，并且操作将自动执行。
最后，我们可以在截图文件夹中看到截图。
目前，这是为 Internet Explorer 编写的，但可以使用相应的 web 驱动程序为 Firefox 或 Chrome 运行。