如何等待页面完全加载

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

我希望能够设置等待按钮 'Create' 显示的时间。

Answer 1

默认情况下，Cypress 将等待您的页面加载所有资源，然后再继续测试。你的 cy.wait() shouldn't be necessary. The default timeout for 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

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

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

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

Answer 3

写一些断言怎么样 .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()

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

如何等待页面完全加载

How to Wait until page is fully loaded

javascript

testing

wait

cypress