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.