node.js web框架_TestCafe：使用Node.js更轻松地进行端到端Web应用测试

node.js web框架

In this article, TestCafe team member Vasily Strelyaev explains the benefits of this new Node.js-based app testing framework.

在本文中，TestCafe团队成员Vasily Strelyaev解释了这种基于Node.js的新应用测试框架的好处。

Front-end web developers know how difficult it is to set up automated testing for a web app.Even installing a testing framework can be challenging. Many existing solutions require Selenium, which brings browser plugins and JDK with it.

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

Before you start testing, you also need to set up a test harness, which means dealing with configuration files. Later, you can discover that some parts of the harness — such as reporting — are missing and you need to find and install them separately.

在开始测试之前，您还需要设置一个测试工具，这意味着要处理配置文件。 稍后，您会发现线束的某些部分(例如报告)丢失了，您需要单独查找和安装它们。

TestCafe is a new, open-source, Node.js-based end-to-end testing framework for web apps.

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

It takes care of all testing stages: starting browsers, running tests, gathering test results, and generating reports. And it neither needs browser plugins nor has other dependencies: it just works out of the box.

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

In this article, I’ll show how to

在本文中，我将展示如何

• write your first test
  写你的第一个测试
• run it on your local machine and in a cloud testing service
  在本地计算机和云测试服务中运行它
• create a testing task for a task runner
  为任务运行者创建测试任务

安装TestCafe (Installing TestCafe)

First, you need to have Node.js installed on your machine. If you don’t, go to its website and download it, or consider using a version manager such as nvm.

首先，您需要在计算机上安装Node.js。 如果不这样做，请访问其网站并下载，或者考虑使用版本管理器(例如nvm) 。

Once you’re done with Node.js, installing TestCafe is a matter of one command:

使用完Node.js之后，安装TestCafe只需一个命令即可：

npm install -g testcafe

If you’re on Linux/Mac and you find yourself needing to add sudo, you should consider fixing up your npm permissions.

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

编写测试 (Writing a Test)

We’ll write a test for the TestCafe demo page.

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

Open a code editor of your choice and create a new test.js file.

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

First, add a fixture declaration that targets the demo web page at http://devexpress.github.io/testcafe/example/:

首先，在http://devexpress.github.io/testcafe/example/上添加针对演示网页的夹具声明：

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

Then, add a test:

然后，添加一个测试：

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

test('My first test', async t => {
    // We will add test code later
});

Now let our test type text into the Developer Name input and click the Submit button:

现在，让我们的测试类型文本进入“开发人员名称”输入，然后单击“提交”按钮：

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');
});

Here we used the typeText and click test actions. TestCafe provides a dozen of them, from hover to file upload.

在这里，我们使用typeText并单击测试操作。 从悬停到文件上传 ，TestCafe提供了12种。

Let’s get back to our test. The Submit button redirects you to a page that says ‘Thank you, %username%!’.

让我们回到测试中。 提交按钮会将您重定向到一个页面，上面写着“谢谢您，％username％！”。

We’ll check that text on this page contains the right name:

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

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!');
});

To do this, we create a selector that identifies the article header. After test actions, we add an assertion that checks if the text says ‘Thank you, Peter Parker!’

为此，我们创建一个选择器来标识文章标题。 经过测试后，我们添加了一个断言，用于检查文本是否显示“谢谢，彼得·帕克！”

页面对象 (Page Object)

The TestCafe team encourages using the Page Object pattern in tests. With this pattern, you introduce object representation of the tested page and use it in test code. Let’s look at how we do this.

TestCafe团队鼓励在测试中使用Page Object模式 。 通过这种模式，您可以介绍测试页面的对象表示形式，并将其用于测试代码中。 让我们看看我们如何做到这一点。

Create a new page-object.js file and declare a Page class:

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

export default class Page {
    constructor () {
    }
}

Our test interacts with three page elements so far: the Developer Name input, the Submit button, and the ‘Thank you’ header. So, we add three selectors to the Page class:

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

import { Selector } from 'testcafe';

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

In the test file, reference page-object.js, create an instance of the Page class, and use its fields in test actions:

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

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!');
});

With the page object pattern, you keep all selectors in one place. When the tested web page changes, you will need only to update one file — page-object.js.

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

在本地运行测试 (Running Tests Locally)

To run this test on a local machine, you need only one command:

要在本地计算机上运行此测试，只需一个命令：

testcafe chrome test.js

TestCafe will automatically find and launch Google Chrome and run the test.

TestCafe将自动找到并启动Google Chrome浏览器并运行测试。

In the same manner, you can run this test in, say, Safari or Firefox by simply specifying their name.

以相同的方式，您只需指定名称即可在Safari或Firefox中运行此测试。

You can use the testcafe --list-browsers command to see the list of browsers TestCafe detects on your machine:

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

试运行报告 (Test Run Report)

After testing is finished, TestCafe outputs a report to the console:

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

If a test fails, TestCafe provides a call site with callstack that shows where the error occurred:

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

You can choose from five built-in report formats or search for a plugin that adds support for a different format.

您可以从五种内置报告格式中进行选择，或者搜索增加了对另一种格式的支持的插件。

从IDE启动测试 (Launching Tests from an IDE)

You can run TestCafe tests from popular IDEs like VS Code or SublimeText using a dedicated plugin:

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

在云测试服务中运行测试 (Running Tests in a Cloud Testing Service)

While TestCafe can run tests in any popular modern desktop or mobile browser out of the box, it also has an ecosystem of plugins that work with cloud testing services, headless and other non-conventional browsers.

尽管TestCafe可以开箱即用地在任何流行的现代台式机或移动浏览器中运行测试，但它也具有可与云测试服务，无头和其他非常规浏览器一起使用的插件生态系统 。

In this section, we’ll run tests on SauceLabs, a popular automated testing cloud. It hosts hundreds of virtual machines with different operating systems and browsers.

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

To run tests on SauceLabs, you need a SauceLabs account. If you don’t have one, visit https://saucelabs.com/ and create a new account. You’ll be given the necessary credentials: a username and an access key.

要在SauceLabs上运行测试，您需要一个SauceLabs帐户。 如果您没有，请访问https://saucelabs.com/并创建一个新帐户。 系统会为您提供必要的凭据：用户名和访问**。

Now you need to install the TestCafe plugin that works with SauceLabs:

现在，您需要安装与SauceLabs一起使用的TestCafe插件：

npm install --save-dev testcafe-browser-provider-saucelabs

Since this plugin is installed to a local directory, you also need to have TestCafe installed locally:

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

npm install --save-dev testcafe

Before using the SauceLabs plugin, save the username and access key to environment variables SAUCE_USERNAME and SAUCE_ACCESS_KEY as described in SauceLabs documentation.

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

Now you can run your test on SauceLabs virtual machines in the cloud:

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

testcafe "saucelabs:[e-mail]:Windows 10" test.js

You can view the full list of browsers and virtual machines available on SauceLabs by running

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

testcafe -b saucelabs

将任务添加到任务运行器 (Add a Task to a Task Runner)

Task runners are quite useful when you need to automate routine tasks in your development workflow.

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

Integration with a task runner is a good solution to run TestCafe tests at development time. That’s why the TestCafe community developed plugins that integrate it with the most popular Node.js task runners.

与任务运行器集成是在开发时运行TestCafe测试的很好的解决方案。 因此，TestCafe社区开发了将其与最受欢迎的Node.js任务运行器集成的插件 。

In this tutorial, we’ll use Gulp.js.

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

If you don’t have Gulp.js installed on your machine, use the following commands to install it both globally and locally to the project:

如果您的计算机上未安装Gulp.js，请使用以下命令将其全局和本地安装到项目中：

npm install -g gulp
npm install --save-dev gulp

Install a Gulp plugin that integrates TestCafe with Gulp.js:

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

npm install --save-dev gulp-testcafe

If you have a Gulpfile.js file in your project, add the following task to it. Otherwise, create a new Gulpfile.js with this task:

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

const gulp     = require('gulp');
const testcafe = require('gulp-testcafe');

gulp.task('run-testcafe-tests', () => {
    return gulp
        .src('test.js')
        .pipe(testcafe({ browsers: ['chrome', 'firefox'] }));
});

This task runs tests from the test.js file in Chrome and Firefox. To learn more about the Gulp plugin API, see its GitHub page.

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

You can now run this task from the command line as follows:

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

gulp run-testcafe-tests

在持续集成平台上进行测试 (Testing on a Continuous Integration Platform)

TestCafe provides powerful command line and programming interfaces that make it easy to work with most of modern CI systems.

TestCafe提供了功能强大的命令行和编程界面，可轻松与大多数现代CI系统一起使用。

Test run reports can be presented in the JSON, xUnit and NUnit formats understood by most of the popular CI systems.

可以以大多数流行的CI系统理解的JSON ， xUnit和NUnit格式显示测试运行报告。

TestCafe documentation contains a recipe that describes how to set up testing for a GitHub project on Travis CI.

TestCafe文档包含一个食谱 ，该食谱描述了如何在Travis CI上为GitHub项目设置测试。

摘要 (Summary)

In this article, I’ve shown how to start from your first TestCafe test and end up with e2e testing integrated into your project’s workflow. You could see for yourself how easy it is to test web applications with TestCafe.

在本文中，我展示了如何从您的第一个TestCafe测试开始，到如何将e2e测试集成到您项目的工作流程中。 您可以亲眼看到使用TestCafe测试Web应用程序有多么容易。

If you have questions about TestCafe, post a comment below, ask on the forum or visit the GitHub page.

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

翻译自: https://www.sitepoint.com/testcafe-easier-end-end-web-app-testing-node-js/

node.js web框架