API-first setup pattern in Cypress - Test Execution Trace

Test Overview

This test uses the API-first setup pattern to create a user via API before visiting the UI page. It verifies that the user appears correctly on the page after setup.

Test Code - Cypress

Cypress

describe('API-first setup pattern test', () => {
  it('creates user via API then verifies UI', () => {
    // Step 1: Create user via API
    cy.request('POST', '/api/users', { name: 'Alice', email: '[e-mail]' })
      .then((response) => {
        expect(response.status).to.eq(201);
        expect(response.body).to.have.property('id');
        const userId = response.body.id;

        // Step 2: Visit user page
        cy.visit(`/users/${userId}`);

        // Step 3: Verify user name on page
        cy.get('[data-cy=user-name]').should('contain.text', 'Alice');
      });
  });
});

Execution Trace - 3 Steps

Step	Action	System State	Assertion	Result
1	Send POST request to /api/users with user data {name: 'Alice', email: '[e-mail]'}	API server receives request and creates new user with unique ID	Response status is 201 Created and response body contains user ID	PASS
2	Visit the URL /users/{userId} where userId is from API response	Browser loads user detail page for the created user	-	PASS
3	Find element with data-cy attribute 'user-name' and check it contains text 'Alice'	User detail page shows user name 'Alice' in the specified element	Element text contains 'Alice'	PASS

Failure Scenario

Failing Condition: API request fails or returns status other than 201, or user name not found on UI

Execution Trace Quiz - 3 Questions

What is the first action performed in this API-first setup test?

A Send POST request to create user via API

B Visit the user detail page in browser

C Check user name on UI page

D Click a button on the page

Key Result

Using API-first setup helps tests run faster and more reliably by preparing data directly via API before UI interaction.