时间戳

首页 > 解决方案 > 在赛普拉斯中，如何强制 cy.get 等待页面内容更改？

automated-tests - 在赛普拉斯中，如何强制 cy.get 等待页面内容更改？

问题描述

我是赛普拉斯的新手，正在为 React 网页编写测试，以检查单击按钮时页面标题是否发生变化（我知道这可能不是最有用的检查）。

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

下面是一个类似于我的实际赛普拉斯代码的示例片段，包括按钮单击和随后的预期。

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

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

我的问题是，如果在单击按钮之前存在 h2 标头，赛普拉斯将获取该标头而不是单击按钮后存在的 h2 标头。

是否可以强制赛普拉斯等到页面更新？或者重试获取/包含步骤，直到满足期望？还是我只是在犯一个明显的菜鸟错误？

标签： automated-testscypress

解决方案

如果您在元素上的选择器是正确的 - 您可以使用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>');

推荐阅读