如何使用Cypress cy.each()遍历ul下li元素执行操作与断言

实现方案 #

直接在你现有的each遍历逻辑内，直接对当前卡片的按钮执行点击操作即可，Cypress 的 cy.each()会自动等待当前迭代的所有异步命令执行完成后，才会进入下一个卡片的处理，不需要额外添加循环控制逻辑。

优化后的完整代码如下：

it('Each Card has an "i", "Download" and "More Actions" button and can be operated normally', () => {
    cy.get('[href="/x/y"] > .w-full').click()
    // 建议替换硬等待为接口等待或元素可见断言，提升用例稳定性
    cy.get('.auto-rows-fr > li')
    .should('have.length', 25)
    .each((currentCard) => {
      // 用find替代多层children，简化选择器逻辑
      const btnBar = cy.wrap(currentCard).find('.flex.justify-between')
      
      // 原有存在性断言
      btnBar.find('[title="More information"]').should('exist')
      btnBar.find('[title="Download file"]').should('exist')
      btnBar.find('[title="More options"]').should('exist')

      // 新增按钮点击操作
      btnBar.find('[title="More information"]').click()
      // 若点击后弹出模态框/菜单，此处添加对应的关闭逻辑，示例：
      // cy.get('.modal-close').click()
      
      btnBar.find('[title="Download file"]').click()
      // 若下载有确认弹窗，同理添加处理逻辑
      
      btnBar.find('[title="More options"]').click()
      // 操作完成后关闭弹出层，保证下一个卡片操作时页面状态正常
    })
});

注意事项 #

• 多层链式children()替换为find()方法，配合组合类选择器的写法更简洁，后续维护成本更低。
• 点击按钮后如果有弹出元素，必须添加对应的关闭/收起逻辑，避免元素遮挡导致下一个卡片的元素定位失败。
• 尽量避免使用cy.wait(2000)这类硬等待，替换为等待对应接口请求完成，或者等待目标元素可见的断言，可大幅降低网络波动导致的用例执行失败概率。

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