5.4 APIRequestContext

request fixture는 API로 test prerequisite를 만들고 backend contract를 직접 검증할 때 사용합니다.

test('creates todo through API', async ({ request, page }) => {
  const response = await request.post('/api/todos', {
    data: { title: 'API로 준비' },
  });
  await expect(response).toBeOK();

  await page.goto('/');
  await expect(page.getByText('API로 준비')).toBeVisible();
});

context.request와 page.request는 해당 BrowserContext의 cookie storage를 공유합니다. 반면 built-in request fixture는 browser context와 별도로 만들어진 APIRequestContext입니다. 별도 credential과 수명주기가 더 필요하면 top-level request.newContext()를 사용하고 반드시 닫습니다.

import { request as playwrightRequest } from '@playwright/test';

const api = await playwrightRequest.newContext({
  baseURL: 'https://api.example.test',
  extraHTTPHeaders: { Authorization: `Bearer ${token}` },
});

try {
  const response = await api.get('/health');
  await expect(response).toBeOK();
} finally {
  await api.dispose();
}

활용

• UI test의 빠른 data setup, cleanup
• Login API로 storage state 준비
• UI action 전후 backend state 비교
• Error response와 schema contract 검증
• Health check와 environment readiness

API response만 검증하면 browser rendering, accessibility, client state bug를 놓칩니다. E2E 목적에 맞게 API setup과 UI assertion을 결합합니다.

Test가 production API를 향하지 않도록 baseURL, credential, environment guard를 둡니다. Cleanup endpoint는 test가 만든 resource ID만 대상으로 제한합니다.

참고: API testing

UI setup을 API로 줄이기

test('생성된 Todo를 UI에서 완료한다', async ({ request, page }) => {
  const created = await request.post('/api/todos', { data: { title: 'API seed' } });
  await expect(created).toBeOK();

  await page.goto('/');
  const item = page.getByRole('listitem').filter({ hasText: 'API seed' });
  await item.getByRole('checkbox').check();
  await expect(item.getByRole('checkbox')).toBeChecked();
});

API로 준비하더라도 UI가 같은 backend state를 보도록 baseURL, cookie, environment가 일치해야 합니다.

Response contract

const response = await request.get('/api/summary');
await expect(response).toBeOK();
const body = await response.json();
expect(body).toMatchObject({ source: expect.any(String), total: expect.any(Number) });

Schema 검증 library가 이미 있다면 API test에 재사용하고 UI test는 business outcome에 집중합니다.

실습

1. UI setup과 API setup의 시간을 비교합니다.
2. API로 만든 data가 page refresh 뒤 보이는지 확인합니다.
3. Cleanup은 test가 만든 ID만 삭제하도록 제한합니다.
4. Production URL guard를 넣고 의도적으로 잘못된 baseURL을 차단합니다.