Cypress中recurse方法使用问题：DOM元素分离致cy.eq()失败

问题现象 #

首次运行以下代码时正常，第二次执行失败并报错：

cy.eq() failed because this element is detached from the DOM

Cypress要求元素必须附加在DOM中才能与之交互，上一个执行的命令是cy.get()，该DOM元素可能在前后命令执行期间被分离。常见触发原因：

• JS框架异步重新渲染
• 应用代码响应事件触发并移除元素

本次所有2项主题验证均失败，代码示例：

recurse(
  () => cy.get('selectorA').should(Cypress._.noop),
  ($button) => $button.length === 0,
  {
    post() {
      cy.get('selectorA').eq(0).trigger('mouseover', { bubbles: false });
      cy.get('selectorB').eq(0).click({ force: true }).wait(1000);
    },
    delay:1000,
    limit:10,
    timeout:15000
  }
)

解决方案 #

1. 每次操作前重新查询并验证元素状态 #

避免依赖缓存的元素引用，在post()的每一步操作前重新获取元素，并添加断言确保元素存在且可见：

recurse(
  () => cy.get('selectorA').should('exist'),
  ($button) => $button.length === 0,
  {
    post() {
      cy.get('selectorA').eq(0).should('be.visible').trigger('mouseover', { bubbles: false });
      cy.get('selectorB').eq(0).should('be.enabled').click();
      // 等待DOM更新完成，替换固定时长的wait
      cy.get('selectorA').should('exist');
    },
    delay: 1000,
    limit: 10,
    timeout: 15000
  }
)

2. 优化递归检查逻辑 #

原代码中should(Cypress._.noop)不会验证元素的可用性，改为检查元素可见性，确保每次循环时元素处于有效状态：

recurse(
  // 确保元素存在且可见，避免无效循环
  () => cy.get('selectorA').should('be.visible'),
  ($button) => $button.length === 0,
  {
    post() {
      cy.get('selectorA').eq(0).trigger('mouseover', { bubbles: false });
      cy.get('selectorB').eq(0).click();
      // 等待操作后的DOM稳定
      cy.waitUntil(() => cy.get('selectorA').then($el => $el.is(':visible')));
    },
    delay: 1000,
    limit: 10,
    timeout: 15000
  }
)

3. 移除强制点击（force: true） #

force: true会跳过Cypress的元素可交互性检查，可能在元素即将被DOM移除时执行操作，导致后续元素失效。建议确保元素可交互后再执行点击：

// 替换原强制点击逻辑
cy.get('selectorB').eq(0).should('be.visible').should('be.enabled').click();

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