Assertion timeout customization in Cypress - Build an Automation Script

Customize assertion timeout for element visibility

Preconditions (1)

Step 1: Visit the web page URL 'https://example.com/delayed-button'

Step 2: Wait for the button with id 'delayed-btn' to become visible with a custom timeout of 10 seconds

Step 3: Assert that the button is visible

✅ Expected Result: The test waits up to 10 seconds for the button to appear and passes if the button becomes visible within that time

Automation Requirements - Cypress

Assertions Needed:

Verify the button with id 'delayed-btn' is visible within 10 seconds

Best Practices:

Use cy.get() with timeout option for waiting

Use should('be.visible') assertion

Avoid hardcoded waits like cy.wait()

Use clear and descriptive test titles

Automated Solution

Cypress

describe('Assertion timeout customization test', () => {
  it('Waits up to 10 seconds for delayed button to appear and asserts visibility', () => {
    cy.visit('https://example.com/delayed-button');
    cy.get('#delayed-btn', { timeout: 10000 })
      .should('be.visible');
  });
});

This test visits the specified URL where a button appears after some delay. The cy.get command includes a timeout option set to 10000 milliseconds (10 seconds), so Cypress waits up to 10 seconds for the element with id delayed-btn to appear in the DOM and be visible. The should('be.visible') assertion confirms the button is visible. This approach avoids using fixed waits and makes the test reliable and efficient.

Common Mistakes - 3 Pitfalls

Using cy.wait(10000) before checking visibility

Not setting a timeout and relying on default timeout

{'mistake': "Using incorrect selector syntax like cy.get('delayed-btn') without #", 'why_bad': "Selector won't find the element, causing test failure.", 'correct_approach': "Use correct CSS selector syntax, e.g., '#delayed-btn' for id."}

Bonus Challenge

Now add data-driven testing with 3 different button IDs that appear after different delays

Show Hint