API-first setup pattern in Cypress - Build an Automation Script

Create a new user via API and verify UI shows the user

Preconditions (3)

Step 1: Send a POST request to /api/users with JSON body {"name": "Alice", "email": "[e-mail]"}

Step 2: Open the /users page in the browser

Step 3: Verify that the user list contains a user with name 'Alice' and email '[e-mail]'

✅ Expected Result: The new user 'Alice' is created via API and visible in the UI user list

Automation Requirements - Cypress

Assertions Needed:

Verify API response status is 201

Verify UI user list contains the created user with correct name and email

Best Practices:

Use API call to set up test data before UI visit

Use explicit assertions on API response

Use data-test attributes for UI element selectors

Avoid UI actions for setup to speed up tests

Automated Solution

Cypress

describe('API-first setup pattern test', () => {
  it('creates a user via API and verifies UI shows it', () => {
    // Step 1: Create user via API
    cy.request({
      method: 'POST',
      url: '/api/users',
      body: { name: 'Alice', email: '[e-mail]' },
      headers: { 'Content-Type': 'application/json' }
    }).then((response) => {
      expect(response.status).to.equal(201);
      expect(response.body).to.have.property('id');
    });

    // Step 2: Visit the users page
    cy.visit('/users');

    // Step 3: Verify the user appears in the list
    cy.get('[data-test=user-list]').should('be.visible');
    cy.get('[data-test=user-list]').contains('Alice').should('exist');
    cy.get('[data-test=user-list]').contains('[e-mail]').should('exist');
  });
});

This test uses Cypress to automate the manual test case.

First, it sends a POST request to the API to create a user named Alice. We check the response status is 201 to confirm success and that the response body contains an id, meaning the user was created.

Next, the test visits the /users page in the browser to check the UI.

Finally, it looks for the user list element using a data-test attribute, which is a best practice for stable selectors. It asserts that the list contains the name 'Alice' and the email '[e-mail]'.

This approach uses the API to set up test data quickly and reliably, then verifies the UI shows the expected result, following the API-first setup pattern.

Common Mistakes - 4 Pitfalls

Setting up test data only through the UI instead of API

Not asserting the API response status or body

Using brittle selectors like CSS classes or element indexes for UI verification

{'mistake': 'Not waiting for the UI to load before checking elements', 'why_bad': 'Tests may fail intermittently if elements are not yet rendered.', 'correct_approach': "Use Cypress commands like cy.get() with should('be.visible') to wait for elements."}

Bonus Challenge

Now add data-driven testing with 3 different users created via API and verify each appears in the UI

Show Hint