Web自动化神器TestCafe(三)—用例编写篇

• 前言

  前段时间写了一篇关于web自动化测试框架TestCafe的安装和元素定位的方式，今天主要给大家介绍一下testcafe这个框架如何去编写测试用例。

一、用例编写基本规范

1、 fixture测试夹具

使用TestCafe编写测试用例，必须要先使用fixture声明一个测试夹具，然后在这个测试夹具下编写测试用例，在一个编写测试用例的js或ts文件中，可以声明多个测试夹具

• fixture(测试夹具)的声明

  import 'testcafe'
  // 声明一个测试夹具 百度测试
  fixture `登录功能测试`	 
  

  上面是官方文档中的demo，调用fixture方法声明测试夹具的时候，使用的是模板字符串传参的形式，对于没用过这种语法的小伙伴来说看起来不太好理解，可以按下面这个使用括号调用函数的形式来写。

  import 'testcafe'
  // 声明一个测试夹具  新浪测试
  fixture('注册功能测试')
  

• fixture.page方法：

  通过fixture.page方法，我们可以在测试夹具打开一个要进行测试的页面

  fixture('百度登录测试').page('https://www.baidu.com');	
  

2、test测试函数

2.1、测试用例编写

​ 声明了测试夹具之后，就可以定义测试用例了，在testcafe中写测试用例，直接调用测试函数test， 并传递一个内部带有测试代码的函数即可 。

import 'testcafe'
// 在测试夹具中打开百度页面
fixture('百度案例').page('https://www.baidu.com');

// 第一条用例：百度输入 柠檬班点击搜索
test('用例1', async t => {
    await t.typeText('#kw', "柠檬班")
        .click('#su');
});

// 第二条用例：百度输入 python 点击搜索
test('用例2', async t => {
    await t.typeText('#kw', "python")
        .click('#su');
});

• 关于上面测试函数test调用的说明

  • test方法的第一个参数为测试用例的名称，第二个参数是写测试代码的函数

  • 关于参数t： 在testcafe中 所有测试动作都需要使用 测试控制器对象的异步功能来实现。箭头函数定义的参数 t 就是用来接收测试控制器对象的。

  • 上面写测试代码的函数是使用async/await语法定义的函数，这也是testcafe的推荐写法，在执行相关测试动作时，如果要等待前一个动作执行完成，再调用下一个动作或动作链，只需要进行等待的动作前面加上关键字await即可。

2.2、指定测试开始页面

在fixture中可以通过page方法去打开一个测试的初始页面，当然在test方法中如果不用fixture打开的初始页面，也可以使用tes.page自定义一个测试初始打开页面,如下：

fixture(`百度案例`).page `https://www.taobao.com`;

test.page('https://www.baidu.com')('百度搜索功能', async t => {
    await t.typeText('#kw', "hao123")
        .click('#su');
});

二、测试前后置处理

在工作中执行测试时，大多数的用例执行，都会有一些用例前置准备或者后置清理工作要去做。关于前后置处理的方法，我们称之为钩子函数，testcafe提供了两种钩子，一种叫测试钩子，一定叫固定钩子。

1、测试钩子

测试钩子指的是每一条测试用例执行之前和执行之后，会执行的钩子函数，我们称之为测试钩子，关于测试钩子Testcafe提供了如下四个方法。

• fixture.beforeEach方法

测试夹具fixture提供了一个beforeEach方法，可以给该fixture中的每一条测试用例设置前置执行的操作。案例代码如下：

import 'testcafe'

fixture(`百度案例`)
    .page('https://www.baidu.com')
	// 设置每条用例执行的前置操作
    .beforeEach(async t => {
        await t.typeText('#kw', "前置步骤").click('#su')
    });

• fixture.afterEach方法

fixture(`百度案例`)
    .page('https://www.baidu.com')
	// 设置每条用例执行的前置操作
    .beforeEach(async t => {
        await t.typeText('#kw', "前置步骤")
    })
    .afterEach(async t => {
        await t.typeText('#kw', "后置步骤").click('#su')
    });

上面这两种方法可以给通过测试夹具fixture给该夹具下的每条用例设置前后置操作。如果某一条用例需要单独的设置前后置，则需要使用test.before方法和test.after方法。

• test.before方法

给单独的用例设置前置操作

test.before(async t => {
    await t.typeText('#kw', "test设置的前置")
    })
    ('百度搜索功能', async t => {
        await t.typeText('#kw', "python")
            .click('#su');
    })

• test.after方法

给单独的用例设置后置操作

test.before(async t => {
    await t.typeText('#kw', "test设置的前置")
    })
    ('百度搜索功能', async t => {
        await t.typeText('#kw', "python")
            .click('#su');
    })
    .after(async t => {
        await t.typeText('#kw', "后置方法中输入的内容")
            .click('#su');
    })   

• 测试钩子和测试代码之间共享数据

  如果需要在测试钩子和测试代码直接共享数据的话，我们可以通过测试上下文（t.ctx属性）来进行传递。在测试钩子中将数据保存到测试上下文中，在测试方法中再去测试上下文中获取数据。具体案例如下：

  test.before(async t => {
      // 在测试钩子中通过t.ctx保存数据
      t.ctx.token = 'musen123'
      })
      ('百度搜索功能', async t => {
      	// 测试钩子中通过t.ctx获取数据
          console.log(t.ctx.token)
      })
  
  
  

2、夹具钩子

​ 夹具钩子和测试钩子不同，夹具钩子只会在夹具中的第一个测试开始之前和最后一个测试完成之后运行。要添加夹具钩子，可以使用fixture.before和fixture.after方法来定义定义。另外在夹具钩子中无法访问测试页面，也无法对测试页面进行相关操作。

• fixture.before方法

fixture(`百度案例`)
.page('https://www.baidu.com')
.before( async ctx => {
    // 前置夹具钩子
    console.log(ctx)
})

• fixture.after方法

fixture(`百度案例`)
.page('https://www.baidu.com')
.after( async ctx => {
    console.log(ctx)
     // 后置夹具钩子
});

• 夹具钩子和测试代码之间共享数据

  ​ 传递给fixture.before和fixture.after方法的钩子函数接收一个夹具上下文的参数ctx。需要进行数据传递时，我们可以在夹具钩子中把数据保存到ctx的属性中。在测试代码中使用 t.fixtureCtx来获取。案例代码如下：

fixture(`百度案例`)
    .before(async ctx  => {
    	// 夹具钩子中保存数据
        ctx.someProp = 123;
    })

test('Test1', async t => {
    // 测试代码中获取数据
    console.log(t.fixtureCtx.someProp); 
});

三、跳过和选择用例

1、跳过用例

​ 在执行测试的时候，如果说有用例不想执行，那么我们可以设置跳过用例执行。关于跳过用例执行testcafe中提供了fixture.skip 和test.skip方法。

• fixture.skip：跳过整个fixture的用例

• test.skip：跳过当前的测试用例

  // 跳过夹具F1中所有的用例
  fixture.skip('F1'); 
  test('F1-->用例1', async t => {   
  });
  test('F1-->用例2', async t => {   
  });
  
  fixture（'F2'）;
  // 跳过这一条用例
  test.skip('F2-->用例1', async t => {   
  });
  test('F2-->用例1', async t => {   
  });
  
  

2、选择用例

另外我们也可以使用fixture.only和test.only来筛选执行需要的用例，只有选择的用例或夹具运行，而所有其他应被跳过

• fixture.only：选择执行的测试夹具

• test.only：选择执行的测试用例

  // 选择F1这个测试夹具
  fixture.only('F1'); 
  test('F1-->用例1', async t => {   
  });
  test('F1-->用例2', async t => {   
  });
  
  fixture（'F2'）;
  // 选择这一条用例
  test.only('F2-->用例1', async t => {   
  });
  test('F2-->用例1', async t => {   
  });
  
  

以上就是testcafe中用例编写的所有内容啦，后续会持续更新TestCafe的相关使用文档。