Assertion timeout customization in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the test result with customized assertion timeout?

Consider this Cypress test snippet that checks if a button becomes visible within a custom timeout.

cy.get('#submit-btn', { timeout: 10000 }).should('be.visible')

Assuming the button appears after 8 seconds, what will be the test outcome?

Cypress

cy.get('#submit-btn', { timeout: 10000 }).should('be.visible')

A Test fails with a syntax error due to incorrect timeout usage.

B Test fails because the default timeout is 4 seconds, which is exceeded.

C Test passes because the button appears before the 10-second timeout.

D Test passes immediately without waiting for the button.

💡 Hint

Remember that the timeout option overrides the default wait time for the element.

The custom timeout of 10 seconds allows Cypress to wait up to 10 seconds for the button to appear. Since the button appears after 8 seconds, the assertion passes.

❓ assertion

intermediate

Which assertion correctly sets a custom timeout for visibility check?

Choose the correct Cypress assertion that waits up to 5 seconds for an element with id login to be visible.

A cy.get('#login', { timeout: 5000 }).should('be.visible')

B cy.get('#login').should({ timeout: 5000 }, 'be.visible')

C cy.get('#login').should('be.visible', { timeout: 5000 })

D cy.get('#login').should('be.visible').timeout(5000)

💡 Hint

Check where the timeout option is passed in Cypress commands.

The timeout option must be passed as an option to cy.get(), not inside should(). Option A correctly sets the timeout.

🔧 Debug

advanced

Why does this assertion timeout too early despite custom timeout?

Review this Cypress test code:

cy.get('#profile', { timeout: 10000 }).should('contain.text', 'User')

The element #profile appears after 9 seconds with text 'User Profile'. The test fails with a timeout error after 4 seconds. Why?

Cypress

cy.get('#profile', { timeout: 10000 }).should('contain.text', 'User')

A The timeout option on <code>cy.get</code> applies only to element existence, not to assertion retries.

B The default timeout for <code>should</code> assertions is 4 seconds and is not overridden by <code>cy.get</code> timeout.

C The timeout option is ignored because <code>contain.text</code> is not a valid assertion.

D The test fails because the text 'User' does not exactly match 'User Profile'.

💡 Hint

Consider how Cypress handles timeouts for commands versus assertions.

The timeout option on cy.get controls how long Cypress waits for the element to appear. However, the should assertion has its own default retry timeout (usually 4 seconds). Since the element appears but the assertion text check fails initially, the assertion times out after 4 seconds.

❓ framework

advanced

How to globally customize assertion timeout in Cypress?

Which configuration change globally sets the default assertion timeout to 8000 milliseconds in Cypress?

A Add <code>assertionTimeout: 8000</code> in <code>cypress.json</code> root level.

B Add <code>defaultCommandTimeout: 8000</code> in <code>cypress.config.js</code> under <code>e2e</code> section.

C Add <code>defaultAssertionTimeout: 8000</code> in <code>cypress.config.js</code> under <code>e2e</code> section.

D Add <code>timeout: 8000</code> in <code>package.json</code> under <code>scripts</code>.

💡 Hint

Check Cypress official docs for global timeout settings.

The defaultCommandTimeout setting in cypress.config.js controls the default timeout for commands and assertions globally. Option B correctly sets it.

🧠 Conceptual

expert

Why might increasing assertion timeout cause flaky tests?

Increasing assertion timeout can help tests wait longer for conditions. However, what is a common risk of setting very high assertion timeouts in Cypress tests?

A Tests will always fail faster, causing more false negatives.

B Assertions will stop retrying and only check once immediately.

C Cypress will ignore the timeout and use default values anyway.

D Tests may become slower and mask real failures by waiting too long for conditions that never happen.

💡 Hint

Think about test speed and reliability trade-offs.

Setting very high assertion timeouts can slow down tests and hide real problems by waiting too long for conditions that might never be met, leading to flaky or unreliable test suites.

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