How to Fix Command Timeout in Cypress Tests Quickly

To fix a command timeout in Cypress, increase the timeout value using options like { timeout: 10000 } on commands or set global timeouts in cypress.config.js. Also, ensure your app elements load properly before Cypress interacts with them to avoid premature timeouts.

Why This Happens

A command timeout in Cypress happens when a command takes longer than the default wait time (usually 4 seconds) to complete. This often occurs if the page or element is slow to load, or if Cypress tries to interact with an element that is not yet visible or ready.

javascript

cy.get('#submit-button').click();

Output

Timed out retrying: Expected to find element: '#submit-button', but never found it.

The Fix

Increase the timeout for the specific command or globally to give Cypress more time to find or interact with elements. This helps when your app is slow or elements take time to appear.

You can add a timeout option directly to commands or set global timeouts in cypress.config.js.

javascript

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

// Or set global timeout in cypress.config.js
module.exports = {
  e2e: {
    defaultCommandTimeout: 10000
  }
};

Output

Test passes if '#submit-button' appears within 10 seconds and click succeeds.

Prevention

To avoid command timeouts in the future, always wait for elements to be visible or enabled before interacting. Use Cypress commands like cy.wait() sparingly and prefer cy.get() with proper timeout. Also, optimize your app's loading speed and avoid unnecessary delays.

Set sensible global timeouts in your config to balance test speed and reliability.

Related Errors

Other similar errors include:

• Element not found: Happens when selectors are incorrect or elements are missing.
• Assertion timeout: When assertions take too long to pass.
• Network timeout: When API calls take too long during tests.

Fixes usually involve increasing timeouts or improving selectors.

Key Takeaways

Increase command or global timeout settings to fix Cypress command timeouts.

Ensure elements are visible and ready before interacting to avoid premature failures.

Use Cypress's built-in retry and timeout options instead of fixed waits.

Optimize your app's load performance to reduce test delays.

Check selectors carefully to prevent element not found errors.