用TestCafe进行端到端网站测试

本文由chaussen在众成翻译平台上翻译。

TestCafe是一个端到端浏览器测试工具。文字输入、按钮点击、结果确认，轻松编写功能测试。

去年秋天，DevExpress公司发布了其端到端浏览器测试工具TestCafe的核心库。这个工具作为一个Node.js平台上的开源测试框架，涵盖了从自动化框架的搭建到持续集成(Continuous Integration)平台的协作等多个方面，旨在全面简化端到端测试。

在这篇文章里，我们要看看如何开始使用TestCafe，并从零开始写出第一个测试。

安装TestCafe

如果已经安装了Node.js平台，安装TestCafe只要一个npm命令：

npm install -g testcafe

如果是Linux系统，也可以这样安装：

sudo npm install -g testcafe

创建第一个测试

现在要为TestCafe演示页写一个测试。打开最喜欢的编辑器或IDE开发环境，创建一个新的.js文件。

首先，声明一个测试构造，目标网页是https://devexpress.github.io/testcafe/example。

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

然后，添加一个测试。

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

test('My first test', async t => {
    // 之后在这里添加测试代码
});

注意，我们使用了模板字符串，甚至还用了异步等待。能用这些功能，是因为TestCafe支持ES2016版本，其本身就已经内置了些最新的功能。

到这一步，已经可以运行测试了。保存为test.js文件，然后在终端打入以下命令：

testcafe chrome test.js

TestCafe会自动检测Google Chrome浏览器或别的主流浏览器是否已在本地安装，然后打开浏览器，运行测试。因为这个测试是空的，什么都不做，所以测试通过，TestCafe输出结果报告。

给测试添加动作

现在让我们加些代码，在页面上做些动作。

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

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

上面三句让TestCafe模仿终端用户的行为。首先，把文字“Peter Parker”打到开发者名字(Developer Name)框里。然后，再选择苹果操作系统(macos)的单选按钮，并点击提交按钮。

运行测试，可以看到TestCafe在浏览器中模拟了这些行为。

观察页面状态

现在让我们用测试确认提交按钮有效。这个按钮应该指向另一个页面，上面写着“谢谢”。

我们要在提交按钮点击后检查，看浏览器是不是转到那个页面。页面的页眉要包含文字谢谢你，Peter Parker！。

做到这一步，要为文章页眉创建一个选择器，获取其文字内容innerText，然后在断言语句中验证文字。

import { Selector } from 'testcafe';

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

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

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

注意，这个测试并没引入延迟时间，看不到等待一个行为完成或者等待一个页面加载完毕的代码，因为TestCafe有一种智能自动等待机制，可以解决所有等待问题。

这就是本文的全部内容了。一个功能测试就这样写完了，它能输入文字，点击按钮并确认结果。

要更多了解，请访问这个项目的GitHub页，或者它的网站。

原文来自:众成翻译

声明：所有来源为“聚合数据”的内容信息，未经本网许可，不得转载！如对内容有异议或投诉，请与我们联系。邮箱：marketing@think-land.com