如何解决Cypress循环中“cy.find()因元素脱离DOM失败”的报错

错误原因 #

你使用的AG Grid类可编辑表格，在单元格内容修改后会触发行DOM重渲染，你用each()遍历的是首次cy.get()获取的静态行元素集合，第一行编辑完成后，剩余行元素已经被框架销毁重建，原集合里的元素自然脱离了DOM，无论加附着校验还是直接wrap()都会失败。

可行解决方案 #

不要复用首次查询拿到的静态元素集合，每次编辑行都重新查询对应索引的行元素，确保拿到的是当前DOM中真实存在的元素：

// 先获取当前表格的总行数
cy.get('.ag-center-cols-container .ag-row').its('length').then(rowCount => {
  // 按索引逐个处理行，每次重新查询
  for (let i = 0; i < rowCount; i++) {
    cy.get('.ag-center-cols-container .ag-row')
      .eq(i)
      .find('div[col-id="account"]')
      .type("30000")
  }
})

特殊场景适配 #

如果你的表格开启了虚拟滚动，超出视口的行不会渲染在DOM中，可以加scrollIntoView()确保目标行被加载：

cy.get('.ag-center-cols-container .ag-row')
  .eq(i)
  .scrollIntoView() // 滚动到当前行，触发展示后再操作
  .find('div[col-id="account"]')
  .type("30000")

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