携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情
each作用
遍历数组数据结构（具有 length 属性的数组或对象）
语法格式
.each(callbackFn)
callbackFn
- 回调函数
- 可以拥有三个参数：value、index、collection
正确用法
// 遍历每个 li 元素
cy.get('ul>li').each(() => {...})
// 遍历每个 cookie
cy.getCookies().each(() => {...})
错误用法
// 不能直接通过 cy 调用
cy.each(() => {...})
// location() 返回的结果不是一个数组
cy.location().each(() => {...})
命令返回结果
返回和上一条命令一样的结果
实际栗子
代码
栗子一的结果
遍历三次，每次都可以获取 li 元素和索引值（从 0 开始）
栗子二的结果
- 若想提前结束遍历，可以通过判断然后直接 return false
- 若想在 .each() 命令后继续操作原始数组（未遍历前），可以直接在 .each() 命令后接 .then() 命令进行操作
within 作用
- 将所有后续 cy 命令的作用域限定在此元素内
- 在特定的元素组（例如 ）中工作时很有用
语法格式
.within(callbackFn)
.within(options, callbackFn)
callbackFn
- 回调函数
- 第一个参数是上一条命令的返回结果（必须是元素）
options 参数
log： 是否将命令显示到命令日志中，默认 true
正确用法
cy.get('form').within(($form) => {
// 在回调函数里，cy 命令的作用域将限定在 form 中
})
错误用法
// 不能直接他通过 cy 调用
cy.within(() => {})
// getCookies() 返回的不是一个元素
cy.getCookies().within(() => {})
命令返回结果
返回和上一条命令一样的结果
实际栗子
代码
重点：回调函数里的 cy.get() 只会从 form 表单里面找元素，而不是整个页面
get() 和 within() 命令的返回结果
两个命令的返回结果都是 form 表单
