如何等待页面完全加载完成

Question

我正在使用Cypress来测试我的SPA。有时页面显示很快，有时非常慢。我需要检查一个按钮或文本，在页面加载完成后显示，但不想等待太久。 我一直使用过长时间的等待周期，但希望测试能更快地运行。

let targeturl = 'http:\\something.com'
let longwait = 2500

describe('Update Case', () => {
  it('Create Case', () => {   
    cy.visit(targeturl)
    cy.wait(longwait)
    cy.get('button').contains('Create').click()

我希望能够设置一个等待，直到“创建”按钮显示出来为止。

- Kathrine Stallings

Answer 1

默认情况下，Cypress会等待页面加载所有资源后才继续测试。您不需要使用cy.wait()。cy.visit()的默认超时时间为60秒。

此外，cy.get()将重试查找元素直到该元素存在。默认超时时间为4秒，但您可以增加它。

通常这就是您所需的内容：

describe('Update Case', () => {
  it('Create Case', () => {   
    cy.visit(targeturl)
    cy.get('button').contains('Create').click()

如果您发现这不起作用，可能是因为页面在加载所有资源后需要超过4秒才能呈现，那么您可以尝试做以下操作：

describe('Update Case', () => {
  it('Create Case', () => {   
    cy.visit(targeturl)
    // wait up to 30 seconds for some element to exist before continuing the test
    cy.get('.some-element-in-your-app-that-only-exists-once-page-has-loaded', { timeout: 30000 })
    cy.get('button').contains('Create').click()

一般情况下，您不应该使用cy.wait()来延迟测试执行的时间。这样做几乎总是一种不好的实践。

- Zach Bloomquist

---

将超时时间作为选项添加到获取操作中是我正在寻找的。加载时间更长，但仅在第一次加载时如此。谢谢。 - Kathrine Stallings

我理解你的解决方案和希望实现的目标。我也想到了一个非常相似的解决方案。但有时候会出现页面加载错误，因为身份验证失败或其他原因。使用这种解决方案时，我的测试程序在这些情况下会等待很长时间，即使在此期间错误页面已经加载完成。因此，我仍然在寻找更好的解决方案。 - Janos Vinceller

我实际上很喜欢这个用于初始访问。我们使用一些自定义内容来检查点击、导航等后的加载情况，但最初的渲染没有可用的 DOM。在说网站不可用之前尝试获取其中的某些内容显然是不明智的。 - perustaja

Answer 2

你可以写一些类似于.should()的断言：

let targeturl = 'http:\\something.com'
let longwait = 2500

describe('Update Case', () => {
  it('Create Case', () => {   
    cy.visit(targeturl)
    cy.url().should('include',targeturl)
    cy.get('button').contains('Create').click()

在某些情况下，我需要在选择页面上的任何内容之前完成页面加载。

- mariano_c

Answer 3

对于任何对这个问题/问题不熟悉的人：

Cypress文档明确不鼓励任意使用wait()，但幸运的是现在提供了使用intercept()和一个别名路由的解决方案。

根据文档，这是如何工作的。假设你想等待/users页面/端点加载完成，然后你想检查一个DOM元素，比如一个表格是否存在，这是你的做法。

cy.intercept('GET', '/users').as('getUsers')
cy.get('[data-testid="fetch-users"]').click()
cy.wait('@getUsers') // <--- wait explicitly for this route to finish
cy.get('table tr').should('have.length', 2)

如果在那之后你仍然遇到问题，比如页面加载后XHR请求仍然完成，从而阻止元素出现，那么你可以像这样将timeout属性传递给cy.get()函数。

cy.get('table tr', { timeout: 20000 }).should('have.length', 2)

Cypress不会等待那么长时间，如果它已经加载并且不需要它，这要归功于您之前的拦截/别名路由使用（与wait不同，无论如何都会阻塞您的测试）。但如果您需要的话，这将为您提供额外的填充。

- Cat Perry

Answer 4

我认为你可能想要使用visit的timeout选项：

cy.visit(targeturl, { timeout: 30000 })

我记得以前也遇到过类似的问题，当时这个Github issue给了我一些有用的信息。

- DurkoMatko

---

cy.visit具有默认的60秒超时时间，请参见文档。 - Zach Bloomquist

使用超时机制无法处理许多情况。 - Royce