Cypress点击指定名称对应条目下Done按钮报DOM分离错误如何解决

• 你遇到的detached from DOM报错本质是Ant-React项目的列表重渲染机制导致：当Cypress链式查询过程中触发了组件重渲染，你之前查找到的元素引用会被销毁，再执行点击就会触发该报错
• 原代码本身也存在两处明显错误：
  • 选择器div:contains('name1')缺少文本空格，和HTML中的name 1不匹配，会导致定位到错误的元素甚至完全找不到元素
  • 多余的invoke('show')调用和{ multiple: true }配置，可能会触发不必要的DOM更新，加剧元素脱离DOM的问题

方案1：限定查询范围（最常用） #

直接定位到对应item容器后再查找按钮，利用Cypress内置的重试机制避免元素脱离问题：

// 先定位包含name 1文本的.item容器
cy.contains('.item', 'name 1')
  // 在当前item范围内查找done按钮
  .find('button:contains("done")')
  .click()

方案2：用within限定上下文（稳定性最高） #

如果列表频繁重渲染，用within将所有操作限定在目标item的DOM范围内，Cypress会自动重试上下文内的元素查询：

cy.contains('.item', 'name 1').within(() => {
  cy.get('button:contains("done")').click()
})

• 推荐给测试专用的元素添加data-testid属性，比如给item加data-testid="list-item"、给按钮加data-testid="done-btn"，用属性选择器定位完全不依赖class、文本的变化，稳定性远高于文本和class选择器
• 不要添加多余的操作配置，除非明确需要，否则invoke('show')、eq(0)、{ multiple: true }这类冗余配置反而会增加测试的不可控性

内容的提问来源于stack exchange，提问作者Александр