cy.intercept() for request interception in Cypress - Test Execution Trace

Test Overview

This test uses cy.intercept() to intercept a network request and verify that the intercepted response contains the expected data.

Test Code - Cypress

Cypress

describe('API request interception test', () => {
  it('intercepts GET /api/users and checks response', () => {
    cy.intercept('GET', '/api/users', {
      statusCode: 200,
      body: { users: [{ id: 1, name: 'Alice' }] }
    }).as('getUsers');

    cy.visit('/users');

    cy.wait('@getUsers').its('response.statusCode').should('eq', 200);
    cy.get('#user-list').should('contain.text', 'Alice');
  });
});

Execution Trace - 4 Steps

Step	Action	System State	Assertion	Result
1	cy.intercept() is set up to intercept GET requests to /api/users and respond with a mocked user list	Test runner is ready, intercept is active	-	PASS
2	cy.visit('/users') navigates the browser to the users page	Browser loads the /users page, triggering the GET /api/users request	-	PASS
3	cy.wait('@getUsers') waits for the intercepted GET /api/users request to complete	Intercepted request completes with mocked response	Check that response status code equals 200	PASS
4	cy.get('#user-list') finds the user list element and checks it contains text 'Alice'	User list element is visible on the page with mocked user data	Verify that user list contains 'Alice'	PASS

Failure Scenario

Failing Condition: The intercepted request does not return the mocked response or the page does not render the user list correctly

Execution Trace Quiz - 3 Questions

What does cy.intercept() do in this test?

A Intercepts the GET /api/users request and returns a mocked response

B Clicks a button on the page

C Navigates to the /users page

D Checks the text inside an element

Key Result

Use cy.intercept() to control and test network requests by mocking responses, which helps isolate frontend behavior from backend dependencies.