超详细的 web 自动化教程 (五)—TestCafe 页面高级操作软件测试自动化测试

前言
这篇文章接着上一篇来给大家介绍一下 TestCafe 页面交互的一些高级操作。
一、鼠标拖拽
1、拖拽元素偏移
方法：t.drag 可以将元素相对于原来位置进行偏移拖拽。
案例
import { Selector } from 'testcafe';
fixture 元素拖拽

.page `https://www.runoob.com/try/try.php?filename=jqueryui-api-droppable`;

test('Drag test', async t => {

await t .switchToIframe('#iframeResult') // 相对于元素原来位置，x轴拖动360像素 .drag('#draggable', 360, 0);

});
2、拖拽元素到另一个元素位置
方法：dragToElement 将元素拖拽到另一个元素的位置。
案例
import { Selector } from 'testcafe';
fixture 元素拖拽

.page `https://www.runoob.com/try/try.php?filename=jqueryui-api-droppable`;

test('Drag test', async t => {

await t .switchToIframe('#iframeResult') // 将元素#draggable 拖动到 #droppable 中 .dragToElement('#draggable', '#droppable')

});
二、文件上传
1、上传文件
方法：t.setFilesToUpload：
参数：
参数
描述
selector
目标元素（目标元素必须是带有 type="file" 属性的 input 标签。）
filePath
上传文件的路径（支持多个文件上传，以数组的形式传递参数）
案例
fixture My fixture

.page `https://www.layui.com/demo/upload.html`;

test('Uploading', async t => {

await t // 上传文件 .setFilesToUpload('#test2+input', [ 'C:\\课件\\images\\p5_1_1.png', 'C:\\课件\\images\\p5_1.png' ])

});
2、清除上传文件
2、清除上传文件
方法：t.clearUpload 删除文件上传元素中，已选择的上传文件
案例
fixture My fixture

.page `https://www.layui.com/demo/upload.html`;

test('Uploading', async t => {

await t // 上传文件 .setFilesToUpload('#test2+input', [ 'C:\\课件\\images\\p5_1_1.png',]) .clearUpload("'#test2+input")

});
三、截屏操作
关于截图，testcafe 提供了两个方法，一个的对整个页面进行截图，一个是对具体的某个元素进行截图。
1、页面进行截图
方法：t.takeScreenshot
对整个页面进行截图，截取下来的图片会自动保存到 screenshot 的目录中
参数说明：
范围
描述
默认值
path
屏幕截图文件的相对路径和名称（非必填）。
fullPage
指定应捕获整个页面，包括由于溢出而看不到的内容（非必填）。
false
例子
import { Selector } from 'testcafe';
fixture 页面截图

.page `https://www.baidu.com`;

test('screenshot ', async t => {

await t .typeText('#kw', '柠檬杯') .click('#su') .takeScreenshot({ path: 'index_page.png', fullPage: true });

});
2、元素截图
方法：t.takeElementScreenshot()
对页面指定的具体元素进行截图
参数说明
范围
描述
selector
屏幕截图的网页元素
path
屏幕截图文件的相对路径和名称（非必填）。
options
定义如何截屏的选项（非必填）。详细请参阅官方文档
【超详细的 web 自动化教程 (五)—TestCafe 页面高级操作】例子
import { Selector } from 'testcafe';
fixture 页面截图

.page `https://www.baidu.com`;

// 百度首页搜索按钮截图
test('screenshot ', async t => {

await t .takeElementScreenshot('#su', 'su_ele.png');

});
四、窗口滚动
TestCafe 对处于页面下方不可见的元素进行操作，会自动滚动到元素可见。因此 TestCafe 中没有提供专用来滚动窗口的操作方法。如果您特别需要在不对元素执行任何操作的情况下，滚动到页面元素可见，可以使用 TestCafe 提供的客户端功能构造函数 ClientFunction，自己定义一个滚动的方法。
1、自定义滚动方法
自定义滚动的方法需要使用 TestCafe 提供的构造函数 ClientFunction 来创建客户端函数。
关于 ClientFunction，后面的章节会详细讲解，这边咱们直接使用
import { ClientFunction } from 'testcafe';
// 定义一个相对当前位置，进行滚动的方法
const scrollBy = ClientFunction((x,y) => {

window.scrollBy(x, y);

});
// 定义一个相对当前位置，滚动到页面指定像素位置的方法
const scrollTo = ClientFunction((x,y) => {

window.scrollTo(x, y);

});
fixture My fixture

.page `https://www.layui.com/demo/upload.html`;

test('Test scrollBy', async t => {

// 相对当前位置，向下滚动100像素 await scrollBy(100,0);

});
test('Test scrollTo', async t => {

//滚动到页面X轴为1000像素的位置 await scrollTo(1000,0);

});
1
五、iframe 切换
TestCafe 测试的测试操作和 selenium 一样仅限于主窗口。如果页面中存在 iframe 内嵌页面，那么进行自动化测试的过程中，如果存在 iframe，则应需要进行切换。
1、切换到指定的 iframe 中
testcafe中的方法switchToIframe，可以帮我们从主窗口切换到iframe中
方法：switchToIframe
例子 import { Selector } from 'testcafe'; fixture qq邮箱登录之iframe切换 .page https://mail.qq.com/; test('iframe test', async t => { await t //切换到id为login_frame的iframe中 .switchToIframe('#login_frame') // 输入账号 .typeText('#u', '1234567872') // 输入面面 .typeText('#p', '123qwe') });
2、从 iframe 中切换回页面窗口
方法：switchToMainWindow()
例子
import { Selector } from 'testcafe';
fixture qq邮箱登录之iframe切换

.page `https://mail.qq.com/`;

test('iframe test', async t => {

await t //切换到id为login_frame的iframe中 .switchToIframe('#login_frame') // 输入账号 .typeText('#u', '1234567872') // 输入面面 .typeText('#p', '123qwe')

});
test('iframe test', async t => {

const mobile_ele = Selector('a').withText('手机版') await t // 切换回原窗口 .switchToMainWindow(); // 点击窗口中的手机版 .click(mobile_ele)

});
1
六、页面访问
在前几节的学习中我们打开页面都是在 fixture 中，调用 page 方法。那么如果在测试用例中我们要跳转到另一个指定的页面，则需要使用 TestCafe 中的 navigateTo 方法
方法：navigateTo
在当前窗口访问另一个页面
案例
fixture('Example').page('https://www.baidu.com');
test('Navigate To URL test', async t => {

await t.navigateTo('https://www.taobao.com');

});
七、窗口切换
TestCafe 在打开新窗口时，会自动切换到新窗口，如果我们在测试的过程中需要手动进行窗口切换，
1、获取窗口描述符
获取当前活动窗口相对应的窗口描述符
方法
例子
import { Selector } from 'testcafe';
fixture 百度测试

.page `https://www.baidu.com`;

test('Wait test', async t => {

// 打开一个新窗口，接收新窗口的描述符 await t.openWindow('http://www.taobao.com') // 获取当前窗口的描述符 const new_desc = await t.getCurrentWindow();

});
2、切换到特定窗口
方法：t.switchToWindow
参数
参数名
描述
windowDescriptor
从打开的浏览器窗口获得的描述符对象。
例子
import { Selector } from 'testcafe';
fixture 百度测试

.page `https://www.baidu.com`;

test('Wait test', async t => {

// 获取当前窗口的描述符 const old_win = await t.getCurrentWindow(); // 打开一个新窗口 const new_win = await t.openWindow('http://www.taobao.com') // 切换到老窗口 t.switchToWindow(old_win) // 再切换到新窗口 t.switchToWindow(new_win)

});
3、切换上一个活动窗口
切换到前一个活动的窗口，使用该方法方法调用将在两个最近的窗口之间循环切换。
方法：t.switchToPreviousWindow
例子
import { Selector } from 'testcafe';
fixture 百度测试

.page `https://www.baidu.com`;

test('Wait test', async t => {

// 打开一个新窗口，接收新窗口的描述符 await t.openWindow('http://www.taobao.com') // 切换到上一个窗口(就窗口) t.switchToPreviousWindow() // 切换回来 t.switchToPreviousWindow() // 切换到上一个窗口 t.switchToPreviousWindow()

});
4、切换的父级窗口
方法：t.switchToParentWindow
例子：
import { Selector } from 'testcafe';
fixture 百度测试