Timeout configuration in Cypress - Framework Patterns

Framework Mode - Timeout configuration

Folder Structure

cypress/
├── e2e/                  # Test specs
│   ├── login.cy.js       # Example test file
│   └── dashboard.cy.js
├── fixtures/             # Test data files (JSON, etc.)
│   └── users.json
├── support/              # Support files and commands
│   ├── commands.js       # Custom commands
│   └── e2e.js            # Global setup
cypress.config.js         # Main Cypress configuration file
package.json             # Project dependencies and scripts

Test Framework Layers

• Configuration Layer: cypress.config.js controls timeouts, baseUrl, browser settings.
• Test Layer: Files in cypress/e2e/ contain test cases using Cypress commands.
• Support Layer: cypress/support/ holds reusable commands and global hooks.
• Fixtures Layer: cypress/fixtures/ stores test data for data-driven tests.

Timeout Configuration Patterns

Timeouts control how long Cypress waits for actions or elements before failing.

• Global Timeout: Set in cypress.config.js under defaultCommandTimeout and pageLoadTimeout.
• Test or Command Level Timeout: Override global timeout by passing { timeout: ms } option to commands like cy.get() or cy.visit().
• Retries: Configure retries on test failure with retries option in config.
• Environment Variables: Use env in config or CYPRESS_ prefixed system variables to customize timeouts per environment.

Example cypress.config.js snippet:

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    baseUrl: 'https://example.com',
    defaultCommandTimeout: 8000,       // Wait 8 seconds for commands
    pageLoadTimeout: 60000,            // Wait 60 seconds for page load
    retries: 2,                        // Retry failed tests twice
    env: {
      loginTimeout: 10000              // Custom env variable for login timeout
    }
  }
})

Test Reporting and CI/CD Integration

• Use Cypress built-in reporter or integrate with mochawesome for detailed HTML reports.
• Configure CI pipelines (GitHub Actions, Jenkins, GitLab CI) to run Cypress tests with timeout settings respected.
• Set environment-specific timeout overrides in CI config files or environment variables.
• Fail tests clearly when timeouts occur to identify slow or flaky tests.

Best Practices for Timeout Configuration

1. Set reasonable global timeouts: Avoid too short or too long waits to balance speed and reliability.
2. Override timeouts only when necessary: Use command-level timeout overrides for slow-loading elements or pages.
3. Use environment variables: Manage different timeout needs for local, staging, and production environments.
4. Use retries carefully: Retries help with flaky tests but can hide real issues if overused.
5. Monitor test failures due to timeouts: Investigate and fix slow UI or network issues rather than just increasing timeouts.

Self Check

Where in this Cypress framework structure would you add a custom command that waits longer for a specific element?

Key Result

Configure timeouts globally in cypress.config.js and override per command to balance test speed and reliability.