如何等待页面完全加载

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()来将测试延迟一定的毫秒数。这样做几乎总是一种不好的做法。