如何在Cypress的each循环内点击跳转而不报错？

报错原因 #

你的测试代码报错是因为：点击卡片触发页面跳转后，原页面的DOM被卸载，each循环中保存的$clickableCardEl已经不再属于当前页面的DOM。Cypress无法在页面更新后继续基于失效的DOM元素执行后续命令，因此抛出该错误。

修复方案 #

核心思路是每次循环都重新查询当前页面的卡片元素，避免依赖初始页面的失效DOM引用。同时替换硬等待为断言式等待，提升测试稳定性：

it('cards should not redirect to 404 page', () => {
  // 先获取初始页面的卡片总数
  cy.getByCyId('clickable-card').its('length').then((cardCount) => {
    for (let i = 0; i < cardCount; i++) {
      // 每次循环重新定位当前页面的第i个卡片
      cy.getByCyId('clickable-card').eq(i).click();
      
      // 用目标页面的元素断言替代硬等待，确保页面加载完成
      cy.getByCyId('target-page-content').should('be.visible');
      
      // 验证404内容不存在
      cy.getByCyId('not-found-content').should('not.exist');
      
      // 返回初始页面
      cy.go('back');
      
      // 等待初始页面的卡片重新渲染完成
      cy.getByCyId('clickable-card').should('be.visible');
    }
  });
});

关键优化点 #

• 避免失效DOM引用：放弃each循环中保存的初始DOM元素，改用for循环结合eq(i)每次重新查询卡片，确保操作的是当前页面的有效元素。
• 替换硬等待：去掉wait(3000)，改用目标页面的元素可见性断言，让测试自动等待页面加载完成，比固定等待更可靠。
• 回退后的状态校验：返回初始页面后，等待卡片重新可见，确保页面完全回退并渲染完成，再进行下一次循环。

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