Web 自动化神器 TestCafe
一、互动要求
使用 TestCafe 与元素进行交互操作,元素需满足以下条件:
元素在
body
页面窗口或 iframe 窗口的元素内。元素对于用户可能是不可见的。如果某个元素在视口之外,则 TestCafe 通过滚动可以滚动到元素可见。元素是可见的,具有以下属性:
属性 说明 display
没有设置为 none
visibility
设置为 visible
(默认值)width
> = 1 像素 height
> = 1 像素 元素不重叠。
TestCafe 动作以某个动作
offsetX
或offsetY
选项指定的元素的中心或点为目标。如果另一个元素遮挡了目标点,则在顶部元素上执行操作(例如,t.click 操作在其上方单击该元素)。
二、点击操作
关于对元素进行点击操作,使用 testcafe 提供了三个方法,分别为单击、双击、鼠标右击,接下来我们一起来了解一下鼠标操作的使用方法。
1、单击
方法:t.click
在指定元素位置,鼠标单击
参数:
参数 描述 selector
双击的页面元素 例子:
test('click test', async t => { await t.click('#su');});
2、双击
方法:t.doubleClick
在指定元素位置,鼠标双击元素
参数:
参数 描述 selector
双击的页面元素 例子:
test('doubleClic test', async t => { await t.doubleClick('#su')});
3、右击
方法:t.doubleClick
在指定元素位置,鼠标右击
参数:
参数 描述 selector
双击的页面元素 例子:
test('rightClick test', async t => { await t.rightClick('#cell-1-1')});
三、输入操作
方法:t.typeText
输入表单元素的值
参数
参数 描述 selector
接收输入内容的表单元素 text
输入的文本 案例
import { Selector } from 'testcafe';fixture('Example').page('https://www.baidu.com');test('Type Text test', async t => { await t .typeText('#kw', '柠檬杯')})
四、键盘按键
在测试的操作中,如果涉及到键盘按键的操作,那么 testcafe 中也提供了很方便的方法 pressKey。
方法:t.pressKey
按键类型
按键类型 | 例子 |
---|---|
字母、数字键 | 'a' ,'A' ,'1' |
修饰键 | 'shift' ,'alt' 、'ctrl' , |
导航键和动作键 | 'backspace' ,'tab' ,'enter' |
按键组合 | 'shift+a' , 'ctrl+v' |
顺序按键 | 使用空格分隔多个案例操作,例如,'ctrl+c ctrl+v' |
案列
test('enter test', async t => { // 按下 a 键 await t.pressKey('a') // 按下 shift+a 键 await t.pressKey('shift+a') // 先按下 ctrl+c复制,再按ctrl+v粘贴 await t.pressKey('ctrl+c ctrl+v') });
五、文本选择
关于表单或者 textarea 这类可编辑的元素,在进行输入之前,如果要选中原有的文字内容,并进行删除操作,则需要先选择文本,然后再进行删除
方法:t.selectText
在各种类型的输入元素中选择文本
参数:
参数 类型 描述 selector
字串| 选择器 标识将要选择其文本的网页元素;必填参数 startPos
number 选择的开始位置,从零开始的整数;非必填,默认为 0
endPos
number 选择的结束位置;非必填,可见文本内容的长度。 案例:
import { Selector } from 'testcafe';fixture('Example').page('https://www.baidu.com');test('Type Text test', async t => { // 输入 柠檬班 await t.typeText('#kw', '柠檬杯') // 选中输入的文本 .selectText('#kw') // 按下删除键 删除输入的文本 .pressKey('delete');})
六、鼠标悬停
方法:t.hover
将鼠标指针悬停在页面的某个元素上。
参数:
参数 描述 selector
页面元素 例子:
import { Selector } from 'testcafe';fixture('Example').page('https://www.baidu.com');test('Type Text test', async t => { // 鼠标悬停在百度页面顶部的更多菜单上 await t.hover('a[name="tj_briicon"]')})
七、强制等待
在我们执行测试时,对于某个操作后,如果需要强制等待一段时间则可以使用 t.wait 方法来进行强制等待。
方法:t.wait
代码执行到 wait 方法,进行强制等待
参数说明
范围 类型 描述 timeout
数字 暂停持续时间(以毫秒为单位)。 例子
import { Selector } from 'testcafe';fixture `百度测试` .page `https://www.baidu.com`;test('Wait test', async t => { await t // 输入柠檬班 .typeText('#kw', '柠檬班') // 强制等待3秒 .wait(3000) // 点击搜索 .click('#su') });
八、窗口管理
1、打开新窗口
方法: openWindow
打开一个新的浏览器窗口。返回匹配的窗口描述符
参数
参数 描述 url 打开的 URL。可以是绝对的或相对的。 例子
import { Selector } from 'testcafe';fixture `百度测试` .page `https://www.baidu.com`;test('Wait test', async t => { // 打开一个新窗口,接收新窗口的描述符 const winDesc = await t.openWindow('http://www.taobao.com')});
2、关闭窗口
方法:closeWindow
关闭浏览器窗口。 (注意点:不能使用该方法直接关闭主窗口)
参数
参数 描述 windowDescriptor 描述目标窗口的对象。如果不传此参数,默认关闭当前活动窗口。 例子
import { Selector } from 'testcafe';fixture `百度测试` .page `https://www.baidu.com`;test('Wait test', async t => { // 打开一个新窗口,接收新窗口的描述符 const winDesc1 = await t.openWindow('http://www.taobao.com') // 关闭窗口 await t.closeWindow(winDesc1)});
九、调整窗口大小
1、窗口最大化
方法:t.maximizeWindow
把浏览器窗口设置为最大化
案例
import { Selector } from 'testcafe';fixture `百度` .page `https://www.baidu.com`;// 窗口最大化test('screenshot ', async t => { await t.maximizeWindow();});
2、调整窗口大小
方法:t.resizeWindow
自定义浏览器窗口的大小
参数
参数名 描述 width
新的宽度(以像素为单位)。 height
新高度,以像素为单位。 案例
import { Selector } from 'testcafe';const menu = Selector('#side-menu');fixture `百度测试` .page `https://www.baidu.com`;test('设置浏览器窗口大小', async t => { await t .resizeWindow(200, 100)});
3、调整窗口大小适配设备屏幕
方法:t.resizeWindowToFitDevice
通过传入移动设备的设备名,自动调整窗口大小,以适合指定移动设备的屏幕
参数
参数 描述 deviceName
设备的名称。比如 iphonex, iphonexr 案例
import { Selector } from 'testcafe';const menu = Selector('#side-menu');fixture `百度测试` .page `https://www.baidu.com`;test('设置浏览器窗口大小', async t => { await t .resizeWindowToFitDevice('iphonex', { portraitOrientation: true })});
评论:0
点赞:0
阅读: