5.1 Request, response 관측

Page의 request와 response event로 browser network를 관측할 수 있습니다.

page.on('requestfailed', request => {
  console.log(request.method(), request.url(), request.failure());
});

page.on('response', response => {
  if (response.status() >= 500) {
    console.log(response.status(), response.url());
  }
});

특정 user action의 API를 기다릴 때 event promise를 먼저 만듭니다.

const responsePromise = page.waitForResponse(response =>
  response.url().endsWith('/api/todos') &&
  response.request().method() === 'POST',
);

await page.getByRole('button', { name: '추가' }).click();
const response = await responsePromise;
expect(response.ok()).toBeTruthy();

Response status만 확인하지 말고 UI가 결과를 올바르게 반영했는지도 web assertion으로 검증합니다.

Service Worker가 request를 처리하면 routing과 network event 관측이 기대와 다를 수 있습니다. Mock이 적용되지 않을 때 service worker 설정과 browser context option을 확인합니다.

Request header와 body에는 token, 개인정보가 있을 수 있습니다. CI log와 trace artifact에 무엇이 저장되는지 검토합니다.

참고: Network

Event correlation

const records: Array<Record<string, unknown>> = [];
page.on('response', response => {
  if (response.url().includes('/api/')) {
    records.push({
      method: response.request().method(),
      url: response.url(),
      status: response.status(),
    });
  }
});

Test 종료 시 필요한 subset만 JSON attachment로 남깁니다. Authorization header와 body 전체를 그대로 기록하지 않습니다.

Response를 기다릴 때

const summaryResponse = page.waitForResponse(response =>
  response.url().endsWith('/api/summary') && response.request().method() === 'GET',
);
await page.getByRole('button', { name: '요약 새로고침' }).click();
const response = await summaryResponse;
expect(response.ok()).toBeTruthy();

page.waitForResponse()가 반환하는 browser Response에는 ok()을 사용합니다. toBeOK()은 request fixture나 page.request가 반환하는 APIResponse 전용 matcher입니다. Response 2xx만으로 UI rendering 성공을 보장하지 않으므로 최종 summary text도 assertion합니다.

실습

1. API request 목록을 sanitized attachment로 남깁니다.
2. requestfailed와 HTTP 500 response의 차이를 확인합니다.
3. UI error와 network entry를 trace 시간축에서 연결합니다.