Dew Review – DevExpress TestCafe

引言

TestCafe 是 DevExpress 出品的函数式 Web 测试工具。许多 Web 测试产品需要浏览器插件配合使用，而 TestCafe 则无需任何插件，即可在任何支持 HTML5 的浏览器上运行。在当今时代，这意味着“任何现代浏览器”都可以。

您还可以在三大操作系统上运行：Windows、Mac OSX 和 Linux。我一直在 Windows 8.1、Windows 10 和 OSX Yosemite 上使用 TestCafe。这种跨操作系统和跨浏览器的能力为 Web 开发人员提供了极大的灵活性，可以跨多个浏览器版本测试应用程序。所有需要的就是另一台运行所需浏览器的物理或虚拟机。

这一切听起来都很棒，但如今您可能经常听到跨浏览器、跨平台的能力。花点时间想想，这对函数式 Web 测试工具来说到底意味着什么。我可以从任何可以访问安装了 TestCafe 和待测应用程序的机器的浏览器中打开 TestCafe。所以，我可以带着我的 Ultrabook 在路上，通过公司 VPN 录制新的测试。我也可以拿出我的 iPod Touch、平板电脑或 Windows Phone 来执行测试套件。这相当强大。

入门

TestCafe 声称“函数式 Web 测试，轻松实现”。让我们看看开始使用该产品有多容易。直到上个月，我从未用过 TestCafe。事实上，我从未用过任何 Web 自动化测试产品。我很幸运地在一些理解 QA 价值的公司工作，他们聘请了专门的测试人员来发现那些能够绕过我单元测试和手动测试的 bug。

那么，像我这样的新手该如何开始呢？

DevExpress 演示页面

一个很好的起点是尝试 TestCafe 在线演示页面。有三个页面可供选择。

• TestCafe 示例页面
• ASPxGridView 演示页面
• ASPxFileManager 演示页面

我决定尝试 ASPxGridView 演示页面，所以从列表中选择它并单击“运行演示”按钮。这是我最初看到的样子。

 

我点击“开始演示”链接，然后点击网格中的一些控件来自动生成一些测试步骤。

TestCafe 将我所有的点击和按键都包含在测试步骤中（甚至包括我第五步的截屏按键 ）。现在我可以为我的测试套件添加一些断言，或者回放到目前为止已生成的步骤。

完成这个快速演示后，我感觉可以开始在线教程，并在我的开发机器上创建一些自己的测试了。

在线教程

在 TestCafe 的主页面上，有一个大按钮可以带您进入一个包含视频和分步说明的 在线教程，教您如何开始进行第一个测试。

在线教程将引导您完成创建项目、录制测试、运行测试以及最终在远程设备上运行的步骤。下面是教程步骤的完整大纲。

完成在线教程将让您了解 TestCafe 的基本功能和能力。现在是时候将这些知识提升到一个新的水平了。

AngularJS PhoneCat 教程应用

在花了一些时间使用 DevExpress 创建的网页熟悉 TestCafe 后，我想尝试使用当今最流行的 JavaScript 框架之一 AngularJS 创建的页面来创建一些简单的测试套件。在过去的 18 个月里，我主要在 Windows 桌面应用程序和 WPF 的世界里工作，所以我转向 Bing 查找如何设置和运行一个简单的 AngularJS 网站。

不出所料，Bing 将我带到了 AngularJS 网站，在那里我看到“开发”菜单下有一个 教程。该教程引导您下载他们的示例站点，使用 Node.js 和 npm 进行设置并运行。示例站点是一个简单的 Android 设备目录，包含列表视图和详细视图。

我创建了一个新的测试项目和测试套件，并为列表视图页面录制了一些测试。

到目前为止，一切都是由 TestCafe 为我们生成的。让我们花点时间分析一下我为手机列表页面创建的测试所生成的代码。当点击其中一个测试的“编辑”按钮或测试套件本身时，会出现以下 JavaScript。

"@fixture Phone List Page";
"@page https://:8000/app/index.html";

"@test"["Sort Phone List"] = {
    "1.Click select": function() {
        var actionTarget = function() {
            return $(".ng-pristine.ng-untouched.ng-valid").eq(1);
        };
        act.click(actionTarget);
    },
    '2.Click option "Alphabetical"': function() {
        act.click(":containsExcludeChildren(Alphabetical)");
    },
    "3.Click select": function() {
        act.click(".ng-untouched.ng-valid.ng-dirty.ng-valid-parse");
    },
    '4.Click option "Newest"': function() {
        act.click(":containsExcludeChildren(Newest)");
    }
};

"@test"["Search Dell"] = {
    "1.Click input": function() {
        var actionTarget = function() {
            return $(".ng-pristine.ng-untouched.ng-valid").eq(0);
        };
        act.click(actionTarget);
    },
    "2.Type in input": function() {
        var actionTarget = function() {
            return $(".ng-pristine.ng-untouched.ng-valid").eq(0);
        };
        act.type(actionTarget, "Dell");
    }
};

"@test"["Search Samsung"] = {
    "1.Click input": function() {
        var actionTarget = function() {
            return $(".ng-pristine.ng-untouched.ng-valid").eq(0);
        };
        act.click(actionTarget);
    },
    "2.Type in input": function() {
        var actionTarget = function() {
            return $(".ng-pristine.ng-untouched.ng-valid").eq(0);
        };
        act.type(actionTarget, "Samsung");
    }
};

"@test"["Search Motorola sort by name and assert first device name"] = {
    "1.Type in input": function() {
        var actionTarget = function() {
            return $(".ng-pristine.ng-untouched.ng-valid").eq(0);
        };
        act.type(actionTarget, "Motorola");
    },
    "2.Click select": function() {
        act.click(".ng-pristine.ng-untouched.ng-valid");
    },
    '3.Click option "Alphabetical"': function() {
        act.click(":containsExcludeChildren(Alphabetical)");
    },
    "4.Assert": function() {
        eq($(":containsExcludeChildren(DROID 2 Global by Motorola)").text(), "DROID™ 2 Global by Motorola", "First Moto Device");
    }
};

请注意，测试套件用 @fixture 标识，每个测试定义用 @test 标识……非常直接。每个测试步骤都是一个返回要执行操作的 UI 元素的函数，然后是对该元素执行的操作。我的最后一个测试包括一个断言作为最后一步。它检查第一个列表元素的文本是否与搜索 Motorola 并按字母顺序排序结果后预期的文本相等。

我可以在我的 Windows Phone 浏览器上访问测试套件。

我就可以开始运行测试了。

所以，这就是关于如何快速上手 TestCafe 的一些基础知识。在不了解太多信息的情况下，您就可以完成很多工作，这些信息都包含在在线教程中。要了解 TestCafe 中测试套件的一些更高级功能，请参阅在线文档中的 测试套件 API 参考指南。

功能聚焦 – 持续集成

我非常喜欢开发中的自动化构建和持续集成 (CI)。我认为这是创建高质量软件的必备条件。CI 可以为您的团队做很多事情，例如运行单元测试、代码分析以及在开发和测试环境中实现持续部署。即使是最低限度，CI 也可以提供即时反馈，告知开发人员对软件组件的某个更改是否破坏了系统中的其他内容。

将函数式 Web 测试自动化并集成到 CI 构建中具有极高的价值。这意味着 QA 发现的回归 bug 的数量将大大减少，因为在 TestCafe 中测试步骤失败的构建将永远不会部署到 QA 环境。

TestCafe 在线文档中有 专门介绍持续集成的一个章节，以及一个 CI API 参考。

一目了然，以下是为大多数服务器类型设置 CI 所需完成的步骤（摘自在线文档）。

• 将您的测试复制到服务器。
• 在服务器上设置 TestCafe。
• 编写一个 Node.js 应用程序来运行测试并记录结果。
• 从您的持续集成系统调用该应用程序。

在线文档中的示例 Node.js 应用会将结果记录到控制台。根据您的 CI 系统，您将使用此方法并通过控制台输出来获取结果，或者您可能希望将输出记录到文件。在 另一个在线文档示例中有一个文件输出的示例。以下是该示例的一个片段。

var fs = require('fs');
 
testCafe.runTests(runOptions, function () {
      testCafe.on('taskComplete', function (report) {
           log('\n' + new Date().toString() + ':\n' + JSON.stringify(report));
       });
});
 
function log(mssg) {
       fs.appendFile(LOG_FILE_NAME, mssg, function (err) {
             if (err) 
                throw err;
       });
}

我目前在家中和工作中首选的构建服务器是 JetBrains TeamCity。我过去也使用过 CruiseControl .NET。虽然基本步骤是一个好的起点，但我希望找到更详细的、针对我的 TeamCity 实现的说明。

获取支持

我想了解更多关于 TestCafe 与 TeamCity 的持续集成的信息。我该去哪里寻找？对我来说，第一步是尝试 TestCafe 网站上的 支持页面。

我保持简单，搜索“TeamCity”，只得到了一个搜索结果。幸运的是，这一个结果正是我所需要的。TestCafe 和 TeamCity 之间没有直接支持，但可以使用在线 CI 文档中详细介绍的 Node.js 应用方法进行集成。这种方法的处理方式与 Jenkins CI 服务器类似，DevExpress 的支持代表 Marion 回答了这个问题，并提供了 Jenkins 信息链接。

这些 Jenkins 步骤的 TeamCity 等效操作包括：

• 创建一个 Node.js 应用并将其放置在构建服务器上。（Jenkins 示例中的应用将起作用。）
• 在构建服务器上安装 Node.js。
• 在 TeamCity 中所需构建配置中添加一个 Windows 命令行步骤，该步骤执行 Node.js 应用。
• 将 result.xml 捕获为构建报告输出。

如果您希望对您的持续构建获得即时反馈，您可能需要限制运行的测试数量。我建议创建一个每小时或每天运行所有单元测试、集成测试和 TestCafe 函数式测试的构建。

总结

自动化您的函数式测试可以为任何产品带来巨大的价值。一旦为您的 Web 应用程序创建了完整的测试套件，它就会大大减轻 QA 部门的负担。TestCafe 的许可成本使其成为每个开发团队都应该考虑的产品，无论公司或团队规模如何。

去试试吧。有 30 天免费试用期，如果产品不满意，还有 60 天退款保证。

祝您编码愉快！

披露材料联系：我免费收到了上述一种或多种产品或服务，希望能在此博客上进行提及。无论如何，我只推荐我个人使用并认为我的读者会喜欢的产品或服务。我根据美国联邦贸易委员会的规定 16 CFR 第 255 部分：“广告中使用证明和推荐证词的指南”披露这一点。