Communitygithub.com

E2E 테스트 스킬

Playwright를 사용하여 미리보기 및 프로덕션 환경에서 인간과 유사한 동작으로 E2E 테스트를 자동화합니다.

E2E 테스트 스킬란 무엇인가요?

이 스킬은 AI 에이전트(Claude Code, Cursor 등)가 Playwright 또는 Chrome MCP를 사용하여 엔드투엔드(E2E) 브라우저 테스트를 자동으로 수행할 수 있게 해줍니다. `smoke`, `full`, `visual` 등 다양한 테스트 스위트를 지원하며, `--human`, `--headless`, `--mobile` 과 같은 플래그로 테스트 환경을 세밀하게 제어할 수 있습니다. 핵심 기능은 무작위 지연, 인간과 유사한 타이핑 속도, 호버 후 클릭, 부드러운 스크롤 등 실제 사용자 행동을 모방하는 '인간 행동(Human Behavior)' 시뮬레이션입니다. 테스트 실행 후에는 상세한 마크다운 리포트와 시각적 회귀 테스트를 위한 스크린샷 및 diff 이미지를 생성하며, `.e2e-config.json` 파일을 통해 프로젝트별 구성을 지원합니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Svenja-dev/claude-code-skills/tree/HEAD/skills/e2e-testing
원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

E2E 테스팅 스킬

트리거

  • 키워드: teste, e2e, playwright, browser test, visual test, smoke test
  • 호출: /e2e-test [suite] [--flags]

설명

미리보기 및 프로덕션 환경에서 인간과 유사한 동작으로 E2E 테스트를 자동화합니다. Chrome MCP 또는 Playwright MCP를 사용하여 브라우저를 자동화합니다.

테스트 스위트

스위트소요 시간설명
smoke30초로그인, 업로드, 기본 UI ("teste" 키워드 기본값)
full5분모든 P0+P1 시나리오
visual2분스크린샷 비교만 수행
upload1분모든 파일 형식 테스트
download2분내보내기(Export) 기능 테스트
login30초인증 플로우 테스트
api1분API 엔드포인트 테스트

플래그

플래그설명
--previewlocalhost만 테스트
--production프로덕션 URL만 테스트
--quickP0 시나리오만 테스트 (가장 빠름)
--human실제 브라우저를 사용하는 Chrome MCP
--headless헤드리스 Playwright MCP (CI/CD)
--update-baselines스크린샷 기준선 업데이트
--mobile모바일 뷰포트 테스트 (375px, 768px)

워크플로우

1. 환경 확인
   - localhost 실행 여부 확인 (curl/fetch)
   - 프로덕션 URL 연결 가능 여부 확인
   - 플래그에 따라 테스트 환경 선택

2. 브라우저 설정
   - --human 플래그: Chrome MCP 사용 (mcp__claude-in-chrome__)
   - 그 외: Playwright MCP 사용 (mcp__playwright__)
   - 뷰포트: 1280x720 (데스크탑) 또는 375x667 (모바일)

3. 인간 행동 활성화
   - 무작위 지연: 동작 사이 200-800ms
   - 타이핑 속도: 키당 50-150ms
   - 클릭 전 호버 (200-500ms 대기)
   - 즉시 스크롤 대신 부드러운 스크롤

4. 테스트 스위트 실행
   - 각 테스트 전후 스크린샷 촬영
   - 오류 발생 시 스크린샷 + 콘솔 로그 저장
   - 다운로드 확인: 파일 크기 검증

5. 리포트 생성
   - .playwright-mcp/reports/ 디렉토리에 마크다운 리포트 저장
   - 시각적 차이 발생 시 Diff 이미지 생성
   - Pass/Fail/Flaky 상태 요약

테스트 시나리오 (P0 - 비즈니스 크리티컬)

1. 랜딩 페이지 로드

- URL로 이동
- 주요 요소가 보일 때까지 대기
- 로고/브랜딩 표시 확인
- 스크린샷: landing-page.png

2. 로그인/인증 플로우

- 로그인 버튼 클릭
- 모달/페이지 애니메이션 완료 대기
- 인증 옵션 표시 확인 (OAuth, 이메일 등)
- 스크린샷: login-modal.png

3. 언어 전환 (i18n 지원 시)

- 언어 전환 버튼 찾기
- 인간 지연 후 클릭
- 텍스트 변경 대기
- UI 텍스트가 변경되었는지 확인
- 스크린샷: language-toggle.png

4. 파일 업로드 (해당 기능이 있을 경우)

- 업로드 영역 클릭
- 테스트 파일 선택
- 확인 메시지 대기
- 파일 이름이 표시되는지 확인
- 스크린샷: file-uploaded.png

5. 주요 작업 수행

- 기본 앱 기능 실행
- 로딩 상태 대기
- 결과 대기 (최대 60초)
- 결과 콘텐츠 존재 확인
- 스크린샷: result.png

6. 내보내기/다운로드 (해당 기능이 있을 경우)

- 다운로드 버튼 클릭
- 다운로드 이벤트 대기
- 파일 형식이 올바른지 확인
- 파일 크기가 최소 크기보다 큰지 확인
- 스크린샷: download-complete.png

테스트 시나리오 (P1 - 중요)

7. 네비게이션/히스토리

- 네비게이션 요소 클릭
- 애니메이션 대기
- 올바른 콘텐츠가 로드되었는지 확인

8. 테마 전환 (해당 기능이 있을 경우)

- 테마 전환 버튼 찾기
- 현재 색상 기록
- 버튼 클릭
- 색상이 변경되었는지 확인
- 스크린샷: theme-toggle.png

9. 반응형 디자인

- 뷰포트를 375x667로 설정
- 모바일 네비게이션 표시 확인
- 주요 기능 접근 가능 여부 확인
- 스크린샷: mobile-view.png

10. 오류 처리

- 오류 유발 (잘못된 입력)
- 오류 메시지 대기
- 오류 메시지가 사용자 친화적인지 확인
- 스크린샷: error-state.png

인간 행동 함수

// 무작위 지연 (200-800ms)
async function humanDelay() {
  const delay = 200 + Math.random() * 600;
  await page.waitForTimeout(delay);
}

// 인간적인 타이핑 (키당 50-150ms)
async function humanType(selector: string, text: string) {
  await page.click(selector);
  await humanDelay();
  for (const char of text) {
    await page.keyboard.type(char);
    await page.waitForTimeout(50 + Math.random() * 100);
  }
}

// 호버 -> 대기 -> 클릭 패턴
async function humanClick(selector: string) {
  await page.hover(selector);
  await page.waitForTimeout(200 + Math.random() * 300);
  await page.click(selector);
  await humanDelay();
}

// 부드러운 스크롤
async function humanScroll(pixels: number) {
  await page.evaluate((px) => {
    window.scrollTo({ top: px, behavior: "smooth" });
  }, pixels);
  await page.waitForTimeout(500);
}

리포트 형식

## E2E 테스트 리포트 - [날짜] [시간]

### 환경

- **URL**: [테스트된 URL]
- **브라우저**: Chromium [버전]
- **뷰포트**: 1280x720
- **스위트**: smoke

### 결과

| #   | 테스트              | 상태    | 소요 시간 | 스크린샷                    |
| --- | ------------------ | ------- | -------- | --------------------------- |
| 1   | 랜딩 페이지 로드    | PASS    | 0.8s     | [보기](landing-page.png)    |
| 2   | 로그인 모달        | PASS    | 1.2s     | [보기](login-modal.png)     |
| 3   | 파일 업로드        | PASS    | 2.1s     | [보기](file-uploaded.png)   |
| 4   | 주요 작업          | SLOW    | 45.2s    | [보기](result.png)          |
| 5   | 다운로드           | FAIL    | 3.4s     | [보기](error.png)           |

### 요약

- **전체**: N개 테스트
- **통과**: X개 (Y%)
- **실패**: A개 (B%)
- **느림/불안정**: C개 (D%)
- **소요 시간**: Z초

시각적 기준선

.playwright-mcp/
├── baselines/                    # 황금 기준 (git 추적)
│   ├── landing-page-desktop.png
│   ├── landing-page-mobile.png
│   ├── login-modal.png
│   ├── result.png
│   └── error-state.png
├── current/                      # 현재 스크린샷 (git 무시)
├── diffs/                        # 픽셀 차이 (git 무시)
└── reports/                      # 테스트 리포트 (git 무시)

실행

가장 간단한 호출

사용자: "teste"
-> 사용 가능한 환경에서 smoke 스위트 실행

특정 테스트

사용자: "teste upload"
-> upload 스위트만 실행

사용자: "teste production visual"
-> 프로덕션 환경에서 visual 스위트 실행

사용자: "teste --quick --human"
-> 실제 Chrome 브라우저로 빠른 테스트 실행

CI/CD 통합

사용자: "teste --headless --full"
-> 파이프라인에서 모든 테스트를 헤드리스로 실행

오류 처리

  1. Localhost에 연결할 수 없는 경우:

    • 경고 표시
    • 개발 서버를 시작할지 묻기

  2. 프로덕션에 연결할 수 없는 경우:

    • 경고 표시
    • 배포 상태 확인

  3. 테스트 시간 초과 (>60초):

    • 현재 상태 스크린샷 촬영
    • 콘솔 로그 저장
    • FAIL로 표시

  4. 시각적 차이 감지:

    • Diff 이미지 생성
    • FLAKY로 표시 (자동 FAIL 아님)
    • 사용자가 기준선 업데이트 필요 여부 결정

설정

프로젝트 루트에 선택적 .e2e-config.json 파일:

{
  "previewUrl": "http://localhost:5173",
  "productionUrl": "https://your-app.com",
  "defaultSuite": "smoke",
  "timeouts": {
    "navigation": 10000,
    "action": 60000,
    "download": 30000
  },
  "viewports": {
    "desktop": { "width": 1280, "height": 720 },
    "tablet": { "width": 768, "height": 1024 },
    "mobile": { "width": 375, "height": 667 }
  },
  "humanBehavior": {
    "enabled": true,
    "minDelay": 200,
    "maxDelay": 800,
    "typingSpeed": { "min": 50, "max": 150 }
  },
  "screenshots": {
    "onEveryStep": false,
    "onFailure": true,
    "fullPage": false
  }
}

전제 조건

  • Chrome MCP 또는 Playwright MCP 설치
  • package.json이 있는 Node.js 프로젝트
  • 선택 사항: 프로젝트 설정을 위한 .e2e-config.json

저자

Dresden AI Insights - https://dresdenaiinsights.com

관련 스킬

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community