Question

不要告诉任何人，但我们的应用还不是单页。我可以wait on a given XHR request为路由提供别名，但是如何等待某个导航完成并且浏览器安全地位于新页面上？

Answer 1

你可以在里面添加一些断言：

flags2

您可以更改默认超时 - 默认情况下为4000毫秒（4秒） - 以确保用户导航页面。我在这里放了一个大号--60,000毫秒 - 因为我确信99％的用户如果1分钟后没有加载页面就会离开。

Answer 2

我也在寻找解决方案，但就我而言，我还不得不等待新页面中的一些微调器消失（当页面加载完成时）。每个微调器共享同一个类 .loader__container，所以这是我所做的：

...
cy.contains('button', /login/i).click()
cy.location('pathname').should('include', 'next_page_endpoint')
cy.get('.loader__container', { timeout: 10_000 }).should('have.length', 0)

其中的 timeout 实际上可能很长，因为当页面中没有更多被查询元素的实例时，Cypress 会很快捕捉到。

如果我们不得不经常等待微调器，我们可以将它包装成一个函数或创建一个新的 Cypress 命令，即：

// inside cypress/support/commands.js
Cypress.Commands.add('waitForSpinners', () => {
  cy.get('.loader__container', { timeout: 10_000 }).should('have.length', 0)
})

然后我们可以在需要时使用该命令：

...
cy.contains('button', /login/i).click()
cy.location('pathname').should('include', 'next_page_endpoint')
cy.waitForSpinners()

编辑：我仍在学习 Cypress，今天我尝试用 .should('have.length', 0) 替换 .should('not.exist')，显然它的工作原理相同。它说得通，读起来也更好，所以我保留它。如果我发现这种方法有任何问题，我会更新此答案。

Answer 3

使用 .should 语句添加一些断言并验证页面标题或标题

cy.visit('/dashboard').click();
cy.title().should('eq', 'Dashboard'); // page tab title

在cypress中，如何等待页面加载？

3 个答案: