Web自动化框架 Testcafe 入门

 

语言特点

优点：

1. 兼容性好，可以支持各类的浏览器
2. 集成性好，有一整套完整的自动化测试框架，不仅提供了案例的管理，运行，失败自动重跑，错误自动截图，并发等，对页面和页面元素的等待也封装完善而且使用简单，无需借助其他框架二次封装。
3. 便于验证，可以控制整体的执行速度，甚至可以细到某个操作的执行速度；支持调试模式

缺点：

1. 语言局限性，支持js ,TypeScript语言编写
2. 学习资料较少，英语文档

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

api文档：https：//devexpress.github.io/testcafe/documentation/getting-started/

 

脚本运行指令

  testcafe安装成功后，打开终端，输入对应指令，会使用指定的浏览器运行脚本

testcafe chrome /YourPath/test1.js

#testcafe 浏览器 脚本路径

 

基础指令

1.元素获取和定位

https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/

简单元素的获取

Class用”.”来代表   ID用“#”来代表

有多个元素名字一样，用其他属性唯一定位

使用功能功能选择器来进行排查，可以通过在DOM层次结构中搜索元素或者过滤DOM节点

 

2.操作

https://devexpress.github.io/testcafe/documentation/test-api/actions/   

• 等待  

await t.wait(time)

 

• 点击   

await t.click( selector [, options] )

 

• 延迟   

await t.setTestSpeed(time)

 

• 拖动    

await t.drag( selector, dragOffsetX, dragOffsetY [, options] )

 

• 输入文字    

await t.typeText( selector, text [, options] )

附录：devexpressExample.js

实现输入文案、插入文案、按钮点击、滑竿设置

import { Selector } from 'testcafe';

const nameInput = Selector('#developer-name');
const checkbox = Selector('#remote-testing');
fixture `My fixture`
    .page `https://devexpress.github.io/testcafe/example/`;

test('Type and Replace', async t => {
    await t
        .setTestSpeed(0.01)
        .typeText(nameInput, 'Peter')   //输入Pater
        .typeText(nameInput, 'Paker', { replace: true })  //输入Paker
        .typeText(nameInput, 'r', { caretPos: 2 })  //第三个位置添加r
        .setNativeDialogHandler(() => true)   //关闭系统弹窗
        .click(checkbox)   //选择
        .click('#tried-test-cafe')   //选择
        .typeText('#comments', 'Peter')  //输入Peter
        .drag('.ui-state-default', 360, 0, { offsetX: 10, offsetY: 10 }) //从0拖动到5
        .click('#submit-button')  //提交
        .wait(3000)
});

3.断言

https://devexpress.github.io/testcafe/documentation/test-api/assertions/assertion-api.html

用于判断操作是否生效

 

• 等于/不等于:用于判断选项的值是否与预期的一致；返回值可以是文本、数字

await t.expect( actual ).eql( expected, message（选）, options（选） );
await t.expect( actual ).notEql( unexpected, message（选）, options（选） );

 

• 是/否：用于判断状态是否正确；返回值是bool值

await t.expect( actual ).ok( message（选）, options（选） ); 
await t.expect( actual ).notOk( message（选）, options（选） );

 

 

 附录：assertioneeExample.js

实现下拉菜单选择、判断选择内容是否正确、勾选框是否选中

import { Selector } from 'testcafe';

const checkbox = Selector('#remote-testing');
const comboBox = Selector('#preferred-interface');

fixture `My fixture`
    .page `https://devexpress.github.io/testcafe/example/`;

test('Type and Replace', async t => {
    await t
        .setTestSpeed(0.01)
        .click(comboBox)
        // .debug()
        .click(comboBox.child(2))  //点击下拉菜单中的第三个选项
        // .debug()  //调试
        .expect(comboBox.value).eql('Both','值等于both', { timeout: 3500 })  //判断内容是否与预期的一致
        // .expect(comboBox.value).notEql('Both','值不等both', { timeout: 10500 });

        await t
         .click(checkbox)  //勾选框
         .expect(checkbox.checked).ok()  //确认选项是否选中
         .click(checkbox)
         .expect(checkbox.checked).notOk();

       
});

 

 

4.调试

https://devexpress.github.io/testcafe/documentation/test-api/debugging.html

断点调试，当测试执行到达时t.debug，它会暂停，以便您可以打开浏览器的开发人员工具并检查网页状态

 

t.debug()

 

• unlock page：解锁页面，可以检查

• resume：继续执行剩余的部分

• next step：仅执行下一个步骤

 

 

 

第一篇初始入门，有何问题欢迎提问，根据需要出下一篇指南