name: browser-test description: Run Playwright E2E smoke tests or author new spec files for GameChu pages. Use when running E2E tests, playwright tests, smoke tests, browser tests, 브라우저 테스트, end-to-end tests, writing e2e specs, or testing pages with Playwright MCP.

browser-test Skill

Playwright E2E 테스트 실행 및 새 spec 파일 작성 가이드.

Modes

Smoke Mode — 빠른 상태 확인

페이지를 순회하며 콘솔 에러, HTTP 에러, 렌더링 실패를 감지합니다.

npm run test:e2e          # webServer 자동 기동 후 전체 실행
npm run test:e2e:ui       # UI 모드 (로컬 디버깅)
npx playwright test e2e/smoke.spec.ts  # 단일 spec

체크 항목:

• HTTP 500/404 없음
• 콘솔 에러 없음 (page.on("console", ...))
• 주요 UI 요소 렌더링

보고 양식:

✅ smoke.spec.ts — 홈 로드, 콘솔 에러 없음
✅ auth.spec.ts — /log-in 폼 렌더링
⚠️ games.spec.ts — /games 500 응답 (DB 없음)

Author Mode — 새 Spec 파일 작성

1. npm run dev로 dev 서버 시작
2. Playwright MCP(등록된 경우)로 페이지 탐색 → selector 확인
3. 관찰 결과를 바탕으로 e2e/*.spec.ts 작성

Playwright MCP 등록:

claude mcp add playwright npx @playwright/mcp@latest

Config

• playwright.config.ts — testDir: ./e2e, baseURL: localhost:3000
• webServer.command: npm run dev, reuseExistingServer: !CI
• 타임아웃: 30s (테스트), 120s (서버 기동)
• Reporter: CI=list, 로컬=html

Spec 파일 목록

e2e/
  smoke.spec.ts       # 홈 로드, 콘솔 에러
  auth.spec.ts        # /log-in 폼 존재
  games.spec.ts       # /games 유효 UI 렌더링
  arenas.spec.ts      # /arenas 유효 UI 렌더링
  api-health.spec.ts  # API 라우트 500 아님

새 Spec 패턴

import { test, expect } from "@playwright/test";

test("페이지 설명", async ({ page }) => {
    const consoleErrors: string[] = [];
    page.on("console", (msg) => {
        if (msg.type() === "error") consoleErrors.push(msg.text());
    });

    const response = await page.goto("/your-page");
    expect(response?.status()).not.toBe(500);
    expect(consoleErrors).toHaveLength(0);
    await expect(page.locator("selector")).toBeVisible();
});

// API 헬스 체크
test("API 응답 확인", async ({ request }) => {
    const response = await request.get("/api/endpoint");
    expect(response.status()).not.toBe(500);
});

DB 없는 환경

빈 상태(empty state) UI 렌더링 여부로 검증:

// DB 없이도 body가 보임 — 빈 상태 허용
await expect(page.locator("body")).toBeVisible();

아티팩트 (gitignore됨)

• test-results/ — 실패 스크린샷/트레이스
• playwright-report/ — HTML 리포트 (npx playwright show-report)