Fixture-based response mocking in Cypress - Test Execution Trace

Test Overview

This test uses a fixture file to mock the server response for a user list API call. It verifies that the mocked data is displayed correctly on the page.

Test Code - Cypress

Cypress

describe('User List with Fixture Mocking', () => {
  it('displays mocked user data from fixture', () => {
    cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers');
    cy.visit('/users');
    cy.wait('@getUsers');
    cy.get('[data-cy=user-name]').should('have.length', 3);
    cy.get('[data-cy=user-name]').first().should('contain.text', 'Alice');
  });
});

Execution Trace - 5 Steps

Step	Action	System State	Assertion	Result
1	Set up intercept to mock GET /api/users with fixture 'users.json' and alias it as 'getUsers'	No page loaded yet, intercept ready to catch API call	-	PASS
2	Visit the /users page in the browser	Browser loads the /users page, triggering API call to /api/users	-	PASS
3	Wait for the intercepted API call '@getUsers' to complete	API call intercepted and responded with fixture data	Verify the mocked response was used	PASS
4	Find all elements with data-cy attribute 'user-name' on the page	Page displays user names from mocked data	Check that there are exactly 3 user name elements	PASS
5	Check that the first user name element contains text 'Alice'	First user name element visible with text 'Alice'	Verify the first user name matches the fixture data	PASS

Failure Scenario

Failing Condition: The fixture file 'users.json' is missing or malformed, or the intercept does not match the API call

Execution Trace Quiz - 3 Questions

What does the intercept command do in this test?

A It clicks on the first user name element

B It waits for the page to load completely

C It replaces the real API response with data from the fixture file

D It verifies the number of user elements on the page

Key Result

Using fixture-based mocking helps isolate frontend tests from backend changes and makes tests faster and more reliable by controlling API responses.