如何修复“cy.find() 失败，因为此元素与 DOM 分离”？答案

【问题标题】：How to fix "cy.find() failed because this element is detached from the DOM"?如何修复“cy.find() 失败，因为此元素与 DOM 分离”？
【发布时间】：2022-11-23 06:41:31
【问题描述】：

我编写了代码来循环查找每个元素，如果页面上存在该元素，则在该项目中单击删除。但是，如果对象超过 3 个，则代码会抛出错误。请给我一个修复建议，因为在尝试各种不同的场景后我不知道如何解决这个问题。

这是我的代码：

cy.get('.row.js-all-talking-points-container').find('.card.obm-card-secondary.obm-card-agenda.h-100.mx-3.mx-sm- 0').each(($el, index, $list) => {

    const getTextobjective = $el.find('span.agenda-item-title.text-muted').text()
if (getTextobjective.includes('Objectives'))
{
    cy.wrap($el).find('.btn.btn-outline-primary.js-remove-talking-point.js-remove-handler-added').should('be.visible').click({force: true});
  
    
}

})



I tried to find each object in the page and if it exists then get locator of delete button in each objects then delete those items but I get an error: "cy.find() failed because this element is detached from the DOM"

【问题讨论】：

标签： javascript cypress

【解决方案1】：

您可以通过重新查询分离的元素来修复分离的错误。

此外，如果您对包含“目标”的文本进行预过滤，则循环会更简单（不需要 if()）。

cy.get('.row.js-all-talking-points-container')
  .find('.card.obm-card-secondary.obm-card-agenda.h-100.mx-3.mx-sm-0')
  .filter(':contains(Objectives)')     
  .each(($el, index) => {

    // fresh query of .card each time in the loop
    cy.get('.card.obm-card-secondary.obm-card-agenda.h-100.mx-3.mx-sm-0')
      .eq(index)
      .find('.btn.btn-outline-primary.js-remove-talking-point.js-remove-handler-added')
      .should('be.visible')
      .click();
    }
  })

【讨论】：