Stubbing responses in Cypress - Test Execution Trace

Test Overview

This test stubs a network response for a user API call and verifies the UI shows the stubbed user name.

Test Code - Cypress

Cypress

describe('User API stub test', () => {
  it('stubs the /api/user response and checks UI', () => {
    cy.intercept('GET', '/api/user', { fixture: 'user.json' }).as('getUser');
    cy.visit('/profile');
    cy.wait('@getUser');
    cy.get('[data-cy=user-name]').should('contain.text', 'John Doe');
  });
});

Execution Trace - 4 Steps

Step	Action	System State	Assertion	Result
1	cy.intercept stubs GET /api/user with fixture user.json and aliases it as getUser	No browser interaction yet, stub is ready	-	PASS
2	cy.visit navigates to /profile page	Browser loads /profile page, triggers GET /api/user request	-	PASS
3	cy.wait waits for the aliased getUser network call to complete	Stubbed response from user.json is returned instead of real API	Verify network call intercepted and stubbed response received	PASS
4	cy.get finds element with data-cy=user-name and checks its text	Page shows user name from stubbed response	Assert element text contains 'John Doe'	PASS

Failure Scenario

Failing Condition: The stub fixture file user.json is missing or malformed, or the selector [data-cy=user-name] does not exist on the page

Execution Trace Quiz - 3 Questions

What does cy.intercept do in this test?

A It replaces the real API response with a stubbed fixture

B It navigates to the profile page

C It waits for the network call to finish

D It checks the text of an element

Key Result

Stubbing network responses isolates tests from backend changes and makes UI tests faster and more reliable.