Timeout configuration in Cypress - Build an Automation Script

Verify page loads within custom timeout

Preconditions (2)

Step 1: Open the test website URL with a custom page load timeout of 10000 milliseconds

Step 2: Wait for the main content element with id 'main-content' to be visible

Step 3: Verify that the main content is visible within the timeout

✅ Expected Result: The main content element is visible within 10 seconds, and the test passes without timeout errors

Automation Requirements - Cypress

Assertions Needed:

Assert that the element with id 'main-content' is visible within the custom timeout

Best Practices:

Use Cypress commands with timeout option

Avoid hardcoded waits like cy.wait() for timing

Use meaningful selectors (id, data-cy attributes)

Use Cypress default timeout configuration override only when necessary

Automated Solution

Cypress

describe('Timeout configuration test', () => {
  it('should load main content within custom timeout', () => {
    cy.visit('https://example.com', { timeout: 10000 });
    cy.get('#main-content', { timeout: 10000 }).should('be.visible');
  });
});

The test uses cy.visit with a timeout option set to 10000 milliseconds to allow the page to load up to 10 seconds.

Then it uses cy.get with the same timeout to wait for the element with id main-content to become visible.

This ensures the test waits explicitly for the element without using fixed delays, making it reliable and efficient.

Common Mistakes - 3 Pitfalls

Using cy.wait(10000) to wait for page load

Not setting timeout on cy.get() leading to flaky tests

Using overly complex or brittle selectors instead of simple ids

Bonus Challenge

Now add data-driven testing with 3 different URLs and verify main content loads within timeout for each

Show Hint