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.

Practice

1. What does customizing the timeout option in Cypress assertions help with?

easy

A. It allows tests to wait longer or shorter for elements or conditions before failing.

B. It changes the browser window size during tests.

C. It disables all assertions in the test.

D. It automatically retries failed tests multiple times.

Solution

1. Step 1: Understand the purpose of timeout in Cypress assertions

   The timeout option controls how long Cypress waits for an element or condition before marking the test as failed.

2. Step 2: Identify what customizing timeout achieves

   By customizing timeout, you can adjust waiting time to match your app's response speed, avoiding false failures or unnecessary delays.

3. Final Answer:

   It allows tests to wait longer or shorter for elements or conditions before failing. -> Option A

4. Quick Check:

   Timeout customization = wait time adjustment [OK]

Hint: Timeout controls wait duration for assertions [OK]

Common Mistakes:

• Confusing timeout with browser size settings
• Thinking timeout disables assertions
• Assuming timeout retries tests automatically

2. Which of the following is the correct way to set a 10-second timeout for a cy.get() command in Cypress?

easy

A. cy.get('.btn').timeout(10000)

B. cy.get('.btn', { timeout: 10000 })

C. cy.get('.btn').setTimeout(10)

D. cy.get('.btn', timeout=10)

Solution

1. Step 1: Recall the syntax for setting timeout in Cypress commands

   The timeout option is passed as an object in the second argument of cy.get(), like { timeout: 10000 } for 10 seconds.

2. Step 2: Check each option for correct syntax

   cy.get('.btn', { timeout: 10000 }) uses the correct object syntax. Chained .timeout(10000) and .setTimeout(10) use invalid methods. cy.get('.btn', timeout=10) uses incorrect assignment syntax.

3. Final Answer:

   cy.get('.btn', { timeout: 10000 }) -> Option B

4. Quick Check:

   Timeout option passed as object = correct syntax [OK]

Hint: Timeout is an option object in command parentheses [OK]

Common Mistakes:

• Using method chaining for timeout instead of option object
• Passing timeout as a separate argument without braces
• Using assignment syntax inside command arguments

3. Consider this Cypress code snippet:

cy.get('#loading', { timeout: 5000 }).should('not.exist');

What happens if the element with id loading still exists after 5 seconds?

medium

A. The test ignores the assertion and continues.

B. The test passes immediately without waiting.

C. The test retries forever until the element disappears.

D. The test fails because the element still exists after the 5-second timeout.

Solution

1. Step 1: Understand the timeout effect on cy.get() and assertion

   The timeout: 5000 means Cypress waits up to 5 seconds for the element to appear or disappear as per the assertion.

2. Step 2: Analyze the assertion should('not.exist') with timeout

   If after 5 seconds the element still exists, the assertion fails because the condition was not met within the timeout.

3. Final Answer:

   The test fails because the element still exists after the 5-second timeout. -> Option D

4. Quick Check:

   Timeout reached without condition met = test failure [OK]

Hint: Timeout limits wait; failure if condition unmet [OK]

Common Mistakes:

• Thinking test passes immediately without waiting
• Assuming infinite retries beyond timeout
• Believing assertion is skipped on timeout

4. You wrote this Cypress test but it fails too quickly:

cy.contains('Submit', { timeout: 2000 }).click();

Your app sometimes takes 5 seconds to show the button. What is the best fix?

medium

A. Increase the timeout value to at least 5000 milliseconds.

B. Remove the timeout option completely.

C. Change cy.contains to cy.get without timeout.

D. Add a wait(2000) before cy.contains.

Solution

1. Step 1: Identify the problem with current timeout

   The timeout is set to 2000 ms, but the button appears after 5 seconds, so the test fails too early.

2. Step 2: Choose the best fix to wait longer for the button

   Increasing the timeout to 5000 ms or more lets Cypress wait long enough for the button to appear before failing.

3. Final Answer:

   Increase the timeout value to at least 5000 milliseconds. -> Option A

4. Quick Check:

   Timeout must match app response time [OK]

Hint: Match timeout to app load speed [OK]

Common Mistakes:

• Removing timeout and causing default short wait
• Using wait() which is less reliable than timeout
• Changing command type without fixing wait time

5. You want to check that a success message appears within 3 seconds after clicking a button, but the message may sometimes take up to 7 seconds. Which is the best way to customize the assertion timeout in Cypress?

hard

A. Use cy.get('.success').should('be.visible').wait(7000) after clicking.

B. Use cy.get('.success').should('be.visible', { timeout: 3000 }) after clicking.

C. Use cy.get('.success', { timeout: 7000 }).should('be.visible') after clicking.

D. Use cy.get('.success', { timeout: 3000 }).should('be.visible') after clicking.

Solution

1. Step 1: Understand the timing requirement for the success message

   The message can take up to 7 seconds to appear, so the timeout must be at least 7000 ms to avoid false failures.

2. Step 2: Identify correct syntax to set timeout on cy.get()

   The timeout option must be passed inside the cy.get() command as an object, not inside should() or using wait().

3. Final Answer:

   Use cy.get('.success', { timeout: 7000 }).should('be.visible') -> Option C

4. Quick Check:

   Set timeout on cy.get to max wait needed [OK]

Hint: Set timeout on cy.get, not on should or wait [OK]

Common Mistakes:

• Setting timeout inside should() which is ignored
• Using fixed wait() which delays unnecessarily
• Setting timeout too short causing test failure