此文章由机器翻译。

新型应用程序

现代网站和应用中的端到端测试

Rachel Appel

Rachel Appel软件是比以往任何时候都更加复杂。无论是为 Windows、 iOS、 Web、 安卓、 物联网 (物联网) 设备或 smartwatch 应用程序 — — 软件做了很多。因此,该软件必须是准确的。它必须按照规格工作。所以它是开发人员能够测试他们的软件。

如果没有测试,它很难验证代码是否按它的应该。它也是难隔离代码以修复 bug。虽然它很重要要测试,它也是重要测试合适的理由,不只是为测试或吹嘘的缘故权利约 100%覆盖。小小的智能考验总是战胜无意义的测试覆盖整个代码库。本文将介绍如何向单元测试服务器和客户端代码,以及如何自动 UI 测试与编码的 UI 测试 (CUITs)。这三个基本领域的测试将测试您的软件功能的主要方面。

单位由单位

单元测试可帮助减少错误,并提供他们正在测试的代码文件。回归、 用户验收、 UI 自动化和其他质量保证措施也是重要的。通常的预算很紧和团队很小,很多时候你不得不选择了另一个。这得由你来决定多少质量保证进入您的应用程序。在最起码,单元测试和 UI 测试将有助于保持高质量。

那里有很多的开源和商业单元测试软件包可用。很多流行的测试套件发布 NuGet 程序包,所以您可以轻松地下载他们直接到 Visual Studio 中。最受欢迎的 C# 测试框架中的一些 xUnit,nUnit,MSTest 和 TestDriven.NET。 对于 JavaScript 测试,有量子系统,JSUnit 和 YUI 测试。

单元测试通常是默认类型的测试,而其他的方式来测试您的软件。那些包括 UI 自动化或 CUITs、 用户验收测试、 回归测试、 集成测试和所有类型的专业测试。维基百科列出几十个软件测试的方法 bit.ly/14066q8

良好的单元测试只测试每个测试的一个函数。单一责任原则 (SRP) 是确保您的代码是模块化的途径之一。SRP 意味着代码集中在一件事和那件事做得好,无论是执行代码还是测试本身。单元测试不应该直接访问数据库、 文件或其他资源。他们应该依靠模拟这些资源的模仿对象,只是与任何其他代码,单元测试应该是小的。

另一种方式来编写好的测试是通过遵循测试驱动开发 (TDD) 原则。TDD 是一种开发代码周围一套测试方法。开发人员创建失败,然后写入适当的代码,以符合对测试、 重构的测试。我叫它"红色,绿色,重构"。这项技术可帮助您结构和一贯地编写代码。一致性是在软件开发中的一种美德。虽然 TDD 是超出了这篇文章的范围,看看它,尝试与您的团队。

这篇文章将涵盖单元测试 xUnit 与量子系统。我也会看看 UI 自动化测试与 CUITs。这种方式你可以熟悉了你需要的测试最重要的类型。

用 xUnit 测试服务器端 C#

你会高兴地发现它是多么容易将一个单元测试包集成到 Visual Studio。很多框架都可用作 NuGet 程序包。例如,如果您想要使用 xUnit,只是推出 NuGet 程序包管理器,搜索"xUnit,"然后单击安装核心软件包和其转轮测试包。你可以使用 xUnit 测试 ASP.NET 网站,Windows 窗体、 Windows 演示文稿基础 (WPF)、 Windows 应用商店和 Windows Phone 的应用程序,再加上任何一种语言,将编译为 Microsoft 中间语言或 MSIL。你能甚至单位测试 F # 使用 xUnit — — 这就是所有微软技术的开发。

若要使用 xUnit,请将一个类库项目添加到解决方案中。为简单起见,您可能想要坚持共同的命名约定和使用类似于 ProjectName.Tests,在"项目名称"是您要测试的项目的名称。在测试中,请确保您添加到该项目的引用。然后将其命名并将类文件添加到测试和一个类,用于测试的东西。

图 1 与一项测试,以及在它测试的代码显示一个 xUnit 测试类的示例。中的代码图 1 确定基于他们花了多少客户状态。在测试图 1 确保代码是正确的。

图 1 测试 xUnit 代码示例

// Unit tests that test customer-related features
public class CustomerTests
{
  [Theory]
  [InlineData(99D)]
  [InlineData(1001D)]
  [InlineData(5001D)]
  [InlineData(10001D)]
  public void VerifyCustomerStatus(double TotalSpent) {
    // Arrange           
    var status = new Status();
    var testStatus=OrderForm.Models.Status.StatusLevel.None;
    // Act
    var currentStatus = status.GetCurrentStatus(TotalSpent);
    // Assert           
    Assert.True(testStatus <= currentStatus);
  }
}
// Logic that sets the customer status
public class Status
{
  public StatusLevel GetCurrentStatus(decimal ForAmount)
  {
    var level = StatusLevel.None;
    var amt = Convert.ToInt32(ForAmount);
    if (amt > 1000 && amt <= 5000) { level = StatusLevel.Silver; }
    else if (amt > 5000 && amt <= 10000) { level = StatusLevel.Gold; }
    else if (amt > 10000) { level = StatusLevel.Platinum; }
    return level;
  }
  public enum StatusLevel
  {
    None = 0,
    Silver = 1,
    Gold = 2,
    Platinum = 3
  }          
}

在单元测试方法中,会发现最受欢迎的排列、 行事,断言 (或 AAA) 模式,还表现在图 1。首先安排的测试条件,然后采取行动的条件了,最后,断言输出。

你可以使用 aaa 级的东西,但如果你想要高质量的软件,您必须具有有意义的试验。测试框架往往会来一个舰队的断言,例如平等、 平等,同样,NotSame,包含、 DoesNotContain、 InRange、 IsNotEmpty 和其他几个人。当然,确切的命名或方法不会是相同的但每个框架给了你几个可供选择。

你可能已经注意到 [理论] 和 [InlineData] 属性装饰测试类,而不是受欢迎的 [测试] 属性。当试验方法不具有任何参数时,在 xUnit 您可以使用 [事实] 属性来标记该方法作为一种测试方法。这些数据注释让你接受你看到在测试方法签名中的 TotalSpent 参数的测试图 1。一个测试将运行每个 [InlineData] 一种方法,属性和视觉工作室文本资源管理器中显示的每个测试结果,如中所示图 2

VerifyCustomerStatus 测试方法与测试资源管理器中的四个数据点
图 2 VerifyCustomerStatus 测试方法与测试资源管理器中的四个数据点

你可以使用上下文菜单测试中测试资源管理器在任何时间以显示要运行、 调试、 分析和配置文件的选项。每当您更改代码或测试,您必须编译并运行测试。您可以设置选项以在每次生成上自动运行测试,通过去视觉工作室测试菜单中,选择测试设置,然后选择运行后生成的测试。

你不会得到远与单元测试之前,你撞了 mock 对象的需要。一般来说,当你尝试测试数据库,你不想修改实际的实时数据。因此,您可以使用嘲笑作为一种方式来模拟实际的数据库、 Web 服务或业务对象。嘲讽是超出了这篇文章的范围,所以当你到达那个点,搜索网站,寻找最小起订量、 Telerik JustMock 或犀牛般的嘲弄。所有都是最受欢迎的嘲笑与完整文档和支持软件标题。

测试客户端 JavaScript 与量子系统

量子系统是一个客户端 JavaScript 的测试框架。它是轻量级、 简单和容易使用。量子系统用于测试任何 JavaScript 或 jQuery。因为你在处理客户端 JavaScript,可能发生的事情你不需要测试的 UI 中活动。你可以跳到审美的 UI 的链接悬停或调整等方面。您还可以使用 UI 自动化测试,以涵盖 UI 测试。您的业务规则、 API 代码和服务器端验证都必须有良好的覆盖。执行逻辑和验证任何 JavaScript 需要测试,以及。

与直接与 Visual Studio 集成的已编译的语言测试,不同的是,你得打造您的量子系统测试工具。它是相当容易的不过,和需要大约 17 行代码,您可以从复制图 3

图 3 量子系统 HTML 测试工具

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Qunit Unit Testing</title>
  <link href="Content/qunit.css" rel="stylesheet" />
</head>
<body>
  <h1 id="qunit-header">QUnit Test Suite</h1>
  <h2 id="qunit-banner"></h2>
  <div id="qunit-testrunner-toolbar"></div>
  <h2 id="qunit-userAgent"></h2>
  <ol id="qunit-tests"></ol>
  <script src="Scripts/qunit.js"></script>      
  <script src="Scripts/logic.js"></script>
  <script src="Scripts/tests.js"></script>   
</body>
</html>

图 3 显示 qunit.css,然后 qunit.js、 logic.js 和 tests.js 的引用。 顺序非常重要。之前你的逻辑和你的逻辑,在试验前,必须先加载 qunit.js。您可以命名 logic.js 任何你想要的因为它是您自己的代码。可能有多个.js 文件 qunit.js 和测试之间。测试线束页的 HTML 结构包含几个标题的标签,以及有序的列表,其中显示单独的测试结果。这些所有的样式都是在 qunit.css 文件中。作为最佳实践,把 JavaScript 引用之前关闭该 Web 页的末尾仅 < / 体 > 标记,如中所示图 3

若要测试与量子系统,可以将测试放在一个.js 文件,并命名为 tests.js。 在这里,是函数的对量子系统的测试功能,接受要调用的字符串名称和一个匿名函数,实际执行的测试的调用。传递到测试函数的名称显示在测试运行中测试的名称作为示图 4。而不是传递参数来测试,使用 JavaScript 的动态性质来调用的代码问题多次使用多个断言。图 5 显示了在 VerifyCustomerStatus 中的多个输出断言测试测试功能。

图 4 的量子系统测试,getCurrentStatus 函数及逻辑本身在 JavaScript 中

// Tests to test customer statuses
test('VerifyCustomerStatus', function () {
  var silver = getCurrentStatus(1001);
  equals(silver, "Silver", "Pass");
  var gold = getCurrentStatus(5001);
  equals(gold, "Gold", "Pass");
  var platinum = getCurrentStatus(10001);
  equals(platinum, "Platinum", "Pass");
})
// Logic to set customer statuses
function getCurrentStatus(amt) {
  if (amt > 1000 && amt <= 5000) { return "Silver"; }
  else if (amt > 5000 && amt <= 10000) { return "Gold"; }
  else if (amt > 10000) { return "Platinum"; }
  return "None";
}

的浏览器中的量子系统测试的结果
图 5 的浏览器中的量子系统测试的结果

如果您正在编写 Windows 应用商店或 Windows Phone 应用程序在使用 Windows 库对 JavaScript (WinJS),不要害怕。还有你可以在下载的 qUnitMetro bit.ly/1F2RsO7。该程序包允许在应用程序存储容器中运行,就像它在 Web 页中的量子系统。编码和您编写测试的方法是完全相同的量子系统,因为它的确是量子系统。

测试与 CUITs UI

当你需要自动化测试本机教科文组织统计研究所时,转到 CUITs。CUITs 似乎是在 Visual Studio 中不为人知的测试功能。为 Web、 Windows 应用商店和 Windows Phone 的应用程序,您可以在 Visual Studio 中创建 CUITs。视觉工作室 CUITs 可以测试 Windows 上的任何用户界面。你甚至不需要源代码进行测试的 UI。您可以配置测试,以任何正在运行的程序的目标。

有您的基本程序 Ui 的 Visual Studio 模板 — — Web、 Windows 应用商店和 Windows Phone。当从这些模板之一创建项目时,Visual Studio 将推出你直接进入第一次的对话窗口,所示图 6,询问您是否要记录新的测试或编辑现有的。选择"记录的操作,编辑 UI 映射或添加断言,",将出现一个工具窗口 (请参阅图 7)。这相同的对话框和工具窗口将出现每次向项目中添加一个新的电路文件 (文件 |新的项目)。在这一点上,您可以单击记录,然后再开始与您的 Web 页或应用程序用户界面进行交互。

对话框 Visual Studio 显示记录或编辑编码的 UI 测试
图 6 对话框 Visual Studio 显示记录或编辑编码的 UI 测试

的工具,记录并编辑断言
图 7 的工具,记录并编辑断言

当你完成后时,单击窗口的底部添加和生成按钮 (请参阅图 8),添加详细的描述性元数据,并让 Visual Studio 生成的代码。

对话框,创建编码的 UI 测试
图 8 对话框,创建编码的 UI 测试

当您创建编码的 UI 项目,并将编码的 UI 测试添加到它时,Visual Studio 会生成大量的代码。然而,Visual Studio 是了解它是如何生成的测试代码相当聪明的。输出是干净的尤其是对生成的代码。Visual Studio 生成的代码通过使用某个特定的程序时记录你的行动。如果您单击工具箱中的记录图 7,这台录音机跟踪你做什么来生成代码,执行相同的操作。你可以自由地写这段代码,但很容易产生。

一旦你完成编码的 UI 测试生成器,Visual Studio 将创建几个文件,第一个是编码 UI 测试。这是一个.cs 文件,包含一类具有执行相同的步骤,用户要使用的用户界面的方法。其他文件是映射文件:UIMap.uitest、 UIMap.cs 和 UIMap.designer.cs。 与生成太多代码而闻名的传统 Visual Studio 设计器,不同的是这一表现得更好。它很容易修改测试没有设计师挡你的路。在任何时候,您可以通过右键单击.uitest 文件,并从选项中选择编辑编码的 UI 测试生成器与修改设计器。这将启动工具箱中,你看到在图 7。再次,你也可以手动编写您自己的测试。在决定之前,看看一些执行这四个测试所生成的代码:

  1. 它测试正确地创建一个新的客户
  2. 它测试而无需输入一个名称创建一个新的客户
  3. 它测试而无需输入地址创建一个新的客户
  4. 它测试创建一个新的客户通过输入邮政编码无效格式

您可以在设计器文件中,找到四个测试和编码的 UI 测试类中的代码调用它们中继承,正如你可以看到在图 9

图 9 的编码的 UI 测试和地图的设计器文件的部分内容

// In the Coded UI Test C# file
[CodedUITest]
  public class CodedUITest1
  {
    [TestMethod]
    public void CodedUITestMethod1()
    {
      this.UIMap.CreateNewCustomerCorrectly();
      this.UIMap.CreateNewCustomerWithoutName();
      this.UIMap.CreateNewCustomerWithoutAddress();
      this.UIMap.CreateNewCustomerWihtoutValidPostalCode();       
    }
    // Some other framework code for Coded UI
  }
// In the Coded UI UIMap.Designer.cs file
public void CreateNewCustomerWithoutName()
    {
      #region Variable Declarations
      // Click 'Create New' link
      Mouse.Click(uICreateNewHyperlink, new Point(51, 8));
      // Type '' in 'Name' text box
      uINameEdit.Text = this.CreateNewCustomerMissingNameParams.UINameEditText;
      // Type '{Tab}' in 'Name' text box
      Keyboard.SendKeys(uINameEdit,
        this.CreateNewCustomerMissingNameParams.UINameEditSendKeys,
        ModifierKeys.None);
      // Type '234 Lane St' in 'Address' text box
      uIAddressEdit.Text =
        this.CreateNewCustomerMissingNameParams.UIAddressEditText;
      // Type '{Tab}' in 'Address' text box
      Keyboard.SendKeys(uIAddressEdit,
        this.CreateNewCustomerMissingNameParams.UIAddressEditSendKeys,
        ModifierKeys.None);
  }
}

编码的 UI 测试,就像任何其他测试。它们就像一个用户与 UI 交互。幸运的是,编码的 UI 工具非常适合记录你的行动和生成代码做同样的事情。在任何时候,您可以抛弃和再生试验,或者修改代码,不用担心。也像单元测试,你可以从 Visual Studio 测试资源管理器运行编码的 UI 测试。它们会显示在单元测试。

提高你的软件质量

有真正的好处,从各种形式的测试。很重要的是要测试即使是很小的 Windows 应用商店或 Windows Phone 的应用程序,尤其是如果你卖他们的应用程序存储区中。测试应用程序的可靠工作的应用程序 — — 他们有文件和审计线索。

你可以像 xUnit 和量子系统和使用自动化测试 Web 或本机应用程序与 CUITs 库的单元测试。这并不是提及其他类型的重要测试 (例如用户验收测试、 集成测试、 系统测试等等。一旦你有了一套可靠的单位和用户界面中添加这些测试将大大提高你的软件的质量。


Rachel Appel是一名顾问、作家、导师和前 Microsoft 员工,在 IT 行业有 20 多年的经验。她常在 Visual Studio Live!、DevConnections、Mix 等顶级行业大会上发言。她的专业是开发侧重于 Microsoft 系列开发技术和开放式 Web 并且符合业务和技术需要的解决方案。有关 Appel 的详细信息,请访问她的网站 rachelappel.com

衷心感谢以下技术专家对本文的审阅:奥伦 Novotony