Cypress系列(23)- 可操作类型的命令 之 trigger()

简介: Cypress系列(23)- 可操作类型的命令 之 trigger()

如果想从头学起Cypress,可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

 

.trigger()


在DOM元素上触发指定事件

 

语法格式

.trigger(eventName)
.trigger(eventName, position)
.trigger(eventName, options)
.trigger(eventName, x, y)
.trigger(eventName, position, options)
.trigger(eventName, x, y, options)


参数讲解

eventName

需要触发事件名称

 

position

每个元素都有九个 position,具体可看下图

image.png

x , y

距离 DOM 元素左上角的坐标,x 是横轴,y 是竖轴

 

options

image.png

  • clientX、clientY:相对于浏览器左上角的距离
  • pageX、pageY:相对于整个页面左上角的距离
  • screenX、screenY:相对于电脑屏幕左上角的距离

 

正确用法

//  在 a 标签上触发 mousedown 事件

cy.get('a').trigger('mousedown')

 

错误用法

// 不能直接通过 cy 调用

cy.trigger('mousedown')


// location 并不是 DOM 元素

cy.location().trigger('mousedown')

 

 

鼠标事件的栗子


前言

在 DOM 元素上触发事件之前,DOM 元素必须处于【可交互】状态(必须可见并 且不能禁用)

 

hover 的栗子

image.png

添加 options 的栗子


指定事件不应该冒泡

cy.get('#s-usersetting-top').trigger('mouseover', {bubbles: false})

默认情况下,指定的事件将在 DOM 树中冒泡。false 可以防止事件冒泡

 

设置 clientX 和 clientY

这将覆盖基于元素本身的默认自动定位(x、y),对于  mousemove  之类的事件很有用,可能需要将元素拖动到元素本身之外的地方,基于浏览器本身的X、Y坐标

cy.get('button').trigger('mousemove', { clientX: 200, clientY: 300 })

 

结尾


本文是博主基于对蔡超老师的《Cypress 从入门到精通》阅读理解完后输出的博文,并附上了自己的理解

对书籍感兴趣的,大家可以参考本篇博客:https://www.cnblogs.com/poloyy/p/13052972.html,考虑自身需求进行购买

 

我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=12vd92hxgwgj1

相关文章
|
6月前
|
测试技术
Cypress的skip 和only 字段如何使用?
Cypress的skip 和only 字段如何使用?
Cypress的skip 和only 字段如何使用?
|
4月前
|
网络协议 Serverless Python
函数计算操作报错合集之安装ebsynth_utility插件时报错,该如何处理
在使用函数计算服务(如阿里云函数计算)时,用户可能会遇到多种错误场景。以下是一些常见的操作报错及其可能的原因和解决方法,包括但不限于:1. 函数部署失败、2. 函数执行超时、3. 资源不足错误、4. 权限与访问错误、5. 依赖问题、6. 网络配置错误、7. 触发器配置错误、8. 日志与监控问题。
112 1
|
5月前
|
JSON 监控 Serverless
函数计算操作报错合集之执行提示Unrecognized option 'preset' ,该怎么办
在使用函数计算服务(如阿里云函数计算)时,用户可能会遇到多种错误场景。以下是一些常见的操作报错及其可能的原因和解决方法,包括但不限于:1. 函数部署失败、2. 函数执行超时、3. 资源不足错误、4. 权限与访问错误、5. 依赖问题、6. 网络配置错误、7. 触发器配置错误、8. 日志与监控问题。
105 0
|
5月前
|
JavaScript
vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。
vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。
|
5月前
|
JavaScript
vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保 路径正确,然后再试一次。
vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保 路径正确,然后再试一次。
|
6月前
|
Windows
无法将“ng”项识别为 cmdlet、函数、脚本文件或可运行程序的名称
无法将“ng”项识别为 cmdlet、函数、脚本文件或可运行程序的名称
149 0
|
6月前
|
Python Windows
Python 执行RD命令的问题汇总(无效开关 - “Image“。)
Python 执行RD命令的问题汇总(无效开关 - “Image“。)
87 0
|
关系型数据库 MySQL 数据安全/隐私保护
mysql : 无法将“mysql”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查
mysql : 无法将“mysql”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查
mysql : 无法将“mysql”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查
|
JSON Shell 测试技术
gookit/config - Go应用配置管理,支持多种格式,多文件加载,支持数据合并,解析环境变量名等等
gookit/config - Go应用配置管理,支持多种格式,多文件加载,支持数据合并,解析环境变量名,绑定数据到结构体等等
191 0
gookit/config - Go应用配置管理,支持多种格式,多文件加载,支持数据合并,解析环境变量名等等
|
前端开发
Cypress系列(22)- 可操作类型的命令 之 select()
Cypress系列(22)- 可操作类型的命令 之 select()
268 0
Cypress系列(22)- 可操作类型的命令 之 select()