如何修复Cypress中‘元素已从DOM分离’错误

错误原因 #

你当前的代码通过.each()一次性获取了所有文章链接的DOM元素集合，但点击文章进入详情页再返回列表页时，页面会触发重新渲染，最初获取的那些DOM元素已经被销毁并重新生成，导致缓存的$el脱离了当前DOM树，Cypress无法对其执行点击操作。

解决方案 #

改用索引循环+每次重新查询DOM元素的方式，确保每次操作的都是当前DOM中存在的元素：

// 先获取文章链接总数，最多遍历10篇
cy.get('main[id="main"]>article>header a').its('length').then(length => {
  const targetCount = Math.min(length, 10);
  for (let i = 0; i < targetCount; i++) {
    // 每次循环重新查询元素，确保操作的是当前DOM中的节点
    cy.get('main[id="main"]>article>header a').eq(i).click({ force: true });
    
    // 在这里执行你的页面断言逻辑
    // 示例：断言文章标题存在
    // cy.get('article h1').should('exist');
    
    // 返回列表页
    cy.go(-1);
    // 等待列表页DOM重新稳定，避免后续查询出错
    cy.get('main[id="main"]>article>header a').should('be.visible');
  }
});

关键说明 #

• 每次循环都重新调用cy.get()查询元素，避免使用之前缓存的已失效DOM节点
• 返回列表页后，添加cy.get(...).should('be.visible')等待页面渲染完成，确保后续操作的元素已存在于DOM中

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