dpdpdndn 블로그

[STK9-04] E2E 스모크 테스트 케이스

3 min read

[STK9-04] E2E 스모크 테스트 케이스

의존: STK9-03 (Playwright 환경 구축 완료 후 착수)

작업 내용 (설계 의도)

변경 사항

frontend/e2e/smoke/ 아래 6개 스펙 파일을 작성한다. 모든 스펙은 monitorApiErrors로 API 장애를 자동 감지하고, assertNoApiErrors로 테스트 종료 시 검증한다.

공통 패턴:

beforeEach: monitorApiErrors(page) 등록
afterEach: assertNoApiErrors(errors) 호출
test: navigate → 화면 렌더링 확인 → 핵심 인터랙션 1~2개

6개 스펙:

  1. homepage.spec.ts — 루트 페이지 로딩, 주요 네비게이션 요소 확인
  2. stocks.spec.ts — /stocks 접근, 종목 리스트 렌더링 확인
  3. watchlist.spec.ts — /watchlist 접근, 관심종목 목록 조회
  4. order.spec.ts — 주문 관련 화면 접근, 잔고 영역 렌더링
  5. alert.spec.ts — 알림 설정 화면 접근, 설정 목록 렌더링
  6. chat.spec.ts — /chat 접근, 챗 인터페이스 렌더링

Toss API 외부 호출 격리: CI 환경에서 Toss API 호출이 실패하지 않도록 page.route('**/v1/quotations/**', ...) 로 모킹. 실제 주가 데이터 대신 fixture 반환.

다이어그램

테스트 실행 흐름

sequenceDiagram
    participant CI as CI (e2e job)
    participant PW as Playwright
    participant FE as Next.js :3000
    participant BE as Spring Boot :8080

    CI->>PW: npx playwright test e2e/smoke/
    loop 각 스펙 (6개)
        PW->>FE: page.goto(url)
        FE->>BE: /api/* 요청
        BE-->>FE: JSON 응답
        FE-->>PW: DOM 렌더링
        PW->>PW: assertNoApiErrors (4xx/5xx 0건 검증)
    end
    PW-->>CI: pass / fail + HTML report

스펙별 검증 항목

flowchart LR
    HP[homepage] --> NAV[네비게이션 요소 존재]
    ST[stocks] --> LIST[종목 리스트 아이템 1개 이상]
    WL[watchlist] --> WUI[관심종목 UI 렌더링]
    OR[order] --> BAL[잔고 영역 렌더링]
    AL[alert] --> ASET[알림 목록 렌더링]
    CH[chat] --> CINP[챗 입력창 렌더링]

테스트 케이스

  • 백엔드·프론트엔드 정상 기동 상태에서 6개 스펙 모두 통과된다
  • 백엔드가 500 응답을 반환하면 해당 스펙의 assertNoApiErrors가 fail하고 URL·상태코드가 오류 메시지에 표시된다
  • Toss 외부 API가 호출되지 않도록 page.route 모킹이 적용되어 CI 환경에서도 통과된다
  • 종목 리스트가 0건이어도 API 응답이 200이면 stocks.spec.ts가 통과된다 (데이터 부재 ≠ 장애)
  • watchlist.spec.ts에서 관심종목 추가 버튼 클릭 후 API가 2xx를 반환하면 통과된다
  • Playwright HTML Report가 playwright-report/index.html에 생성된다
  • CI에서 실패 시 HTML Report가 GitHub Actions artifact로 7일간 업로드된다

그래프 뷰