Cypress - 元素从 DOM 错误中分离答案

【问题标题】：Cypress - element is detached from the DOM errorCypress - 元素从 DOM 错误中分离
【发布时间】：2022-12-18 10:33:07
【问题描述】：

我测试了我们的（几乎所有组件都是由 DevExtreme 创建的）Web 应用程序，但我遇到了一个奇怪的重新渲染问题。

我张贴了错误消息的图片。如您所见，“元素存在”和“元素可见”断言都通过了。下一个操作命令 click、type、clear 有时会给我这个错误。

我观察了网络，但没有可疑的 API 请求。

我该如何解决？

  cy.get("div.c-title.pe-2.me-2.active")
    .parent()
    .find("[name='Property Unsafe']")
    .parent()
    .find(".dx-item-content")
    .contains("Yes")
    .scrollIntoView()
    .should("be.visible")
    .should("be.exist")
    .click();

您可以看到我正在处理哪些组件。（我经常从每个组件中得到类似的错误，而不仅仅是下拉或文本输入）

你好，问题还是一样。不工作。正如您在此处看到的最新更新：我使用了Cypress.dom.isAttached($el) 我重新查询，直到使用 Cypress 递归库将元素附加到 dom 中。结果还是一样。


  recurse(
    () =>
      cy.get(
        "#txtErrormeter_number > .dx-texteditor-container > .dx-texteditor-input-container > .dx-texteditor-input"
      ),
    ($el) => Cypress.dom.isAttached($el),
    {
      debugLog: true,
      log: true,
      limit: 50, // max number of iterations
      timeout: 10000, // time limit in ms
      delay: 250, // delay before next iteration, ms
    }
  ).then(() => {
    cy.get(
      "#txtErrormeter_number > .dx-texteditor-container > .dx-texteditor-input-container > .dx-texteditor-input"
    ).then(($el) => {
      if (Cypress.dom.isAttached($el)) {
        cy.log("aattacchheeed");
        cy.wrap($el)
          .clear({ force: true })
          .type(variables.meterId, { force: true });
      } else {
        cy.log("NOOOOOOTTTTTTTTTT aattacchheeed");
      }
    });
  });

【问题讨论】：

标签： javascript dom automation cypress

【解决方案1】：

Cypress 日志说您在 scrollIntoView() 上方有两行 .click()，但它不在发布的测试代码中。

您应该在第一次单击后拆分长命令，这很可能会导致重新渲染。

无论您在上面选择了什么，都应该在它之后再次选择点击#1。

我不知道上下文是什么，只提到了 DevExtreme。如果您提供有关控件（选择、输入、下拉）的更多信息，它将更有用。

此外，正确的附件检查是isAttached()而不是visible或exist。

.then(($el) => {
  expect(Cypress.dom.isAttached($el).to.eq(true)
})

【讨论】：

你好，我添加了更多信息。是的，代码不一样，但这段代码也有错误，我只是想展示基本的代码。非常感谢您的帮助，我会尝试 isAttached() 命令，也许它会解决我的问题。