Cypress点击按钮报错已脱离DOM但Cypress.dom.isDetached返回false如何解决

问题根因 #

你遇到的报错矛盾、点击无效问题，核心是InovuaReactDataGrid采用虚拟滚动逻辑，行元素会在视图重排时频繁销毁重建：

• 直接调用cy.click()时，Cypress执行「查询元素→校验状态→触发点击」的流程间隙，网格刚好触发重渲染，查询阶段拿到的元素到点击执行时已被销毁，因此抛出detached报错
• then()回调中执行Cypress.dom.isDetached时，拿到的是刚查询到的元素引用，此时网格还未完成重渲染，元素仍附着在DOM上，所以断言通过；但执行$el.click()的瞬间，元素已被新渲染的同位置元素替换，因此点击不生效，同时网格重排+AntD下拉框渲染的双重计算触发了ResizeObserver循环超限报错。

解决方案 #

1. 优先使用Cypress自动重试规避重渲染间隙 #

先通过should断言元素可交互，利用Cypress内置的重试机制，等待元素状态稳定后再执行点击：

cy.contains('.InovuaReactDataGrid__cell','CypressWarehouse')
  .siblings()
  .find('button')
  .should('be.visible')
  .and('not.be.disabled')
  .click();

2. 关闭点击前置校验 #

如果重渲染频率高，可增加force参数跳过元素可交互性校验，强制触发点击：

cy.contains('.InovuaReactDataGrid__cell','CypressWarehouse')
  .siblings()
  .find('button')
  .click({force: true});

3. 原生事件触发点击 #

如果上述方案仍点击无效，可直接通过原生事件触发，绕过jQuery封装的点击逻辑：

cy.contains('.InovuaReactDataGrid__cell','CypressWarehouse')
  .siblings()
  .find('button')
  .then(($el) => {
    $el[0].dispatchEvent(new Event('click', { bubbles: true }));
  });

4. 忽略ResizeObserver非阻断报错 #

在cypress/support/e2e.js（旧版为cypress/support/index.js）中添加如下配置，屏蔽该类报错对测试流程的影响：

Cypress.on('uncaught:exception', (err) => {
  if (err.message.includes('ResizeObserver loop limit exceeded')) {
    return false;
  }
});

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