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();

예시의 /api/todos는 설명용 가상 endpoint이며 Lab server에는 없습니다. Lab의 추가 button은 network request 없이 화면에만 항목을 추가하므로 URL만 바꾸면 waitForResponse가 timeout됩니다. Lab에서는 URL을 /api/summary로, method를 GET으로, click 대상을 요약 새로고침 button으로 바꿔 실행합니다.

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

Request, response와 UI state를 함께 보는 재현 캡처

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합니다.

실습

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

Event correlation​

Response를 기다릴 때​

실습​

Event correlation

Response를 기다릴 때

실습