dpdpdndn 블로그

[STK9-03] Playwright E2E 환경 구축

3 min read

[STK9-03] Playwright E2E 환경 구축

작업 내용 (설계 의도)

변경 사항

frontend 프로젝트에 Playwright를 설치하고, E2E 테스트 기반 설정과 API 장애 자동 감지 헬퍼를 구축한다. 실제 테스트 케이스는 STK9-04에서 작성한다.

설치: @playwright/test + Chromium 브라우저 (CI에서 npx playwright install --with-deps chromium으로 설치)

playwright.config.ts:

  • baseURL: http://localhost:3000
  • use.trace: CI에서 on-first-retry
  • reporter: ['html', ['junit', {outputFile: 'playwright-report/results.xml'}]]
  • webServer 없음 (CI에서 직접 서버 기동)
  • 기존 vitest 설정(vitest.config.ts)과 충돌 없음 — testDir: 'e2e/'로 분리

e2e/helpers/api-monitor.ts:

  • monitorApiErrors(page) 함수: page.on('response') 훅 등록, /api/ 경로의 4xx/5xx 응답을 배열로 수집
  • assertNoApiErrors(errors) 함수: 테스트 종료 시 에러 목록이 있으면 fail with 상세 메시지

다이어그램

파일 구조

flowchart LR
    FE[frontend/] --> PConfig[playwright.config.ts]
    FE --> E2E[e2e/]
    E2E --> Helpers[helpers/]
    E2E --> Smoke[smoke/]
    Helpers --> Monitor[api-monitor.ts]
    Smoke --> Specs[*.spec.ts - STK9-04에서 작성]

API 모니터 동작

sequenceDiagram
    participant Test as spec.ts
    participant Monitor as api-monitor.ts
    participant Page as Playwright page

    Test->>Monitor: monitorApiErrors(page)
    Monitor->>Page: page.on('response', handler)
    Page-->>Monitor: /api/* 응답 수신
    Note over Monitor: status >= 400 → errors 배열에 추가
    Test->>Monitor: assertNoApiErrors(errors)
    Monitor-->>Test: errors.length > 0이면 fail

테스트 케이스

  • npx playwright test --list 가 오류 없이 실행된다 (STK9-04 이전에는 0개 표시)
  • playwright.config.ts가 vitest 설정과 충돌하지 않아 npm test(vitest)가 영향받지 않는다
  • monitorApiErrors(page) 등록 후 200 응답만 발생하면 assertNoApiErrors가 통과된다
  • monitorApiErrors(page) 등록 후 404 응답이 발생하면 assertNoApiErrors가 fail하며 URL과 상태코드를 메시지에 포함한다
  • monitorApiErrors(page) 등록 후 500 응답이 발생하면 assertNoApiErrors가 fail한다
  • /api/ 경로가 아닌 외부 URL(예: fonts.googleapis.com) 오류는 무시된다

그래프 뷰