收到“cy.click 失败，因为执行此命令时页面已更新”错误

Question

我编写了这段代码来单击下拉列表的第一个选项并在 Cypress 中运行它

it('Choosing tag', () => {
    cy.get('[data-appearance="textfield"]').eq(1).click();
    cy.get('[role="option"]').eq(0).as('option').should('be.visible');
    cy.get('@option').then(($option) => {
      cy.wrap($option).click();
    });
  });

但是在 cy.click 阶段我收到了这个错误

4050 毫秒后超时重试：cy.click() 失败，因为执行此命令时页面已更新。赛普拉斯尝试根据此查询来定位元素：

<button.ng-star-inserted>

我们最初找到了匹配的元素，但在等待它们变得可操作时，它们从页面中消失了。发生这种情况的常见情况：您的 JS 框架异步重新渲染您的应用程序代码对事件触发做出反应并删除了元素

通常可以通过打破链条来解决这个问题。例如，重写：

cy.get('button').click().click() 到 cy.get('button').as('btn').click() cy.get('@btn').click()

正如您在我的代码中看到的，我遵循了错误文本中的建议，但没有帮助。当我以用户身份访问该页面时，所需的元素是可单击的。

我希望有办法解决这个问题。谢谢。

Answer 1

要停止测试等待可操作性，您可以添加该{force:true}选项。

这意味着您将使用旧版本的按钮，但这可能是解决问题的最快方法。

没有必要then()和wrap()，它什么也不做。

cy.get('[data-appearance="textfield"]').eq(1).click();
cy.get('[role="option"]').eq(0).as('option').should('be.visible');

cy.get('@option').click({force:true})

在现实世界的测试中，您将寻找

• 页面上的工件（例如cy.contains(some-page-text)）
• 或网络拦截（例如cy.intercept('some-api-response')）

在单击按钮之前确保页面稳定。

由于没有关于您的页面的信息，我无法给您具体的答案。