Cypress系列（18）- 可操作类型的命令
原创Cypress系列（18）- 可操作类型的命令
原创
如果想从头学起Cypress，可以看下面的系列文章哦
https://www.cnblogs.com/poloyy/category/1768839.html
前言
- 啥是可操作类型？就是可以和 DOM 元素交互的命令，比如：点击，双击.....等等等
- 这些命令模拟用户和应用程序交互，Cypress 会触发浏览器事件，进而触发应用程序绑定的时间
下面着重讲点击操作，一共有三个命令
- click：单击
- dbclick：双击
- 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 将输出以下鼠标事件
接下来我们讲 type() 命令
前端 html 代码
后面栗子主要以这个页面为主哦
.type() 基础介绍
在 DOM 元素中输入内容
语法格式
// 输入文本
.type(text)
// 带参数输入文本
.type(text, options)正确写法
宗旨：先获取 DOM 元素，再对 DOM 元素进行 type 操作
错误写法
调用 type() 命令的都不是 DOM 元素，所以错误！
.type() 基础的栗子
输入正常文本的栗子
测试文件代码
测试结果
输入特殊字符的栗子
那么还支持哪些特殊字符呢？
带参数输入文本的栗子
有哪些参数可以传递呢？
测试文件代码
// 单个参数
.type("{selectall}", {parseSpecialCharSequences: false})
// 多个参数
.type("1234", {log:false , parseSpecialCharSequences: false})测试结果
.type() 更多的栗子
html 代码
下面举的栗子以这个 html 页面的元素为基础哦
<textarea> 标签的栗子
测试文件代码
测试结果
<option> 标签的栗子
测试文件代码
测试结果
type = 时间类型的 input 标签的栗子
- <input type="date">
- <input type="month">
- <input type="week">
- <input type="time">
测试文件代码
测试结果
.type() 结合键盘键的栗子
继续以上面栗子的 html 页面为基础
有哪些键盘架可以结合呢？
- {alt}
- {shift}
- {ctrl}
具体用法
// 等同于按 shift + alt + q
cy.get('input').type('{shift}{alt}Q')
// 按住 shift，然后输入 test
cy.get('input').type('{shift}test')说实话，我试过感觉没生效啊，按道理按住 shift 键输入内容应该是大写的，但是实际还是小写，后面再研究一波（感觉有点鸡肋，实际场景比较少用到又要按键盘又要输入内容，了解即可）
.type() 支持哪些元素调用
<body>
<textarea>
<input> 标签，且 type 属性是以下其中一个
- text
- password
- number
- date
- week
- month
- time
- datetime-local
- search
- url
- tel
.type() 会触发的事件 event
当传入了特殊字符、键盘键时，只触发了 keydown 事件
当传入了内容字符时，每个字符都会触发一系列的事件
- keydown
- keypress
- textInput
- input
- keyup
接下来我们讲 clear() 命令
作用
- 一看就知道是清空输入框的所有内容
- 有趣的是， .clear() 等价于 .type("{selectall}{backspace}")
语法格式
.clear()
.clear(options)正确用法
宗旨：需要先拿到 DOM 元素，且是 <input> 或 <textarea > 标签，再执行 clear() 操作
错误写法
options 参数
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。