Timeout configuration in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the default command timeout to 10000 milliseconds.

Cypress

Cypress.config('[1]', 10000);

Drag options to blanks, or click blank then click option'

ApageLoadTimeout

BdefaultCommandTimeout

CrequestTimeout

DresponseTimeout

Attempts:

3 left

💡 Hint

Common Mistakes

Using pageLoadTimeout instead of defaultCommandTimeout.

Confusing request and response timeout options.

The defaultCommandTimeout option sets how long Cypress waits for commands to complete before timing out.

2fill in blank

medium

Complete the code to set the page load timeout to 60000 milliseconds.

Cypress

Cypress.config('[1]', 60000);

Drag options to blanks, or click blank then click option'

ApageLoadTimeout

BdefaultCommandTimeout

CrequestTimeout

DresponseTimeout

Attempts:

3 left

💡 Hint

Common Mistakes

Using defaultCommandTimeout instead of pageLoadTimeout.

Mixing up request and response timeout options.

The pageLoadTimeout option sets how long Cypress waits for a page to load before timing out.

3fill in blank

hard

Fix the error in the code to set the request timeout to 15000 milliseconds.

Cypress

Cypress.config('[1]', 15000);

Drag options to blanks, or click blank then click option'

Arequest_time_out

Brequesttimeout

CrequestTimeout

Drequest-timeout

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or snake_case instead of camelCase.

Adding dashes or underscores in the option name.

The correct option name is requestTimeout with camelCase and no underscores or dashes.

4fill in blank

hard

Fill both blanks to set the response timeout to 20000 milliseconds and verify it with a console log.

Cypress

Cypress.config([1]: 20000);
console.log('Response timeout is set to', Cypress.config([2]));

Drag options to blanks, or click blank then click option'

AresponseTimeout

BrequestTimeout

CdefaultCommandTimeout

DpageLoadTimeout

Attempts:

3 left

💡 Hint

Common Mistakes

Using different option names for set and get.

Confusing response timeout with request timeout.

Both blanks use responseTimeout to set and then get the response timeout value.

5fill in blank

hard

Fill all three blanks to set multiple timeouts: default command to 8000, page load to 45000, and request to 12000 milliseconds.

Cypress

Cypress.config({
  [1]: 8000,
  [2]: 45000,
  [3]: 12000
});

Drag options to blanks, or click blank then click option'

AdefaultCommandTimeout

BpageLoadTimeout

CrequestTimeout

DresponseTimeout

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the timeout option names and values.

Using responseTimeout instead of requestTimeout.

Set defaultCommandTimeout, pageLoadTimeout, and requestTimeout with the given values.

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