如何等待页面完全加载

Question

我正在使用 Cypress 来测试我的水疗中心。有时页面显示得很快，有时又很慢。我需要能够检查页面加载后将显示的按钮或文本，但不想永远等待。

我一直使用过长的等待时间，但希望测试运行得更快。

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()

我希望能够设置等待时间，直到显示“创建”按钮。

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()

将测试延迟一定的毫秒数。这样做几乎总是一种不好的做法。

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()

这在某些情况下对我有用，我需要先完成页面加载，然后再从页面中选择任何内容。

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

无论如何都会停止您的测试。）但这会给您额外的填充如果你需要的话。

Answer 4

我想你可能想使用

timeout

的

visit

选项：

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

我记得我过去也遇到过类似的问题，这个Github问题当时为我提供了一些有用的信息。