Cypress：cy.click() 失败，因为该元素已与 DOM 分离

Question

我面临Cypress 4.7.0的问题。以下是我在尝试自动执行 Automationpractice.com 网站上的用户创建场景时收到的错误代码

该方法cy.click()失败，因为该元素已与 分离DOM。

<input type="password" class="is_required validate form-control" data-validate="isPasswd" name="passwd" id="passwd">

Cypress 需要附加元素才能DOM与它们交互。

之前运行的命令是：

cy.get()

该DOM元素可能在先前命令和当前命令之间的某个位置分离。

发生这种情况的常见情况：

• 您的 JS 框架会异步重新渲染。
• 您的应用程序代码对事件触发做出反应并删除了该元素。

上述场景的代码示例：

describe("Cypress demo script", () => {
  it("triage DOM issue", () => {
    const uuid = () => Cypress._.random(0, 1e6);
    const id = uuid();

    cy.visit("http://automationpractice.com/index.php");
    cy.wait(2000);
    cy.contains("Sign in").click();
    const email = "tester" + id + "@yopmail.com";
    cy.get("#email_create").type(email);
    cy.get("#SubmitCreate > span").click();

    cy.get("form#account-creation_form").within(($form1) => {
      cy.get("input#id_gender1").click();
      cy.get("input#customer_firstname").type("Automation");
      cy.get("input#customer_lastname").type("tester");
      cy.get("input#passwd").click({ force: true }).type("Qwerty@123");
    });
  });
});

根据搜索，建议使用{force: true}，但它不起作用。另外，我尝试将搜索嵌入到表单中，但也不起作用。

Answer 1

从Cypress 版本 12开始，有新的代码（内部）用于检查与 DOM 分离的元素，因此它现在不会抛出错误，而是自动执行错误消息建议的操作并重新查询选择器。

请参阅https://docs.cypress.io/guides/references/changelog#12-0-0

此外，在此版本中，Cypress 管理 DOM 元素解析的方式也得到了增强，以减少由于维护过时的 DOM 引用而出现分离 DOM 错误的可能性。如果您想了解更多信息，我们已经更新了我们的[重试能力指南[(https://docs.cypress.io/guides/core-concepts/retry-ability)]，其中包含所有详细信息。