11.5Combining UI + API Tests

The most powerful pattern: use the API to set up data, verify through the UI, then validate via API.

test('user can update their profile', async ({ page, request }) => {
  // Setup: create user via API
  await request.post('/api/users', {
    data: { name: 'Alice', email: 'alice@test.com' },
  });

  // UI: update the profile
  await page.goto('/profile');
  await page.getByLabel('Name').fill('Alice Smith');
  await page.getByRole('button', { name: 'Save' }).click();
  await expect(page.getByRole('alert')).toHaveText('Profile updated');

  // Verify: check via API that the change persisted
  const response = await request.get('/api/users/alice');
  const user = await response.json();
  expect(user.name).toBe('Alice Smith');
});