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

【问题标题】：How to fix "cy.find() failed because this element is detached from the DOM" in a loop?如何在循环中修复“cy.find() 失败，因为该元素与 DOM 分离”？
【发布时间】：2021-11-08 04:51:24
【问题描述】：

我有一个表格，我需要填写每个单元格。

首先，我得到第一行，每个单元格都使用 find() 方法。

但我遇到的问题是元素以某种方式与 DOM 分离：

cy.find() 失败，因为此元素与 DOM 分离。之前运行的命令是： cy.wrap()

这是我的代码：

cy.get('.ag-center-cols-container .ag-row').each(($el, index, $list) => {
     cy.wrap($el).find('div[col-id="account"]').type("30000")
 })

我尝试了不同的方法，但没有找到解决方案。

例如：

cy.get('#row').each(($el, index, $list) => {

  cy.wrap($el).should($el => {
    expect(Cypress.dom.isAttached($el), 'is attached').to.eq(true)
  })
  .find('div[col-id="account"]').type("30000")

})

有错误：

10000 毫秒后重试超时：附加：预期 false 等于 true

我是赛普拉斯的新手，据我了解，在这种情况下我需要使用 cy.wrap()，以便能够在元素上使用赛普拉斯命令。

我在这个表中有 2 行，我试图使用每一行来创建一个可重用的函数，以防我想在以后添加更多行数据。

感谢任何建议。

谢谢！

HTML:

【问题讨论】：

可以帮助github.com/cypress-io/cypress/issues/5743
您不能在div 上使用type()，请参阅docs.cypress.io/api/commands/type#Supported-Elements。您需要获取input 或type() 支持的任何元素。它还可以解决您的DOM detached 问题。
请将您的 html 添加到问题中。
glebbahmutov.com/blog/detached
@PeaceAndQuiet 我将代码更改为：cy.get('.ag-center-cols-container .ag-row').each(($el, index, $list) => { cy.wrap($el).find('div[col-id="account"] div input').type("30000") }) 我仍然得到 detached from DOM 错误。

标签： cypress

【解决方案1】：

由于您的所有#row 在get() 命令中被打包到jquery 元素中，因此必须在后台执行一些页面刷新代码，当您尝试在wrap() 中回收这些jquery 元素以获取您的细胞。我曾经尝试重新 get() 循环内的元素，它对我有用。

cy.get('#row').each(($el, index, $list) => {
    cy.get('#row').eq(index).find('div[col-id="account"] input').type('30000');
});

【讨论】：

我试过这个，现在我得到： 10000 毫秒后重试超时：cy.type() 失败，因为这个元素与 DOM 分离。赛普拉斯要求在 DOM 中附加元素以与它们交互。之前运行的命令是： > cy.find() 我还注意到，如果我在 cy.get('#row').each 之前添加一个超时 ..... 就像在 cy.wait(2000) 中一样工作正常，但这违反了最佳做法
仅供参考 cy.wait 是不错的解决方案，观看 Bahmutov 的视频，他也使用 wait glebbahmutov.com/blog/detached
@Jon-bon-jovi 是对的。有时，最好的解决方案是在工作测试执行上浪费 2 秒时间，而不是浪费更多时间试图弄清楚如何正确同步。我不喜欢cy.wait()，但有时我不得不使用它。
好的，我明白了，但问题是我必须填写大约 24 个单元格/行，所以 cy.wait(500) （工作正常）在每个单元格很多之前

【解决方案2】：

您可以尝试以下几种方法：

使用带有超时的visible 断言：

cy.get('.ag-center-cols-container.ag-row')
  .should('be.visible')
  .each(($el, index, $list) => {
    cy.wrap($el)
      .find('div[col-id="account"]')
      .should('be.visible', {timeout: 6000})
      .type('30000')
  })

输入{force: true}:

cy.get('.ag-center-cols-container.ag-row')
  .should('be.visible')
  .each(($el, index, $list) => {
    cy.wrap($el)
      .find('div[col-id="account"]')
      .should('be.visible', {timeout: 6000})
      .type('30000', {force: true})
  })

【讨论】：