掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务

用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

掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
用TestCafe进行端到端网站测试
发布:2017-11-30 16:14:47

本文由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

选择想要的接口, 看看能免费获取多少次调用 选择(单选)或填写想要的接口
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
短信API服务
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
  • 确定
选择您的身份
请选择寻找接口的目的
预计每月调用量
请选择预计每月调用量
产品研发的阶段
请选择产品研发的阶段
×

前往领取
讯飞星火认知大模型API
0512-88869195
数 据 驱 动 未 来
Data Drives The Future