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

lsekfe

前言
　　前段时间写了一篇关于 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、测试用例编写

1. 声明了测试夹具之后，就可以定义测试用例了，在testcafe中写测试用例，直接调用测试函数test， 并传递一个内部带有测试代码的函数即可 。
   
2. 　　import 'testcafe'
   
3. 　　// 在测试夹具中打开百度页面
   
4. 　　fixture('百度案例').page('https://www.baidu.com');
   
5. 　　// 第一条用例：百度输入 柠檬班点击搜索
   
6. 　　test('用例1', async t => {
   
7. 　　    await t.typeText('#kw', "柠檬班")
   
8. 　　        .click('#su');
   
9. 　　});
   
10. 　　// 第二条用例：百度输入 python 点击搜索
    
11. 　　test('用例2', async t => {
    
12. 　　    await t.typeText('#kw', "python")
    
13. 　　        .click('#su');
    
14. 　　});

复制代码

关于上面测试函数 test 调用的说明：
　　· test 方法的第一个参数为测试用例的名称，第二个参数是写测试代码的函数
　　· 关于参数 t： 在 testcafe 中 所有测试动作都需要使用 测试控制器对象的异步功能来实现。箭头函数定义的参数 t 就是用来接收测试控制器对象的。
　　· 上面写测试代码的函数是使用 async/await 语法定义的函数，这也是 testcafe 的推荐写法，在执行相关测试动作时，如果要等待前一个动作执行完成，再调用下一个动作或动作链，只需要进行等待的动作前面加上关键字 await 即可。
　　2.2、指定测试开始页面
　　在 fixture 中可以通过 page 方法去打开一个测试的初始页面，当然在 test 方法中如果不用 fixture 打开的初始页面，也可以使用 tes.page 自定义一个测试初始打开页面，如下：

1. 　fixture(`百度案例`).page `https://www.taobao.com`;
   
2. 　　test.page('https://www.baidu.com')('百度搜索功能', async t => {
   
3. 　　    await t.typeText('#kw', "hao123")
   
4. 　　        .click('#su');
   
5. 　　});

复制代码

　二、测试前后置处理
　　在工作中执行测试时，大多数的用例执行，都会有一些用例前置准备或者后置清理工作要去做。关于前后置处理的方法，我们称之为钩子函数，testcafe 提供了两种钩子，一种叫测试钩子，一定叫固定钩子。
　　1、测试钩子
　　测试钩子指的是每一条测试用例执行之前和执行之后，会执行的钩子函数，我们称之为测试钩子，关于测试钩子 Testcafe 提供了如下四个方法。
　　fixture.beforeEach 方法
　　测试夹具 fixture 提供了一个 beforeEach 方法，可以给该 fixture 中的每一条测试用例设置前置执行的操作。案例代码如下：

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

复制代码

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 方法
　　给单独的用例设置前置操作

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

复制代码

test.after 方法
　　给单独的用例设置后置操作：

1. test.before(async t => {
   
2. 　　    await t.typeText('#kw', "test设置的前置")
   
3. 　　    })
   
4. 　　    ('百度搜索功能', async t => {
   
5. 　　        await t.typeText('#kw', "python")
   
6. 　　            .click('#su');
   
7. 　　    })
   
8. 　　    .after(async t => {
   
9. 　　        await t.typeText('#kw', "后置方法中输入的内容")
   
10. 　　            .click('#su');
    
11. 　　    })

复制代码

测试钩子和测试代码之间共享数据
　　如果需要在测试钩子和测试代码直接共享数据的话，我们可以通过测试上下文（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 来获取。案例代码如下：

1. 　fixture(`百度案例`)
   
2. 　　    .before(async ctx  => {
   
3. 　　    // 夹具钩子中保存数据
   
4. 　　        ctx.someProp = 123;
   
5. 　　    })
   
6. 　　test('Test1', async t => {
   
7. 　　    // 测试代码中获取数据
   
8. 　　    console.log(t.fixtureCtx.someProp);
   
9. 　　});

复制代码

三、跳过和选择用例
　　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 的相关使用文档。