Assertion timeout customization in Cypress - Test Execution Trace

Test Overview

This test checks that a button becomes visible within a custom timeout period. It verifies that the assertion waits longer than the default time before failing.

Test Code - Cypress

Cypress

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

Execution Trace - 5 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Test runner initialized, no browser opened yet	-	PASS
2	Browser opens	Browser window opens with Cypress test runner	-	PASS
3	Navigates to 'https://example.com'	Page loads with initial content, button #delayed-button not visible yet	-	PASS
4	Finds element with selector '#delayed-button' with timeout 10000ms	Cypress waits up to 10 seconds for the button to appear and be visible	Checks if '#delayed-button' is visible within 10 seconds	PASS
5	Assertion checks 'be.visible' on '#delayed-button'	Button is visible on the page	Assert that '#delayed-button' is visible	PASS

Failure Scenario

Failing Condition: The button '#delayed-button' does not become visible within 10 seconds

Execution Trace Quiz - 3 Questions

What does the custom timeout in cy.get('#delayed-button', { timeout: 10000 }) do?

A It waits up to 10 seconds for the element to appear before failing

B It makes the test run 10 seconds slower always

C It retries the assertion every 10 seconds

D It sets the timeout for the whole test to 10 seconds

Key Result

Customizing assertion timeouts helps tests wait longer for slow elements, reducing flaky failures without slowing down tests unnecessarily.