在 Cypress 中，我如何强制 cy.get 等待页面内容更改？

Question

我是 Cypress 的新手，正在为 React 网页编写一个测试，检查单击按钮时，页面标题会更改（我知道这可能不是最有用的检查）。

需要说明的是，单击按钮不会导致加载新网页，只会导致当前页面的内容发生变化。

下面是一个类似于我的实际 Cypress 代码的示例片段，包括按钮点击和后续预期。

cy.get('[data-testId="<button ID>"]')
    .click();

cy.get('body h2')
   .contains('<some text>');

我的问题是，如果在单击按钮之前存在 h2 header，则 Cypress 将获取 header 而不是单击按钮后存在的 h2 header。

是否可以强制 Cypress 等待页面更新？或者重试 get/contains 步骤直到达到预期？还是我只是犯了一个明显的菜鸟错误？

Answer 1

如果元素上的选择器正确 - 您可以使用 cy.should。它会重试，直到满足条件或预定超时时间已到：

cy.get('[data-testId="<button ID>"]')
    .click();

cy.get('body h2')
   .should('contain', '<some text>');

如果页面在操作后没有重新加载，则此方法有效。如果是这样，您应该添加一些渲染时间断言，例如：

cy.get('[data-testId="<button ID>"]')
    .click();

cy.get('body h2')
   .should('not.exist') //Checks if the page starts reloading and the initial element has dissapeared.

cy.get('body h2')
   .should('contain', '<some text>');

在 Cypress 中，我如何强制 cy.get 等待页面内容更改？

In Cypress how can I force cy.get to wait for page content to change?

automated-tests

cypress