testcafe:了解testcafe，并初尝试使用，入门（一）

前言

碰巧一个朋友想学testcafe，我正好想学英语，哈哈，相互碰撞一下，我教他testcafe,他教我英语。正好把我学习的过程记录下来，也方便教他

一、简介

1、纯的node.js-TestCafe不使用Selenium，不需要插件即可在真实的浏览器中运行测试。它建立在node.js之上，因此可以与现代开发工具集成并很好地工作
2、无需其他设置或配置-TestCafe都设置为在之后立即运行测试 npm install
3、完整的测试工具-通过一个启动命令，TestCafe即可启动浏览器，运行测试，收集结果并生成报告
4、对于前端开发工程师很友好，只要会Node,JS\TypeScript，基本前端都可以搭建一套UI自动化测试

官网：http://devexpress.github.io/testcafe/

二、入门

安装TestCafe

安装testcafe分两种，一种全局安装，一种本地安装
在安装testcafe前，你要确保已经安装node和npm（具体如何安装可以百度一下）

全局安装

npm install -g testcafe

本地安装

npm install testcafe --save-dev

初尝试testcafe

简单的运行代码

要创建测试，请创建一个新的.js或.ts文件。

//test1.js
import { Selector } from 'testcafe';

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

test('My first test', async t => {
    // Test code
});

运行测试
TestCafe自动打开选定的浏览器并在其中启动测试执行。
testcafe是全局安装的包，chrome是指定谷歌浏览器运行 test1.js是我们要运行的文件

testcafe chrome test1.js

在页面上执行操作

每个测试都应该能够与页面内容进行交互。要执行用户操作，TestCafe提供了大量的动作：click，hover，typeText，setFilesToUpload，等它们可以在一个被称为链。

以下fixture包含一个简单的测试，该测试将开发人员的姓名键入文本编辑器，然后单击“提交”按钮。

import { Selector } from 'testcafe';

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

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

观察页面状态

TestCafe允许您观察页面状态。为此，它提供了特殊类型的功能，这些功能将在客户端上执行您的代码： 用于直接访问DOM元素的选择器和用于从客户端获取任意数据的ClientFunction。您将这些函数称为常规异步函数，也就是说，您可以获取它们的结果并使用参数将数据传递给它们。

如下：单击示例网页上的Submit按钮可打开“谢谢”页面。要访问打开页面上的DOM元素，Selector可以使用此功能。下面的示例演示如何访问article标头元素并获取其实际文本。

import { Selector } from 'testcafe';

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

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'shufeng Zeng')
        .click('#submit-button');

    const articleHeader = await Selector('.result-content').find('h1');

    // Obtain the text of the article header
    let headerText = await articleHeader.innerText;
});

断言

功能测试还应检查所执行操作的结果。例如，“谢谢”页面上的文章标题应使用输入的名称来寻址用户。要检查标题是否正确，您必须在测试中添加一个断言。

以下测试演示了如何使用内置断言。

import { Selector } from 'testcafe';

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

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'shufeng zeng')
        .click('#submit-button')

        // Use the assertion to check if the actual header text is equal to the expected one
        .expect(Selector('#article-header').innerText).eql('Thank you, shufeng zeng!');
});

三、fixture

TestCafe测试必须有fixture类别，一个js/ts文件可以包含多个fixture。

要声明测试fixture，请使用fixture功能。

fixture( fixtureName )
fixture `fixtureName`

当我们执行的时候，输出页面则输出fixtureName ，既注册页面测试
fixture 带有一些方法

参数	类型	描述
*page	String	测试的网页
beforeEach	Object	每个test执行之前都会被运行
before	Object	比beforeEach更早运行，且每个fixture只运行一次
after	Object	比afterEach更晚运行，且每个fixture只运行一次
afterEach	Object	每个test执行之后都会被运行

page

填写测试的网页

fixture`注册页面测试`
    .page`http://devexpress.github.io/testcafe/example/`;

beforeEach

每个test执行之前都会被运行

语法块

fixture.beforeEach( fn(t) )

参数	类型	描述
fn	Function	包含挂钩代码的异步挂钩函数。
t	Object	用于访问测试运行API的测试控制器

before

比beforeEach更早运行，且每个fixture只运行一次

fixture.before( fn(ctx) )

参数	类型	描述
fn	Function	包含挂钩代码的异步挂钩函数。
ctx	Object	fixture上下文对象用于共享变量fixture代码和测试代码之间。

与test的生命周期不同，fixture的生命周期在测试之间运行，无法访问测试页面。使用它们来执行服务器端操作，例如准备托管测试过的应用程序的服务器。

after

比afterEach更晚运行，且每个fixture只运行一次

fixture.after( fn(ctx) )

参数	类型	描述
fn	Function	包含挂钩代码的异步挂钩函数。
ctx	Object	fixture上下文对象用于共享变量fixture代码和测试代码之间。

afterEach

每个test执行之后都会被运行

fixture.afterEach( fn(t) )

参数	类型	描述
fn	Function	包含挂钩代码的异步挂钩函数。
t	Object	用于访问测试运行API的测试控制器

fixture的demo

fixture(`beforeeach test1`)
    .page(`https://www.baidu.com`)
    .beforeEach(async I => {
        console.log('this is beforeEach')
    })
    .before(async I => {
        console.log('this is before')
    })
    .after(async I => {
        console.log('this is after')
    })
    .afterEach(async I=>{
        console.log("this is afterEach")
    });

test("test beforeAndafter",I=>{
    console.log("1111")
});

test("test beforeAndafter",I=>{
    console.log("2222")
});

效果如下：

通过打印，我们可以知道fixture的执行顺序

四、test

test( testName,fun(t))

fixture`注册页面测试`
    .page`http://devexpress.github.io/testcafe/example/`;
    
test('帐号不满11位数的校验', async t => {
    await t
        .typeText('#phone', '1387656003')
});

如果校验通过，在输出台则会输出√帐号的校验，否则是✖帐号的校验，

参数	类型	描述
before	Object	该test运行之前运行
after	Object	该test运行之后运行

before

从控制台输出看，test的before 会覆盖fixture中的beforeEach。也就是说如果一个test里面包含了before 那么fixture中的beforeEach对该test无效。

after

从控制台输出看，test的after 会覆盖fixture中的afterEach。也就是说如果一个test里面包含了after 那么fixture中的afterEach对该test无效。

test的demo

fixture(`beforeeach test1`)
    .page(`https://www.baidu.com`)
    .beforeEach(async I => {
        console.log('this is beforeEach')
    })
    .before(async I => {
        console.log('this is before')
    })
    .after(async I => {
        console.log('this is after')
    })
    .afterEach(async I => {
        console.log("this is afterEach")
    });

test
    .before(async t => {
        console.log(`this is test's before`)
    })
    ("test beforeAndafter", I => {
        console.log("1111")
    })
    .after(async t => {
        console.log(`this is test's after`)
    });

test("test beforeAndafter", I => {
    console.log("2222")
});

输出效果如下