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

深藏阁楼爱情的钟 2022-12-24 00:52 375阅读 0赞

### testcafe ###

*  前言
 *  一、简介
 *  二、入门
 *   *  安装TestCafe
     *  初尝试testcafe
     *   *  简单的运行代码
         *  在页面上执行操作
         *  观察页面状态
         *  断言
 *  三、fixture
 *   *  page
     *  beforeEach
     *  before
     *  after
     *  afterEach
     *  fixture的demo
 *  四、test
 *   *  before
     *  after
     *  test的demo

# 前言 #

碰巧一个朋友想学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/][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包含一个简单的测试，该测试将开发人员的姓名键入文本编辑器，然后单击“提交”按钮。

### 观察页面状态 ###

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 带有一些方法

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

## page ##

填写测试的网页

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

## beforeEach ##

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

语法块

fixture.beforeEach( fn(t) )

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>fn</td> 
   <td>Function</td> 
   <td>包含挂钩代码的异步挂钩函数。</td> 
  </tr> 
  <tr> 
   <td>t</td> 
   <td>Object</td> 
   <td>用于访问测试运行API的测试控制器</td> 
  </tr> 
 </tbody> 
</table>

## before ##

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

fixture.before( fn(ctx) )

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

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

## after ##

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

fixture.after( fn(ctx) )

## afterEach ##

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

fixture.afterEach( fn(t) )

## 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")
    });

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70_pic_center]  
通过打印，我们可以知道fixture的执行顺序

# 四、test #

test( testName,fun(t))

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

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

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>before</td> 
   <td>Object</td> 
   <td>该test运行之前运行</td> 
  </tr> 
  <tr> 
   <td>after</td> 
   <td>Object</td> 
   <td>该test运行之后运行</td> 
  </tr> 
 </tbody> 
</table>

## 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")
    });

输出效果如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70_pic_center 1]

[http_devexpress.github.io_testcafe]: http://devexpress.github.io/testcafe/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/052b13ea64e34d2288e68f85ec4bf7d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIzNjA2Mg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/4d78160192bb46c6bf097b9cdcebdc3e.png