如果想从头学起Cypress,可以看下面的系列文章哦
https://www.cnblogs.com/poloyy/category/1768839.html
这一篇着重讲点击操作,一共有三个命令
单击某个元素
// 单击某个元素
.click()
// 带参数的单击
.click(options)
// 在某个位置点击
.click(position)
// 在某个位置点击,且带参数
.click(position, options)
// 根据页面坐标点击
.click(x, y)
// 根据页面坐标点击,且带参数
.click(x, y, options)
宗旨:先获取 DOM 元素,再对 DOM 元素操作
每个元素都有九个 position,具体可看下图
距离 DOM 元素左上角的坐标,x 是横轴,y 是竖轴
共有四个
.click({ multiple: true })
.click({ multiple: true , force: true})
force: true
{ force: true }
// 强制点击,和所有后续事件
// 即使该元素 “不可操作”,也会触发点击操作
cy.get('button').click({ force: true })
总而言之, { force: true } 跳过检查,它将始终在所需元素处触发事件
cy.get(' ul > li ') 共匹配四个 DOM 元素,他们均触发单击操作
.click() 命令还可以与 .type() 命令结合使用修饰符来触发组合键操作,以便在单击时结合键盘操作,例如ALT + click
修饰符 | 作用 | 别名 |
---|---|---|
{alt} | 等价于 alt 键 | {option} |
{ctrl} | 等价于 ctrl 键 | {control} |
{shift} | 等价于 shift 键 |
双击,跟 click() 的语法 & 用法一致,只是变成了双击
cy.get("#main1").dblclick()
cy.get("#main1").dblclick("top")
cy.get("#main1").dblclick(15, 15)
右键,跟 click() 的语法 & 用法一致,只是变成了右键点击
cy.get("#li1").rightclick()
cy.get("#li1").rightclick("top")
cy.get("#li1").rightclick(15, 15)
执行 .click() 必须是 DOM 元素达到了可操作状态
.click() 将自动等待元素达到可操作状态。
.click() 将自动等待后面链接的断言通过
.click() 如果 DOM 元素一直达不到可操作状态,可能会超时
.click() 如果后面链接的断言一直不通过,可能会超时
在命令日志中单击 click 时,控制台console 将输出以下鼠标事件
结尾
本文是博主基于对蔡超老师的《Cypress 从入门到精通》阅读理解完后输出的博文,并附上了自己的理解