前 言

Testcafe是基于node.js得框架，以操作简洁著称，是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.rightClick

在指定元素位置，鼠标右击

参数：

参数	描述
selector	双击得页面元素

例子：

test('rightClick test', async t => { await t.rightClick('#cell-1-1')});

三、输入操作

方法：t.typeText

输入表单元素得值

参数：

参数	描述
selector	接收输入内容得表单元素
text	输入得文本

例子：

import { Selector } from 'testcafe';fixture('Example').page('特别baidu');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('特别baidu');test('Type Text test', async t => { // 输入 柠檬班 await t.typeText('#kw', '柠檬杯') // 选中输入得文本 .selectText('#kw') // 按下删除键 删除输入得文本 .pressKey('delete');})

六、鼠标悬停

方法：t.hover

将鼠标指针悬停在页面得某个元素上。

参数：

参数	描述
selector	页面元素

例子：

import { Selector } from 'testcafe';fixture('Example').page('特别baidu');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 `特别baidu`;test('Wait test', async t => { await t // 输入柠檬班 .typeText('#kw', '柠檬班') // 强制等待3秒 .wait(3000) // 搜索 .click('#su') });

八、窗口管理

1、打开新窗口方法：openWindow

打开一个新得浏览器窗口。返回匹配得窗口描述符

参数：

参数	描述
url	打开得 URL。可以是可能吗？得或相对得。

例子：

import { Selector } from 'testcafe';fixture `百度测试` .page `特别baidu`;test('Wait test', async t => { // 打开一个新窗口，接收新窗口得描述符 const winDesc = await t.openWindow('特别taobao')});2、关闭窗口方法：closeWindow

关闭浏览器窗口。(注意点：不能使用该方法直接关闭主窗口)

参数：

参数	描述
windowDescriptor	描述目标窗口得对象。如果不传此参数，默认关闭当前活动窗口。

例子：

import { Selector } from 'testcafe';fixture `百度测试` .page `特别baidu`;test('Wait test', async t => { // 打开一个新窗口，接收新窗口得描述符 const winDesc1 = await t.openWindow('特别taobao') // 关闭窗口 await t.closeWindow(winDesc1)});

九、调整窗口大小

1、窗口蕞大化方法：t.maximizeWindow

把浏览器窗口设置为蕞大化

例子：

import { Selector } from 'testcafe';fixture `百度` .page `特别baidu`;// 窗口蕞大化test('screenshot ', async t => { await t.maximizeWindow();});2、调整窗口大小方法：t.resizeWindow参数：

参数名	描述
width	新得宽度（以像素为单位）。
height	新高度，以像素为单位。

例子：

import { Selector } from 'testcafe';const menu = Selector('#side-menu');fixture `百度测试` .page `特别baidu`;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 `特别baidu`;test('设置浏览器窗口大小', async t => { await t .resizeWindowToFitDevice('iphonex', { portraitOrientation: true })});

看到这里得朋友不妨点个赞，码字不易，谢谢大家。

需要自动化测试资料得也可以并私信我关键词“资料”免费领取哟