Timeout configuration in Cypress - Test Execution Trace

Test Overview

This test checks that a button becomes visible within a custom timeout period and verifies it can be clicked successfully.

Test Code - Cypress

Cypress

describe('Timeout configuration test', () => {
  it('waits for the button to appear with custom timeout and clicks it', () => {
    cy.visit('https://example.com/delayed-button')
    cy.get('#delayed-btn', { timeout: 10000 }).should('be.visible')
    cy.get('#delayed-btn').click()
    cy.get('#result').should('contain.text', 'Button clicked')
  })
})

Execution Trace - 5 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Test runner initialized, no browser opened yet	-	PASS
2	Browser opens and navigates to 'https://example.com/delayed-button'	Browser shows the page with delayed button loading	-	PASS
3	Find element with selector '#delayed-btn' with timeout 10000ms	Waiting up to 10 seconds for button to appear	Check if '#delayed-btn' is visible	PASS
4	Click on '#delayed-btn'	Button is visible and clickable	-	PASS
5	Verify '#result' contains text 'Button clicked'	Result element updated after click	Check if '#result' text includes 'Button clicked'	PASS

Failure Scenario

Failing Condition: The '#delayed-btn' does not appear within 10 seconds

Execution Trace Quiz - 3 Questions

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

A Clicks the button every 10 seconds

B Waits up to 10 seconds for the button to appear before failing

C Limits the test to run only for 10 seconds total

D Skips the button if it is not found immediately

Key Result

Setting a custom timeout in Cypress commands helps tests wait for elements that load slowly, reducing flaky failures.