cy.intercept() for request interception in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the test result of this cy.intercept() usage?

Consider this Cypress test snippet that intercepts a GET request and modifies the response.

cy.intercept('GET', '/api/data', { fixture: 'data.json' }).as('getData');
cy.visit('/dashboard');
cy.wait('@getData').its('response.statusCode').should('eq', 200);

What will be the outcome of the assertion?

Cypress

cy.intercept('GET', '/api/data', { fixture: 'data.json' }).as('getData');
cy.visit('/dashboard');
cy.wait('@getData').its('response.statusCode').should('eq', 200);

A The test passes but the status code is 404 since the fixture is missing.

B The test passes because the intercepted response returns status 200 from the fixture.

C The test fails because the alias '@getData' is not defined correctly.

D The test fails because cy.intercept() does not support fixtures as responses.

💡 Hint

Think about how cy.intercept() uses fixtures to mock responses and what status code is returned by default.

Using fixture: 'data.json' in cy.intercept() mocks the response with the fixture content and automatically sets the status code to 200. The alias '@getData' is correctly defined and waited on, so the assertion passes.

❓ assertion

intermediate

Which assertion correctly verifies the intercepted request's method?

You have intercepted a POST request using cy.intercept('POST', '/submit').as('postSubmit'). After triggering the request, you want to assert that the method was indeed POST.

Which assertion code is correct?

Cypress

cy.wait('@postSubmit').its('request.method').should(???);

A .should('equals', 'POST')

B .should('equal', 'post')

C .should('be', 'POST')

D .should('eq', 'POST')

💡 Hint

Check the exact syntax for Cypress assertions and the case sensitivity of HTTP methods.

The correct Cypress assertion to check equality is .should('eq', value). HTTP methods are uppercase strings, so 'POST' is correct. Other options use invalid assertion commands or wrong case.

🔧 Debug

advanced

Why does this cy.intercept() not catch the request?

Given this code snippet:

cy.intercept('GET', '/api/items').as('getItems');
cy.visit('/items');
cy.wait('@getItems');

The test fails with a timeout waiting for '@getItems'. What is the most likely reason?

A The actual request URL includes query parameters, so '/api/items' does not match exactly.

B cy.intercept() only works for POST requests by default.

C The alias '@getItems' must be declared after cy.visit().

D cy.wait() cannot be used with aliases created by cy.intercept().

💡 Hint

Think about how cy.intercept() matches URLs and what happens if the request URL has extra parts.

cy.intercept() matches URLs exactly unless wildcards or patterns are used. If the actual GET request has query parameters like '/api/items?page=1', the intercept with '/api/items' won't catch it, causing the wait to timeout.

❓ framework

advanced

How to stub a response with a delay using cy.intercept()?

You want to simulate a slow network by delaying the response of a GET request to '/api/user'. Which cy.intercept() option correctly adds a 2-second delay before responding?

A cy.intercept('GET', '/api/user', (req) => { req.reply({ delay: 2000, body: { name: 'Alice' } }) })

B cy.intercept('GET', '/api/user', { delay: 2000, body: { name: 'Alice' } })

C cy.intercept('GET', '/api/user', (req) => { req.delay(2000); req.reply({ name: 'Alice' }); })

D cy.intercept('GET', '/api/user', (req) => { setTimeout(() => req.reply({ name: 'Alice' }), 2000); })

💡 Hint

Check the official way to add delay in cy.intercept() using the reply callback.

Option A uses the correct syntax: inside the intercept callback, calling req.reply() with an object that includes delay and body. Option A uses a non-existent req.delay() method. Option A uses setTimeout but can cause timing issues.

🧠 Conceptual

expert

What is the effect of multiple cy.intercept() calls for the same route?

If you define two intercepts for the same HTTP method and URL pattern, like:

cy.intercept('GET', '/api/data', { fixture: 'data1.json' });
cy.intercept('GET', '/api/data', { fixture: 'data2.json' });

Which statement best describes what happens when a GET request to '/api/data' is made?

A Both intercepts run in order, merging their responses into one.

B The first intercept is used, and the second is ignored.

C The second intercept overrides the first, so the response uses 'data2.json'.

D An error is thrown because multiple intercepts for the same route are not allowed.

💡 Hint

Consider how Cypress handles multiple intercepts for identical routes.

Cypress applies intercepts in the order they are declared. The last matching intercept overrides previous ones for the same route and method. So the response will come from the second intercept's fixture.

Practice

1. What is the main purpose of cy.intercept() in Cypress testing?

easy

A. To watch or modify network requests during tests

B. To create UI elements dynamically

C. To run tests in parallel

D. To generate random test data

Solution

1. Step 1: Understand the role of cy.intercept()

   This command is used to observe or change network requests made by the app during testing.

2. Step 2: Compare with other options

   The other options describe unrelated testing tasks: creating UI elements dynamically, running tests in parallel, or generating random test data.

3. Final Answer:

   To watch or modify network requests during tests -> Option A

4. Quick Check:

   cy.intercept() = watch or modify requests [OK]

Hint: Remember: intercept means catch or change requests [OK]

Common Mistakes:

• Confusing cy.intercept() with UI commands
• Thinking it runs tests in parallel
• Assuming it generates test data

2. Which of the following is the correct syntax to intercept a GET request to '/api/users' and stub a response with status 200?

easy

A. cy.intercept('GET', '/api/users', 200)

B. cy.intercept('/api/users', 'GET', { statusCode: 200 })

C. cy.intercept('POST', '/api/users', { status: 200 })

D. cy.intercept('GET', '/api/users', { statusCode: 200, body: [] })

Solution

1. Step 1: Check correct parameter order and object structure

   The correct order is method, URL, then response object with statusCode and body.

2. Step 2: Validate each option

   cy.intercept('GET', '/api/users', { statusCode: 200, body: [] }) matches correct syntax. cy.intercept('/api/users', 'GET', { statusCode: 200 }) swaps method and URL. cy.intercept('POST', '/api/users', { status: 200 }) uses wrong method and missing body. cy.intercept('GET', '/api/users', 200) passes status as number, not object.

3. Final Answer:

   cy.intercept('GET', '/api/users', { statusCode: 200, body: [] }) -> Option D

4. Quick Check:

   Method, URL, response object = cy.intercept('GET', '/api/users', { statusCode: 200, body: [] }) [OK]

Hint: Method first, then URL, then response object [OK]

Common Mistakes:

• Swapping method and URL parameters
• Using status instead of statusCode
• Passing status as a number alone

3. Given this code snippet, what will be the output of the intercepted request's status code?

cy.intercept('GET', '/api/data', { statusCode: 404, body: { error: 'Not found' } }).as('getData')
cy.visit('/data-page')
cy.wait('@getData').then(({ response }) => {
  console.log(response.statusCode)
})

medium

A. 404

B. 200

C. undefined

D. 500

Solution

1. Step 1: Analyze the intercept stub response

   The intercept stubs the GET request to '/api/data' with statusCode 404 and error message.

2. Step 2: Understand the console log output

   The cy.wait waits for the intercepted request. The response object uses response.status (which is 404), but the code logs response.statusCode, which is undefined.

3. Final Answer:

   undefined -> Option C

4. Quick Check:

   response.statusCode = undefined (use response.status) [OK]

Hint: cy.wait response uses .status, not .statusCode [OK]

Common Mistakes:

• Logging response.statusCode instead of response.status
• Confusing response.status with statusCode
• Expecting default 200 without stub

4. Identify the error in this Cypress intercept code:

cy.intercept('GET', '/api/items', (req) => {
  req.reply({ status: 201, body: { id: 1 } })
})

medium

A. Callback function should return a value

B. Using 'status' instead of 'statusCode' in reply object

C. Incorrect URL format

D. Missing method parameter in intercept

Solution

1. Step 1: Check the reply object keys

   The reply object must use 'statusCode' to set HTTP status, not 'status'.

2. Step 2: Verify other parts

   Method and URL are correct, and callback does not need to return a value.

3. Final Answer:

   Using 'status' instead of 'statusCode' in reply object -> Option B

4. Quick Check:

   Use statusCode, not status [OK]

Hint: Use statusCode key in reply, not status [OK]

Common Mistakes:

• Confusing status with statusCode
• Thinking callback must return a value
• Assuming URL format is wrong

5. You want to test how your app handles a slow server response for a POST request to '/api/login'. Which cy.intercept() usage correctly simulates a 2-second delay with a 200 status and a JSON body { success: true }?

hard

A. cy.intercept('POST', '/api/login', { delay: 2000, statusCode: 200, body: { success: true } })

B. cy.intercept('POST', '/api/login', { delayMs: 2000, status: 200, body: { success: true } })

C. cy.intercept('POST', '/api/login', (req) => { req.reply({ delay: 2000, status: 200, body: { success: true } }) })

D. cy.intercept('POST', '/api/login', (req) => { req.delay(2000).reply({ statusCode: 200, body: { success: true } }) })

Solution

1. Step 1: Understand delay usage in cy.intercept

   Delay, statusCode, and body can be used directly in the response object without a callback.

2. Step 2: Check each option's correctness

   cy.intercept('POST', '/api/login', { delay: 2000, statusCode: 200, body: { success: true } }) correctly uses delay, statusCode, and body directly. cy.intercept('POST', '/api/login', { delayMs: 2000, status: 200, body: { success: true } }) uses wrong keys 'delayMs' and 'status'. cy.intercept('POST', '/api/login', (req) => { req.reply({ delay: 2000, status: 200, body: { success: true } }) }) uses callback but 'status' instead of 'statusCode'. cy.intercept('POST', '/api/login', (req) => { req.delay(2000).reply({ statusCode: 200, body: { success: true } }) }) tries chaining a non-existent req.delay method.

3. Final Answer:

   cy.intercept('POST', '/api/login', { delay: 2000, statusCode: 200, body: { success: true } }) -> Option A

4. Quick Check:

   Direct { delay, statusCode, body } [OK]

Hint: Delay works directly in response object [OK]

Common Mistakes:

• Using wrong keys like delayMs or status
• Using status instead of statusCode in callback
• Trying to chain non-existent req.delay method