Cypress如何循环遍历页面分散的同class同名元素依次执行命令

只要元素有共同可定位的class、name属性，不需要关心元素是否在同一父容器/列表下，直接通过全局选择器抓取后遍历即可，具体实现如下：

• 基础实现（元素无动态刷新场景优先用）
  直接用cy.each()遍历匹配到的元素集合，Cypress会自动按顺序执行每个元素对应的操作队列，不会出现异步执行顺序错乱的问题，示例代码：

// 替换成你实际的公共class、name属性选择器，无需绑定父容器，全局自动匹配
const targetSelector = '.common-class[name="common-name"]'

cy.get(targetSelector, { timeout: 5000 }) // 加超时兼容动态渲染的元素
  .should('have.length', 4) // 可选：提前校验匹配到的元素数量和预期一致，避免漏选
  .each(($element, index) => {
    cy.log(`开始执行第${index + 1}个元素的操作`)
    // 把遍历拿到的DOM元素包装成Cypress对象
    const $currentItem = cy.wrap($element)
    
    // 往下直接写你预设的命令集即可
    $currentItem.scrollIntoView({ offset: { top: -100, left: 0 } }) // 滚动到可视区域，避免非视口元素操作报错
    $currentItem.click()
    // 例：点击后配套操作、断言都可以直接追加
    // cy.get('.action-tip').should('be.visible')
    // $currentItem.type('test content')
  })

关键提醒：遍历回调里拿到的$element是jQuery包装的原生DOM对象，不能直接调用Cypress命令，必须用cy.wrap()包装后才能链式调用click、type这类Cypress方法。

• 兼容实现（元素操作会触发DOM刷新场景用）
  如果操作某个元素后会触发页面重绘、DOM更新，之前一次性拿到的元素集合会失效（报element detached from DOM错误），这时候用索引循环、每次重新查询元素的写法更稳定：

const targetSelector = '.common-class[name="common-name"]'
// 先获取匹配到的元素总数量
cy.get(targetSelector).its('length').then(targetTotal => {
  // 按索引循环逐个操作
  for (let i = 0; i < targetTotal; i++) {
    // 每次循环重新查询第i个元素，避免DOM更新导致引用失效
    cy.get(targetSelector).eq(i).as(`currentItem_${i}`)
    cy.get(`@currentItem_${i}`).scrollIntoView()
    cy.get(`@currentItem_${i}`).click()
    // 执行预设命令集
  }
})

• 常见踩坑说明
  • 不要直接用原生Array.prototype.forEach遍历Cypress查询结果，Cypress命令是异步入队执行的，原生遍历无法保证执行顺序
  • 选择器不需要绑定父级容器，CSS选择器默认是全局匹配规则，只要元素属性匹配，无论在DOM树的哪个层级都能被正常抓取
  • 如果元素是懒加载、接口返回后才渲染的，给cy.get()加足够的超时时间即可，不需要额外写wait等待

内容的提问来源于stack exchange，提问作者user18119766