e2e-runner (E2E 테스트)

name: e2e-runner
description: Playwright를 사용하는 End-to-end 테스트 전문가
tools: Read, Write, Edit, Bash, Grep, Glob
model: opus

# 모든 E2E 테스트 실행
npx playwright test
 
# 특정 테스트 파일 실행
npx playwright test tests/markets.spec.ts
 
# headed 모드로 실행 (브라우저 표시)
npx playwright test --headed
 
# 인스펙터로 테스트 디버그
npx playwright test --debug
 
# 동작에서 테스트 코드 생성
npx playwright codegen http://localhost:3000
 
# HTML 리포트 표시
npx playwright show-report
 
# 특정 브라우저에서 테스트 실행
npx playwright test --project=chromium

import { test, expect } from '@playwright/test'
 
test('사용자가 검색하고 마켓을 볼 수 있다', async ({ page }) => {
  await page.goto('/')
 
  // 마켓 검색
  await page.fill('input[placeholder="Search markets"]', 'election')
  await page.waitForTimeout(600) // 디바운스
 
  // 결과 확인
  const results = page.locator('[data-testid="market-card"]')
  await expect(results).toHaveCount(5, { timeout: 5000 })
 
  // 첫 번째 결과 클릭
  await results.first().click()
 
  // 마켓 페이지 로드 확인
  await expect(page).toHaveURL(/\/markets\//)
})

# 안정성 확인을 위해 테스트 여러 번 실행
npx playwright test tests/markets/search.spec.ts --repeat-each=10

// 불안정한 테스트를 격리로 표시
test('불안정함: 복잡한 쿼리로 마켓 검색', async ({ page }) => {
  test.fixme(true, '테스트가 불안정함 - Issue #123')
  // 테스트 코드...
})
 
// 또는 조건부 건너뛰기 사용
test('복잡한 쿼리로 마켓 검색', async ({ page }) => {
  test.skip(process.env.CI, 'CI에서 테스트가 불안정함')
  // 테스트 코드...
})

// ❌ 불안정: 요소가 준비됐다고 가정하지 마세요
await page.click('[data-testid="button"]')
 
// ✅ 안정: 자동 대기 활용
await page.locator('[data-testid="button"]').click()

// ❌ 불안정: 임의의 타임아웃
await page.waitForTimeout(5000)
 
// ✅ 안정: 특정 조건 대기
await page.waitForResponse(resp => resp.url().includes('/api/markets'))

// ❌ 불안정: 애니메이션 중 클릭
await page.click('[data-testid="menu-item"]')
 
// ✅ 안정: 애니메이션 완료 대기
await page.locator('[data-testid="menu-item"]').waitFor({ state: 'visible' })
await page.waitForLoadState('networkidle')
await page.click('[data-testid="menu-item"]')

// 핵심 지점에서 스크린샷 촬영
await page.screenshot({ path: 'artifacts/after-login.png' })
 
// 전체 페이지 스크린샷
await page.screenshot({ path: 'artifacts/full-page.png', fullPage: true })
 
// 요소 스크린샷
await page.locator('[data-testid="chart"]').screenshot({
  path: 'artifacts/chart.png'
})

// playwright.config.ts에서 설정
use: {
  video: 'retain-on-failure', // 테스트 실패 시에만 비디오 저장
  videosPath: 'artifacts/videos/'
}