如何等待页面完全加载

Question

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

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

 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 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 发布，翻译遵循 CC BY-SA 4.0 许可协议