Cypress遍历点击元素时遭遇DOM脱离错误的技术求助

这个问题我之前在测试Angular SPA时也碰到过，核心原因是Angular路由跳转后，首页的DOM会被完全重新渲染——你一开始用cy.get('a[data-cy=submit]').each()获取的元素集合，在第一次跳转返回后，原来的DOM节点已经被销毁，剩下的元素自然就脱离了当前DOM树，所以Cypress会抛出"detached from the DOM"的错误。

给你两种可靠的解决方案，优先推荐第一种：

方案一：基于按钮数量循环，每次重新获取元素 #

先获取首页按钮的总数，然后循环对应次数，每次循环都重新定位当前要点击的按钮（确保操作的是最新DOM中的元素）：

describe('Select products', function () { 
  before(() => { 
    cy.visit('http://localhost:4200/') 
  }) 

  it('Clicking through products', function () { 
    // 先获取按钮的总数量
    cy.get('a[data-cy=submit]').its('length').then((buttonCount) => {
      // 循环处理每个按钮
      for (let index = 0; index < buttonCount; index++) {
        // 每次都重新获取当前索引的按钮（基于最新DOM）
        cy.get('a[data-cy=submit]').eq(index).click()
        
        // 可选：添加断言确保第二页已加载（让测试更稳定）
        cy.contains('go back').should('be.visible')
        
        // 点击返回首页
        cy.contains('go back').click()
        
        // 可选：断言确认回到首页
        cy.get('a[data-cy=submit]').should('be.visible')
      }
    })
  }) 
})

方案二：递归处理（适合动态变化的按钮列表） #

如果你的按钮列表可能在返回后有变化，递归方式会更灵活——每次处理完一个按钮后，重新获取剩余的按钮并继续：

describe('Select products', function () { 
  before(() => { 
    cy.visit('http://localhost:4200/') 
  }) 

  const processButtons = () => {
    cy.get('a[data-cy=submit]').then(($buttons) => {
      if ($buttons.length === 0) {
        // 所有按钮处理完毕，结束递归
        return
      }
      // 处理第一个按钮
      cy.wrap($buttons.first()).click()
      cy.contains('go back').should('be.visible').click()
      // 递归处理剩余按钮
      processButtons()
    })
  }

  it('Clicking through products', function () { 
    processButtons()
  }) 
})

关键说明 #

• 避免一次性获取所有元素后循环：因为SPA路由跳转后，初始DOM会被销毁，旧元素引用失效。
• 添加必要的断言：比如确认目标元素可见，能让测试更稳定，避免页面加载延迟导致的操作失败。

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