Web 自动化神器 TestCafe—页面基本操作篇

前 言


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('https://www.baidu.com');


test('Type Text test', async t => {
    await t
      .typeText('#kw', '1')
})

四、键盘按键

在测试的操作中,如果涉及到键盘按键的操作,那么 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', '1')
      // 选中输入的文本
      .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', '2')
      // 强制等待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
        })
});

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

迅为RK3568开发板学习之Linux驱动篇第十三期输入子系统

驱动视频全新升级,并持续更新~更全,思路更科学,入门更简单。 迅为基于iTOP-RK3568开发板进行讲解,本次更新内容为第十三期,主要讲解输入子系统,共计24 讲。 关注B站:北京迅为电子,在…

Parallel Diffusion Models of Operator and Image for Blind Inverse Problems

盲逆问题算子和图像的并行扩散模型 论文链接:https://arxiv.org/abs/2211.10656 项目链接:https://github.com/BlindDPS/blind-dps Abstract 在正向算子已知的情况下(即非盲),基于扩散模型的逆问题求解器已经展示了最先进的性能。然而&…

OSG文字-各种文字效果(边框、阴影及颜色倾斜)示例(2)

各种文字效果(边框、阴影及颜色倾斜)示例 各种文字效果(边框、阴影及颜色倾斜)示例的代码如程序清单9-2所示&#xff1a; 1. /* 各种文字效果(边框、阴影及颜色倾斜)示例 */ 2. osg::ref_ptr<osg::Camera> createAllKindText(const string &strDataFolder) 3. {…

华为云cce中环境变量的使用

如上图&#xff0c;cce中的环境变量可配置。 配置后的这些参数怎么用呢&#xff1f; 我们可以在docker打包前在springboot的配置文件中配置&#xff0c;cce在启动的时候会调用环境变量中的设置。 如上图&#xff0c;配置的东西以key值标记&#xff0c;冒号后面的是默认配置项…

YOLO改进系列之注意力机制(GatherExcite模型介绍)

模型结构 尽管在卷积神经网络&#xff08;CNN&#xff09;中使用自底向上的局部运算符可以很好地匹配自然图像的某些统计信息&#xff0c;但它也可能阻止此类模型捕获上下文的远程特征交互。Hu等人提出了一种简单&#xff0c;轻量级的方法&#xff0c;以在CNN中更好地利用上下…

ssm+vue的药店药品信息管理系统(有报告)。Javaee项目,ssm vue前后端分离项目。

演示视频&#xff1a; ssmvue的药店药品信息管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;ssm vue前后端分离项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结…

Run Legends将健身运动游戏化,使用户保持健康并了解Web3游戏

最近&#xff0c;我们有机会采访Talofa Games的首席执行官兼创始人Jenny Xu&#xff0c;一起讨论游戏开发&#xff0c;Talofa Games是Run Legends这款健身游戏的开发工作室。她已经创作了超过一百款游戏&#xff0c;对于推动游戏的可能性并将她的创造力和叙事技巧带入她最喜爱的…

简单但好用:4种Selenium截图方法了解一下!

前言 我们执行UI自动化操作时&#xff0c;大多数时间都是不在现场的&#xff0c;出现错误时&#xff0c;没有办法第一时间查看到&#xff0c;这时我们可以通过截图当时出错的场景保存下来&#xff0c;后面进行查看报错的原因&#xff0c;Selenium中提供了几种截图的方法&#x…

【Linux学习笔记】基础IO

这里写目录标题 1. 系统文件I/O1.1. 接口介绍1.2. 库函数接口与系统接口的关系 2. 文件描述符fd2.1. 0&1&2文件描述符2.2. 文件描述符的分配规则2.3. 重定向2.4. 重定向系统调用2.5. 进程独立性 3. Linux下一切皆文件4. 缓冲区4.1. 缓冲区的理解4.2. 缓冲区的位置 5. 理…

IDEA-运行测试方法提示Command line is too long

使用IDEA版本 执行时提示 处理方法&#xff1a; 1&#xff0c; 2&#xff0c;

【优秀毕设】基于vue+ssm+springboot的网上购物商城系统设计

摘 要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;网上商城购物系统当然也不能排除在外。网上商城购物系统是以实际运用为开发背景&#xff0c;运用软件工程原理和开发方…

Hadoop-- hdfs

1、HDFS中的三个进程&#xff1a;NameNode&#xff08;NN&#xff09;、DataNode(DN)、SecondNameNode(SNN) 2、NameNode&#xff08;NN&#xff09; 1、作用&#xff1a; 1、接收客户端的一个读、写的服务&#xff0c;在namenode上存储了数据文件和datanode的映射的关系。 …

【封装UI组件库系列】全局样式的定义与重置

封装UI组件库系列第二篇样式​​​​​​​ ​​​​​​&#x1f31f;前言 &#x1f31f;定义全局样式 生成主题色和不同亮度的颜色 ​编辑 中性色及其他变量 &#x1f31f;样式重置 &#x1f31f;总结 ​​​​​​​​​​​​​​&#x1f31f;前言 在前端开发中&…

pygame播放视频并实现音视频同步

一、前言 在我接触pygame时最新的pygame已经不支持movie模块&#xff0c;这就导致在pygame播放视频变成一个问题&#xff0c;网上搜了下解决方案有两个&#xff1a; 一是使用opencv播放视频&#xff0c;再结合pygame.mixer来播放音频 二是使用moviepy播放视频&#xff0c;再…

【C++进阶之路】第四篇:set和map

文章目录 一、关联式容器健值对二、set & multiset三、map & multimap在这里插入图片描述 四、set和map底层原理 一、关联式容器健值对 关联式容器 & 键值对 二、set & multiset set & multiset 三、map & multimap map & multimap 四、set和…

自己动手打包构建编译cri-dockerd

1.背景 本机是 armv7l架构cpu&#xff0c;发现官方文档中竟然没有&#xff0c;因此需要自己编译下&#xff1b; [rootcontainer0 ~]# uname -a Linux container0 5.4.206-v7l.1.el7 #1 SMP Mon Jul 25 14:13:29 UTC 2022 armv7l armv7l armv7l GNU/Linux2.打包/构建/编译 gi…

基于龙格-库塔算法优化概率神经网络PNN的分类预测 - 附代码

基于龙格-库塔算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于龙格-库塔算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于龙格-库塔优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对P…

7.1 Windows驱动开发:内核监控进程与线程回调

在前面的文章中LyShark一直在重复的实现对系统底层模块的枚举&#xff0c;今天我们将展开一个新的话题&#xff0c;内核监控&#xff0c;我们以监控进程线程创建为例&#xff0c;在Win10系统中监控进程与线程可以使用微软提供给我们的两个新函数来实现&#xff0c;此类函数的原…

什么是数字化工厂?企业数字化转型有什么好处?

科技在发展&#xff0c;时代在进步&#xff0c;全球信息化、数字化的步伐越来越快&#xff0c;数字化转型是否成功也成为企业在未来发展中能否做大做强的关键因素。而数字化工厂就是制造业数字化发展的一个重要发展方向&#xff0c;那么究竟什么是数字化工厂呢&#xff1f;它和…

相对定位、绝对定位、固定定位、绝对定位堆叠顺序

相对定位&#xff1a;相对自己本身进行偏移 CSS语法&#xff1a; position: relative;/*相对自己进行定位*/ top: 10px;/*距离上边*/ left: 10px;/*距离左边*/ 演示图&#xff1a; 绝对定位&#xff1a;默认以浏览器进行定位。如果想依照父盒子定位&#xff0c;需要在父盒子…