Timeout configuration in Cypress

Introduction

Timeout configuration helps tests wait the right amount of time for things to happen. It avoids tests failing too soon or waiting too long.

When a page or element takes longer to load than usual.

When testing slow network or server responses.

When waiting for animations or transitions to finish.

When retrying commands that might be flaky.

When customizing wait times for specific test steps.

Syntax

Cypress

cy.get(selector, { timeout: milliseconds })
cy.visit(url, { timeout: milliseconds })
cy.wait(milliseconds)

The timeout option sets how long Cypress waits before failing.

Timeout values are in milliseconds (1000 ms = 1 second).

Examples

Waits up to 10 seconds for the submit button to appear.

Cypress

cy.get('#submit-button', { timeout: 10000 })

Waits up to 20 seconds for the page to load.

Cypress

cy.visit('https://example.com', { timeout: 20000 })

Pauses the test for 5 seconds before continuing.

Cypress

cy.wait(5000)

Sample Program

This test visits a page with a longer timeout and waits up to 10 seconds for a slow element to appear and be visible.

Cypress

describe('Timeout example test', () => {
  it('waits for a slow element', () => {
    cy.visit('https://example.cypress.io', { timeout: 15000 })
    cy.get('.slow-element', { timeout: 10000 }).should('be.visible')
  })
})

Important Notes

Setting timeouts too high can slow down your test suite.

Use timeouts only when necessary for slow or flaky elements.

Default Cypress timeout is 4 seconds for most commands.

Summary

Timeouts control how long Cypress waits before failing a command.

Use { timeout: ms } option to customize wait times.

Keep timeouts balanced to avoid slow or flaky tests.