Cypress系列（18）- 可操作类型的命令 之 点击命令

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

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

 

前言

• 啥是可操作类型？就是可以和 DOM 元素交互的命令，比如：点击，双击.....等等等
• 这些命令模拟用户和应用程序交互，Cypress 会触发浏览器事件，进而触发应用程序绑定的时间

这一篇着重讲点击操作，一共有三个命令

1. click：单击
2. dbclick：双击
3. rightclick：右键

 

.click() 的语法和用法

单击某个元素

 

六种基础语法格式

// 单击某个元素
.click()

// 带参数的单击
.click(options)

// 在某个位置点击
.click(position)

// 在某个位置点击，且带参数
.click(position, options)

// 根据页面坐标点击
.click(x, y)

// 根据页面坐标点击，且带参数
.click(x, y, options)

 

正确用法

宗旨：先获取 DOM 元素，再对 DOM 元素操作

 

错误用法

 

position 位置参数

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

 

坐标 x, y

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

 

options 可选参数

共有四个

 

 

如何传 options ？

•  .click({ multiple: true }) 
•  .click({ multiple: true , force: true}) 

 

force: true 的作用

背景

• Cypress 可以通过 Test Runner 的快照找到阻止 DOM 元素交互的情况，但某些情况下可能会阻碍测试的进行
• 比如：有一个嵌套的导航结构，用户必须将鼠标 hover 在一个非常特定的模式中，才能拿到所需的链接
• 当测试时，其实我们只是想获取链接而已，前面过多的繁琐操作可能会导致测试失败

 

作用

• 当设置了 force: true 时，Cypress 会强制操作命令的发生，避开前面的所有检查
• 你可以传递 { force: true } 给大多数操作命令

 

栗子

// 强制点击，和所有后续事件
// 即使该元素 “不可操作”，也会触发点击操作
cy.get('button').click({ force: true })

 

当使用 force 时，将执行这些操作

• 继续执行所有默认操作
• 强制在元素上触发事件

 

当使用 force 时，将不会执行这些操作

• 滚动到视图中
• 确保可见
• 确保未禁用
• 确保没有分离
• 确保它不是只读的
• 确保它没有动画
• 确保未覆盖
• 向后代触发事件

 

总结

总而言之， { force: true } 跳过检查，它将始终在所需元素处触发事件

 

.click() 具体的栗子

.click() 的栗子

测试文件代码

 

 

测试结果

 

.click(position)

测试文件代码

 

测试结果

 

.click(x, y)

测试文件代码

 

测试结果

 

{force: true} 的栗子

.click(options)

 

.click(position, options)

 

.click(x, y, options)

 

{multiple : true } 的栗子

测试文件代码

 

测试结果

 cy.get(' ul > li ') 共匹配四个 DOM 元素，他们均触发单击操作

 

单击组合键

 .click() 命令还可以与 .type() 命令结合使用修饰符来触发组合键操作，以便在单击时结合键盘操作，例如ALT + click

 

以下修饰符可以和 .click() 结合使用

修饰符	作用	别名
{alt}	等价于 alt 键	{option}
{ctrl}	等价于 ctrl 键	{control}
{shift}	等价于 shift 键

 

栗子

 

.dblclick()

双击，跟 click() 的语法 & 用法一致，只是变成了双击

cy.get("#main1").dblclick()
cy.get("#main1").dblclick("top")
cy.get("#main1").dblclick(15, 15)

 

.rightclick()

右键，跟 click() 的语法 & 用法一致，只是变成了右键点击

cy.get("#li1").rightclick()
cy.get("#li1").rightclick("top")
cy.get("#li1").rightclick(15, 15)

 

.click() 注意事项

可操作性

执行 .click()  必须是 DOM 元素达到了可操作状态

 

关于断言

 .click() 将自动等待元素达到可操作状态。

 .click() 将自动等待后面链接的断言通过

 

超时时间

 .click() 如果 DOM 元素一直达不到可操作状态，可能会超时

 .click() 如果后面链接的断言一直不通过，可能会超时

 

.click() 会触发的鼠标事件

在命令日志中单击 click 时，控制台console 将输出以下鼠标事件

 

结尾

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

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

 

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