Timeout configuration in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the test result with default timeout?

Consider this Cypress test code snippet:

describe('Timeout test', () => {
  it('waits for element with default timeout', () => {
    cy.visit('https://example.cypress.io')
    cy.get('.non-existent-element').should('be.visible')
  })
})

What will happen when this test runs?

Cypress

describe('Timeout test', () => {
  it('waits for element with default timeout', () => {
    cy.visit('https://example.cypress.io')
    cy.get('.non-existent-element').should('be.visible')
  })
})

A Test fails after about 4 seconds with a timeout error because the element does not appear.

B Test passes immediately because Cypress ignores missing elements by default.

C Test runs forever because there is no timeout set for cy.get().

D Test fails immediately with a syntax error due to missing timeout option.

💡 Hint

Think about Cypress default command timeout behavior when an element is not found.

By default, Cypress waits up to 4 seconds for an element to appear before failing the test with a timeout error.

❓ assertion

intermediate

Which assertion correctly waits up to 10 seconds?

You want to wait up to 10 seconds for a button with id 'submit' to become visible. Which Cypress command and assertion combination achieves this?

A cy.get('#submit').wait(10000).should('be.visible')

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

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

D cy.get('#submit').should('be.visible').timeout(10000)

💡 Hint

Timeout option goes inside cy.get() command, not inside should().

The timeout option must be passed as an argument to cy.get() to extend the wait time for the element to appear.

🔧 Debug

advanced

Why does this test fail immediately despite timeout?

Examine this Cypress test:

cy.get('.loading', { timeout: 15000 })
  .should('not.exist')

The element '.loading' appears for 10 seconds then disappears. The test fails immediately. Why?

Cypress

cy.get('.loading', { timeout: 15000 }).should('not.exist')

A The selector '.loading' is invalid, causing immediate failure.

B The timeout value 15000 is too high and causes a syntax error.

C Timeout option is ignored because should('not.exist') does not support waiting.

D cy.get() waits for the element to appear, but since it exists, should('not.exist') fails immediately.

💡 Hint

Think about what cy.get() waits for and what the assertion expects.

cy.get() waits for the element to appear up to 15 seconds. Since the element exists, the assertion should('not.exist') fails immediately because the element is present.

❓ framework

advanced

How to globally increase default command timeout in Cypress?

You want all Cypress commands to wait up to 20 seconds by default instead of 4 seconds. Which configuration change achieves this?

A Set Cypress.config('defaultCommandTimeout', 20000) inside each test file.

B Add "defaultCommandTimeout": 20000 in cypress.config.js under the e2e object.

C Use cy.setTimeout(20000) at the start of every test.

D Add timeout: 20000 to every cy.get() command manually.

💡 Hint

Global settings go in the config file, not inside test code.

The correct way is to set defaultCommandTimeout in cypress.config.js to change the default timeout globally for all commands.

🧠 Conceptual

expert

Why is setting very high timeouts globally risky?

What is a main risk of setting a very high defaultCommandTimeout (e.g., 2 minutes) globally in Cypress tests?

A Tests may take much longer to fail, slowing feedback and hiding real issues.

B Cypress will ignore all timeouts and run tests instantly.

C It causes syntax errors in test files due to invalid config values.

D It disables retries and causes tests to fail immediately.

💡 Hint

Think about test speed and feedback when waiting too long for failures.

Setting very high timeouts delays failure detection, making tests slower and feedback less immediate, which can hide real problems.

Practice

1. What does the { timeout: 10000 } option do in a Cypress command?

easy

A. It disables the timeout for that command.

B. It makes Cypress skip the command after 10 seconds.

C. It repeats the command every 10 seconds.

D. It sets Cypress to wait up to 10 seconds before failing the command.

Solution

1. Step 1: Understand the timeout option in Cypress

   The { timeout: ms } option tells Cypress how long to wait for a command to succeed before failing.

2. Step 2: Interpret the value 10000

   10000 milliseconds equals 10 seconds, so Cypress waits up to 10 seconds.

3. Final Answer:

   It sets Cypress to wait up to 10 seconds before failing the command. -> Option D

4. Quick Check:

   Timeout option = wait time before failure [OK]

Hint: Timeout sets max wait time before failure [OK]

Common Mistakes:

• Thinking timeout disables the command
• Assuming timeout repeats the command
• Confusing timeout with delay or skip

2. Which of the following is the correct syntax to set a 5-second timeout for a cy.get() command?

easy

A. cy.get('.btn', { timeout: 5000 })

B. cy.get('.btn').timeout(5000)

C. cy.get('.btn', timeout=5000)

D. cy.get('.btn').setTimeout(5000)

Solution

1. Step 1: Recall Cypress command options syntax

   Cypress commands accept options as an object inside curly braces after the selector.

2. Step 2: Identify correct object syntax

   The correct syntax uses { timeout: 5000 } as the second argument to cy.get().

3. Final Answer:

   cy.get('.btn', { timeout: 5000 }) -> Option A

4. Quick Check:

   Options object uses curly braces and key-value pairs [OK]

Hint: Use curly braces for options object in commands [OK]

Common Mistakes:

• Using equals sign instead of colon in options
• Calling timeout as a method on command
• Passing timeout outside options object

3. What will happen if the following Cypress code runs and the element .submit-btn appears after 7 seconds?

cy.get('.submit-btn', { timeout: 5000 }).click()

medium

A. The test will pass because the element appears eventually.

B. The test will fail because the timeout is shorter than the wait time.

C. The test will wait indefinitely for the element.

D. The test will skip the click and continue.

Solution

1. Step 1: Analyze the timeout value

   The timeout is set to 5000 milliseconds (5 seconds), so Cypress waits up to 5 seconds for the element.

2. Step 2: Compare element appearance time

   The element appears after 7 seconds, which is longer than the 5-second timeout.

3. Final Answer:

   The test will fail because the timeout is shorter than the wait time. -> Option B

4. Quick Check:

   Timeout less than wait time causes failure [OK]

Hint: Timeout must be >= element load time to pass [OK]

Common Mistakes:

• Assuming test waits longer than timeout
• Thinking test passes if element appears later
• Believing timeout disables failure

4. Identify the error in this Cypress code snippet:

cy.get('.nav-link', { timeout: '3000' }).click()

medium

A. Timeout value should be a number, not a string.

B. The selector '.nav-link' is invalid.

C. The click() command cannot follow get().

D. Timeout option is not supported in cy.get().

Solution

1. Step 1: Check the timeout option type

   The timeout value must be a number representing milliseconds, not a string.

2. Step 2: Validate other parts

   The selector is valid, click() can follow get(), and timeout is supported in cy.get().

3. Final Answer:

   Timeout value should be a number, not a string. -> Option A

4. Quick Check:

   Timeout must be numeric type [OK]

Hint: Timeout must be a number, not quoted string [OK]

Common Mistakes:

• Passing timeout as a string
• Misunderstanding selector validity
• Thinking click() is invalid after get()

5. You want to wait up to 8 seconds for a button with class .save-btn to appear, but only 3 seconds for a loading spinner .spinner to disappear. Which code correctly sets these timeouts in Cypress?

hard

A. cy.get('.save-btn').click({ timeout: 8000 }); cy.get('.spinner').should('not.exist', { timeout: 3000 });

B. cy.get('.save-btn', { timeout: 3000 }).click(); cy.get('.spinner', { timeout: 8000 }).should('not.exist');

C. cy.get('.save-btn', { timeout: 8000 }).click(); cy.get('.spinner', { timeout: 3000 }).should('not.exist');

D. cy.get('.save-btn').click(); cy.get('.spinner').should('not.exist'); cy.wait(8000);

Solution

1. Step 1: Set timeout for button appearance

   Use { timeout: 8000 } in cy.get() to wait up to 8 seconds for .save-btn.

2. Step 2: Set timeout for spinner disappearance

   Use { timeout: 3000 } in should('not.exist') to wait up to 3 seconds for .spinner to disappear.

3. Final Answer:

   cy.get('.save-btn', { timeout: 8000 }).click(); cy.get('.spinner', { timeout: 3000 }).should('not.exist'); -> Option C

4. Quick Check:

   Set timeout in get() and should() options correctly [OK]

Hint: Set timeout per command in options object [OK]

Common Mistakes:

• Passing timeout inside click() or should() incorrectly
• Swapping timeout values for elements
• Using fixed wait instead of timeout option