Web自动化神器TestCafe(五)—页面交互篇（下）

前言

在【Web自动化神器TestCafe—页面交互篇(上)】这篇文章中我们介绍了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、清除上传文件

方法：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`	定义如何截屏的选项（非必填）。详细请参阅官方文档

下面的示例演示了如何使用t.takeElementScreenshot动作。

例子

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);
});

五、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)
});

六、页面访问

在前几节的学习中我们打开页面都是在 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 从打开的浏览器窗口获得的描述符对象。

参数名	描述
`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 `百度测试`
    .page `https://www.baidu.com`;

test('Wait test', async t => {
	// 打开一个新窗口，接收新窗口的描述符
    await t.openWindow('http://www.taobao.com')
    // 切换到上一个窗口(就窗口)
    t.switchToParentWindow()
});

posted @ 2021-09-24 17:10 musen 阅读(273) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

musen

Web自动化神器TestCafe(五)—页面交互篇（下）

前言

一、鼠标拖拽

1、拖拽元素偏移

方法：t.drag

案例

2、拖拽元素到另一个元素位置

方法：dragToElement

案例

二、文件上传

1、上传文件

方法：t.setFilesToUpload：

参数：

案例

2、清除上传文件

方法：t.clearUpload

案例

三、截屏操作

1、页面进行截图

方法：t.takeScreenshot

参数说明：

例子

2、元素截图

方法：t.takeElementScreenshot()

参数说明

例子

四、窗口滚动

1、自定义滚动方法

五、iframe切换

1、切换到指定的iframe中

方法：switchToIframe

例子

2、从iframe中切换回页面窗口

方法：switchToMainWindow()

例子

六、页面访问

方法：navigateTo

案例

七、窗口切换

1、获取窗口描述符

方法

例子

2、切换到特定窗口

方法：t.switchToWindow

参数

例子

3、切换上一个活动窗口

方法：t.switchToPreviousWindow

例子

4、切换的父级窗口

方法：t.switchToParentWindow

例子：

公告