Web 自动化神器 TestCafe—页面高级操作篇

♥  前  言

在【Web 自动化神器 TestCafe — 页面基本操作篇】这篇文章中我们介绍了TestCafe页面交互的一些基本使用

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

如果你想学习自动化测试,我这边给你推荐一套视频,这个视频可以说是B站播放全网第一的自动化测试教程,同时在线人数到达1000人,并且还有笔记可以领取及各路大神技术交流:798478386   【已更新】B站讲的最详细的Python接口自动化测试实战教程全集(实战最新版)_哔哩哔哩_bilibili【已更新】B站讲的最详细的Python接口自动化测试实战教程全集(实战最新版)共计200条视频,包括:1、接口自动化之为什么要做接口自动化、2、接口自动化之request全局观、3、接口自动化之接口实战等,UP主更多精彩视频,请关注UP账号。https://www.bilibili.com/video/BV17p4y1B77x/?spm_id_from=333.337.search-card.all.click

二、文件上传  

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

(官方文档:https://testcafe.io/documentation/402676/reference/test-api/testcontroller/takeelementscreenshot?utm_source=testingpai.com)

下面的示例演示了如何使用 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从打开的浏览器窗口获得的描述符对象。 
  • 例子

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/59381.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript常见的运算符

一、运算符和运算元 1.认识运算符 在小学的时候我们就学习了各种运算符,比如加号 、乘号 *、减号 - 、除号/ 几乎所有的编程语言都有各种各样的运算符(也被称之为操作符,operators) 初次接触这些运算符, 你会感觉种类繁多, 难以记忆.但是并不需要特别…

Kotlin判断null比较let布尔值Boolean

Kotlin判断null比较let布尔值Boolean class MyData {val count: Int? 2023val number: Int? null }fun main(args: Array<String>) {val data MyData()val year 2022if (data.count ! null) {if (data.count > year) {println("data.count ! null")}}…

CSS 盒子模型

前言 盒子模型-组成 CSS盒子模型是一种用来描述元素在页面布局中占据空间的模型。它将每个元素看作由内容区域、内边距、边框和外边距组成的一个矩形框。 盒子模型的组成部分包括&#xff1a; 内容区域&#xff08;Content&#xff09;&#xff1a;显示元素的实际内容&#xf…

无涯教程-Android - Frame Layout函数

Frame Layout 旨在遮挡屏幕上的某个区域以显示单个项目&#xff0c;通常&#xff0c;应使用FrameLayout来保存单个子视图&#xff0c;因为在子视图彼此不重叠的情况下&#xff0c;难以以可扩展到不同屏幕尺寸的方式组织子视图。 不过&#xff0c;您可以使用android:layout_grav…

Axure RP 8.1.0.3400(原型设计工具)

Axure RP 8是一款原型设计工具&#xff0c;它提供了丰富的功能和工具&#xff0c;帮助用户创建高质量的网页、移动应用和桌面软件原型。以下是Axure RP 8的一些特色介绍&#xff1a; 强大的交互设计&#xff1a;Axure RP 8支持创建复杂的动画和过渡效果&#xff0c;让你的原型更…

微信短链跳转到小程序指定页面调试

首先说下背景&#xff1a;后端给了短链地址&#xff0c;但是无法跳转到指定页面。总是在小程序首页。指定的页面我们是h5页面。排查步骤如下&#xff1a; 1、通过快速URL Scheme 编译。上部普通编译 下拉找到此选项。 、 2、按照小程序的要求的URL Scheme输入。另外后端给的…

Redis7之介绍(一)

1. 是什么 Redis:REmote Dictionary Server(远程字典服务器&#xff09; Remote Dictionary Server( 远程字典服务)是完全开源的&#xff0c;使用ANSIC语言编写遵守BSD协议&#xff0c;是一个高性能的Key-Value数据库提供了丰富的数据结构&#xff0c;例如String、Hash、List、…

PlantUML文本绘制类图

记录下文本绘制类图的语法 参考 https://juejin.cn/post/6844903731293585421 类的UML表示 使用UML表示一个类&#xff0c;主要由三部分组成。类名、属性、方法。其中属性和方法的访问修饰符用 - 、# 、 表示 private、protected、public。 如图所示&#xff0c;表示A类有一个…

筑牢数据隐私安全底线,ADSCOPE通过ISO隐私信息管理体系认证!

数字时代&#xff0c;信息安全尤其是数据隐私信息保护已经成为社会共识。近日&#xff0c;ADSCOPE&#xff08;上海倍孜网络技术有限公司&#xff09;已通过相关组织机构评审&#xff0c;符合ISO/IEC 27701&#xff1a;2019标准&#xff0c;获得隐私信息管理体系认证证书&#…

Django基础5——ORM中间程序

文章目录 一、基本了解二、ORM基本操作2.1 连接数据库2.1.1 使用sqlite数据库2.1.2 使用MySQL数据库 2.2 对数据库操作2.2.1 增&#xff08;前端数据——>数据库&#xff09;2.2.2 查&#xff08;数据库——>前端展示&#xff09;2.2.3 改&#xff08;修改数据&#xff0…

已知两地经纬度,计算两地直线距离

文章目录 1 原理公式2 代码实现2.1 JavaScript2.2 C2.3 Python2.4 MATLAB 1 原理公式 在地球上&#xff0c;计算两点之间的直线距离通常使用地理坐标系&#xff08;例如WGS84&#xff09;。计算两地直线距离的公式是根据经纬度之间的大圆距离&#xff08;Great Circle Distanc…

C语言练习4(巩固提升)

C语言练习4 选择题 前言 面对复杂变化的世界&#xff0c;人类社会向何处去&#xff1f;亚洲前途在哪里&#xff1f;我认为&#xff0c;回答这些时代之问&#xff0c;我们要不畏浮云遮望眼&#xff0c;善于拨云见日&#xff0c;把握历史规律&#xff0c;认清世界大势。 选择题 …

shell常用脚本

1、Java项目重启脚本 #!/bin/bash# 定义一个函数来结束进程和启动新进程 function restart(){JAR_NAME$1 # jar包LOG_NAME$2 # 日志JVM_ARGS$3 # jvm 参数PID$(ps -ef | grep java | grep ${JAR_NAME} | awk { print $2 })if [[ ! -z "$PID" ]]; thenecho "…

postgresql-字符函数

postgresql-字符函数 字符串连接字符与编码字符串长度大小写转换子串查找与替换截断与填充字符串格式化MD5 值字符串拆分字符串反转 字符串连接 concat(str, …)函数用于连接字符串&#xff0c;并且忽略其中的 NULL 参数&#xff1b;concat_ws(sep, str, …) 函数使用指定分隔…

【黑科技】游戏开发程序员必备工具【一】

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;效率…

递归算法学习——子集

目录 一&#xff0c;题目解析 二&#xff0c;例子 三&#xff0c;题目接口 四&#xff0c;解题思路以及代码 1.完全深度搜索 2.广度搜索加上深度优先搜索 五&#xff0c;相似题 1.题目 2.题目接口 3.解题代码 一&#xff0c;题目解析 给你一个整数数组 nums &#xff0c…

软件开发的201个原则 阅读笔记 第172-201个原则

目录 原则172 做项目总结 第8章 产品保证原则 原则173 产品保证并不是奢侈品 原则 174 尽早建立软件配置管理过程 原则175 使软件配置管理适应软件过程 原则176 组织SCM 独立于项目管理 原则 177 轮换人员到产品保证组织 给所有中间产品一个名称和版本 原则179 控制基准 原则…

学习JAVA打卡第四十五天

StringBuffer类 StringBuffer对象 String对象的字符序列是不可修改的&#xff0c;也就是说&#xff0c;String对象的字符序列的字符不能被修改、删除&#xff0c;即String对象的实体是不可以再发生变化&#xff0c;例如&#xff1a;对于 StringBuffer有三个构造方法&#xff…

PHP敬老院管理系统Dreamweaver开发mysql数据库web结构php编程计算机网页

一、源码特点 PHP 敬老院管理系统&#xff08;养老&#xff09;是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 论文 https://download.csdn.net/download/qq_41221322/…

财务部发布《企业数据资源相关会计处理暂行规定》

导读 财务部为规范企业数据资源相关会计处理&#xff0c;强化相关会计信息披露&#xff0c;根据《中华人民共和国会计法》和相关企业会计准则&#xff0c;制定了《企业数据资源相关会计处理暂行规定》。 加gzh“大数据食铁兽”&#xff0c;回复“20230828”获取材料完整版 来…