Assertion timeout customization in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is assertion timeout customization in Cypress?

It is the ability to change how long Cypress waits for an assertion to pass before failing the test. This helps when elements or conditions take longer to appear or update.

beginner

How do you set a custom timeout for an assertion in Cypress?

You add the option { timeout: milliseconds } to the command, for example: cy.get('button', { timeout: 10000 }).should('be.visible') waits up to 10 seconds.

beginner

Why might you want to increase assertion timeout in a test?

Because some elements or data may load slowly due to network delays or animations, increasing timeout prevents false test failures by giving more time for the condition to become true.

beginner

What is the default assertion timeout in Cypress?

The default timeout for assertions in Cypress is 4,000 milliseconds (4 seconds).

intermediate

Can you customize assertion timeout globally in Cypress?

Yes, you can set a global default timeout in the Cypress configuration file (cypress.config.js) using the 'defaultCommandTimeout' option.

How do you increase the timeout for a single assertion in Cypress?

A Add { timeout: value } as an option to the command

B Change the global config only

C Use cy.wait() before the assertion

D You cannot change timeout for assertions

You can add { timeout: milliseconds } directly to the command to increase wait time for that assertion.

What happens if an assertion times out in Cypress?

A The test passes anyway

B The assertion is skipped

C Cypress retries the test from the start

D The test fails with a timeout error

If the assertion does not pass within the timeout, Cypress fails the test and shows a timeout error.

What is the default timeout for assertions in Cypress?

A 4000 ms

B No timeout by default

C 10000 ms

D 1000 ms

Cypress uses a default timeout of 4000 milliseconds (4 seconds) for assertions.

Where can you set a global default timeout for all commands and assertions in Cypress?

A In the browser settings

B In the test file only

C In cypress.config.js file

D You cannot set global timeout

Global timeouts are set in the Cypress configuration file, typically cypress.config.js.

Why is customizing assertion timeout useful?

A To make tests run faster

B To handle slow loading elements or animations

C To skip assertions

D To disable retries

Increasing timeout helps tests wait longer for elements or conditions that take time to appear.

Explain how to customize assertion timeout for a specific command in Cypress and why you might do this.

Think about slow loading pages or animations.

Describe how to set a global default timeout for all assertions and commands in Cypress.

Look for configuration settings in Cypress.

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