testcafe：使用node.js易于端到端的Web应用程序测试

TestCafe：简化Web应用自动化测试的Node.js框架

核心要点：

• TestCafe是一个基于Node.js的Web应用程序测试框架，简化了自动化测试的设置和运行流程。它涵盖了测试的各个阶段，包括启动浏览器、运行测试、收集结果和生成报告。
• TestCafe无需浏览器插件或其他依赖项，支持在任何流行的现代桌面或移动浏览器中进行测试。它还通过插件生态系统与云测试服务和非常规浏览器兼容。
• TestCafe提供多种测试操作，从悬停到文件上传，并具有内置的自动等待机制，无需手动添加等待或休眠。它还支持页面对象模式，该模式引入了被测页面的对象表示，并在测试代码中使用它。
• TestCafe可以与流行的任务运行器和持续集成系统集成，使其成为自动化开发工作流程中例行任务和设置项目测试的通用工具。它还可以在多个浏览器中并发运行测试，从而加快测试过程。

本文由TestCafe团队成员Vasily Strelyaev讲解这个新的基于Node.js的应用程序测试框架的优势。

前端Web开发人员知道为Web应用程序设置自动化测试有多么困难。即使安装测试框架也可能具有挑战性。许多现有解决方案都需要Selenium，它会随之带来浏览器插件和JDK。

在开始测试之前，您还需要设置测试环境，这意味着要处理配置文件。稍后，您可能会发现测试环境的某些部分（例如报告）缺失，您需要单独查找并安装它们。

TestCafe是一个新的、开源的、基于Node.js的Web应用程序端到端测试框架。

它负责所有测试阶段：启动浏览器、运行测试、收集测试结果和生成报告。它既不需要浏览器插件，也没有其他依赖项：它可以开箱即用。

在本文中，我将展示如何：

• 编写您的第一个测试
• 在本地机器和云测试服务中运行它
• 为任务运行器创建一个测试任务

安装TestCafe

首先，您需要在您的机器上安装Node.js。如果您没有，请访问其网站并下载它，或者考虑使用版本管理器（例如nvm）。

完成Node.js后，安装TestCafe只需一条命令：

<code class="language-bash">npm install -g testcafe</code>

如果您使用的是Linux/Mac，并且发现自己需要添加sudo，则应考虑修复npm权限。

编写测试

我们将为TestCafe演示页面编写一个测试。

打开您选择的代码编辑器并创建一个新的test.js文件。

首先，添加一个指向http://devexpress.github.io/testcafe/example/演示网页的fixture声明：

<code class="language-bash">npm install -g testcafe</code>

然后，添加一个测试：

<code class="language-javascript">fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;</code>

现在让我们的测试将文本输入“开发人员姓名”输入字段，然后单击“提交”按钮：

<code class="language-javascript">fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    // 我们稍后将添加测试代码
});</code>

在这里，我们使用了typeText和click测试操作。TestCafe提供了许多这样的操作，从悬停到文件上传。

让我们回到我们的测试。提交按钮会将您重定向到一个显示“感谢您，%username%！”的页面。

我们将检查此页面上的文本是否包含正确的名称：

<code class="language-javascript">fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button');
});</code>

为此，我们创建一个选择器来标识文章标题。在测试操作之后，我们添加一个断言来检查文本是否显示“感谢您，Peter Parker！”

页面对象

TestCafe团队鼓励在测试中使用页面对象模式。使用此模式，您可以引入被测页面的对象表示，并在测试代码中使用它。让我们看看我们如何做到这一点。

创建一个新的page-object.js文件并声明一个Page类：

<code class="language-javascript">import { Selector } from 'testcafe';

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

const articleHeader = Selector('#article-header');

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button')
        .expect(articleHeader.innerText).eql('Thank you, Peter Parker!');
});</code>

到目前为止，我们的测试与三个页面元素交互：开发人员姓名输入、提交按钮和“感谢您”标题。因此，我们将三个选择器添加到Page类：

<code class="language-javascript">export default class Page {
    constructor () {
    }
}</code>

在测试文件中，引用page-object.js，创建Page类的实例，并在测试操作中使用其字段：

<code class="language-javascript">import { Selector } from 'testcafe';

export default class Page {
    constructor () {
        this.nameInput     = Selector('#developer-name');
        this.submitButton  = Selector('#submit-button');
        this.articleHeader = Selector('#article-header');
    }
}</code>

使用页面对象模式，您可以将所有选择器保存在一个位置。当被测网页更改时，您只需要更新一个文件——page-object.js。

在本地运行测试

要在本地机器上运行此测试，您只需要一条命令：

<code class="language-javascript">import Page from './page-object';

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

const page = new Page();

test('My first test', async t => {
    await t
        .typeText(page.nameInput, 'Peter Parker')
        .click(page.submitButton)
        .expect(page.articleHeader.innerText).eql('Thank you, Peter Parker!');
});</code>

TestCafe将自动查找并启动Google Chrome并运行测试。

同样，您可以通过简单地指定其名称来在Safari或Firefox中运行此测试。

您可以使用testcafe --list-browsers命令查看TestCafe在您的机器上检测到的浏览器列表：

测试运行报告

测试完成后，TestCafe将报告输出到控制台：

如果测试失败，TestCafe将提供一个带有调用堆栈的调用站点，显示错误发生的位置：

您可以从五种内置报告格式中选择，或者搜索添加对不同格式支持的插件。

从IDE启动测试

您可以使用专用插件从流行的IDE（如VS Code或SublimeText）运行TestCafe测试：

在云测试服务中运行测试

虽然TestCafe可以开箱即用地在任何流行的现代桌面或移动浏览器中运行测试，但它也拥有一个与云测试服务、无头浏览器和其他非常规浏览器兼容的插件生态系统。

在本节中，我们将在SauceLabs（一个流行的自动化测试云）上运行测试。它托管数百台具有不同操作系统和浏览器的虚拟机。

要在SauceLabs上运行测试，您需要一个SauceLabs帐户。如果您没有，请访问https://saucelabs.com/并创建一个新帐户。您将获得必要的凭据：用户名和访问密钥。

现在，您需要安装与SauceLabs兼容的TestCafe插件：

<code class="language-bash">npm install -g testcafe</code>

由于此插件安装到本地目录，因此您还需要在本地安装TestCafe：

<code class="language-javascript">fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;</code>

在使用SauceLabs插件之前，请按照SauceLabs文档中的说明将用户名和访问密钥保存到环境变量SAUCE_USERNAME和SAUCE_ACCESS_KEY中。

现在，您可以在云中的SauceLabs虚拟机上运行您的测试：

<code class="language-javascript">fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    // 我们稍后将添加测试代码
});</code>

您可以通过运行以下命令查看SauceLabs上可用的浏览器和虚拟机的完整列表：

<code class="language-javascript">fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button');
});</code>

向任务运行器添加任务

当您需要自动化开发工作流程中的例行任务时，任务运行器非常有用。

与任务运行器的集成是在开发时运行TestCafe测试的良好解决方案。这就是为什么TestCafe社区开发了将它与最流行的Node.js任务运行器集成的插件。

在本教程中，我们将使用Gulp.js。

如果您在机器上没有安装Gulp.js，请使用以下命令在全局和本地安装到项目中：

<code class="language-javascript">import { Selector } from 'testcafe';

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

const articleHeader = Selector('#article-header');

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button')
        .expect(articleHeader.innerText).eql('Thank you, Peter Parker!');
});</code>

安装将TestCafe与Gulp.js集成的Gulp插件：

<code class="language-javascript">export default class Page {
    constructor () {
    }
}</code>

如果您在项目中有一个Gulpfile.js文件，请向其中添加以下任务。否则，使用此任务创建一个新的Gulpfile.js：

<code class="language-javascript">import { Selector } from 'testcafe';

export default class Page {
    constructor () {
        this.nameInput     = Selector('#developer-name');
        this.submitButton  = Selector('#submit-button');
        this.articleHeader = Selector('#article-header');
    }
}</code>

此任务在Chrome和Firefox中运行test.js文件中的测试。要了解有关Gulp插件API的更多信息，请参阅其GitHub页面。

您现在可以从命令行运行此任务，如下所示：

<code class="language-javascript">import Page from './page-object';

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

const page = new Page();

test('My first test', async t => {
    await t
        .typeText(page.nameInput, 'Peter Parker')
        .click(page.submitButton)
        .expect(page.articleHeader.innerText).eql('Thank you, Peter Parker!');
});</code>

在持续集成平台上进行测试

TestCafe提供强大的命令行和编程接口，使其易于与大多数现代CI系统一起使用。

测试运行报告可以用大多数流行的CI系统理解的JSON、xUnit和NUnit格式呈现。

TestCafe文档包含一个说明如何在Travis CI上为GitHub项目设置测试的配方。

总结

在本文中，我演示了如何从您的第一个TestCafe测试开始，最终将e2e测试集成到项目的流程中。您可以亲身体验使用TestCafe测试Web应用程序是多么容易。

如果您对TestCafe有任何疑问，请在下方发表评论，在论坛上提问或访问GitHub页面。

TestCafe常见问题解答

TestCafe与其他端到端测试工具有何不同？

TestCafe是一个独特的端到端测试工具，因为它不需要WebDriver或任何其他测试软件。它运行在Node.js上，并使用代理将脚本注入浏览器。这允许它自动化用户操作并断言页面上的元素按预期运行。它支持在多个浏览器和平台（包括移动设备）上进行测试。它还提供自动等待、实时诊断和并发测试执行等功能。

我可以将TestCafe用于移动测试吗？

是的，TestCafe支持移动测试。它可以在iOS和Android设备以及移动模拟器和仿真器上运行测试。您还可以在桌面浏览器中模拟移动设备。这使其成为测试响应式Web应用程序的通用工具。

TestCafe如何处理异步操作？

TestCafe具有内置的自动等待机制。这意味着您无需手动向测试添加等待或休眠。TestCafe会在测试开始之前和每次操作之后自动等待页面加载和XHR。它还在与元素交互之前等待元素可见。

我可以同时在多个浏览器中运行TestCafe测试吗？

是的，TestCafe允许您同时在多个浏览器中运行测试。这可以大大加快您的测试过程。您可以在开始测试时指定并发测试运行的数量。

如何调试TestCafe中的测试？

TestCafe提供了几种调试测试的方法。它包括一个调试模式，该模式会暂停测试并允许您查看此时被测页面的状态。它还提供实时测试状态报告、屏幕截图和测试会话的视频录制。

我可以将TestCafe用于跨浏览器测试吗？

是的，TestCafe支持跨浏览器测试。它可以在多个浏览器中同时运行测试，无论是在本地机器上还是在远程设备上。它支持所有流行的浏览器，包括Chrome、Firefox、Safari和Internet Explorer。

TestCafe如何处理页面导航？

TestCafe自动处理页面导航。在测试开始之前和每次导致新页面的操作之后，它都会等待页面加载。这意味着您无需添加任何特殊代码来处理页面导航。

我可以将TestCafe与持续集成系统一起使用吗？

是的，TestCafe可以与流行的持续集成系统（如Jenkins、TeamCity、Travis等）集成。它可以生成多种格式的报告，包括xUnit，这些系统可以使用这些报告。

如何在TestCafe中处理文件上传？

TestCafe提供了一个用于文件上传的特殊操作。您可以使用t.setFilesToUpload操作来上传文件。此操作采用一个标识文件输入的选择器和一个指定要上传文件的路径的字符串。

我可以将TestCafe用于性能测试吗？

虽然TestCafe主要用于功能测试，但它也可以用于性能测试。您可以使用它来测量操作完成、页面加载和AJAX请求完成所需的时间。但是，对于更详细的性能测试，您可能需要使用专用的性能测试工具。

This revised output maintains the original image locations and formats while paraphrasing the content for originality. It also uses consistent heading styles and improves the overall structure for better readability.

以上是testcafe：使用node.js易于端到端的Web应用程序测试的详细内容。更多信息请关注PHP中文网其他相关文章！