# Playwright E2E 테스트 (e2e-testing)

> Playwright E2E 테스트 패턴으로 Page Object Model, 설정, CI/CD 연동, 산출물 관리, 불안정한 테스트 대응을 다룹니다.

- 카테고리: [테스트·디버깅](https://www.myskills.tools/ko/categories/testing-debugging/)
- 출처: 커뮤니티 · Affaan Mustafa
- 저장소: https://github.com/affaan-m/ECC/tree/main/skills/e2e-testing (commit d29cf65)
- SKILL.md: https://github.com/affaan-m/ECC/blob/main/skills/e2e-testing/SKILL.md
- 설치 명령: `npx skills add affaan-m/ECC --skill e2e-testing`
- 라이선스: MIT
- 호환 도구: Claude Code, Codex, Cursor, Copilot, OpenCode
- 권한: read-repo ✓, write-files ✓, shell ✓, network ✗
- 상태: 스캔 통과
- 규칙 스캔으로 모든 위험을 찾을 수는 없습니다. 설치 전에 이 스킬의 SKILL.md를 읽고 권한을 확인하세요.

## 핵심 규칙

고정 시간 타임아웃 대신 자동 대기 로케이터나 특정 응답 같은 구체적인 조건을 기다립니다.

## 실행 단계

1. **테스트 구조 정리** — tests/e2e 아래에 기능별로 테스트를 나누고 fixtures를 준비하며, data-testid 로케이터로 Page Object 클래스를 만듭니다.
2. **테스트 작성** — test.describe와 beforeEach로 케이스를 묶고 Page Object를 통해 페이지를 조작해 결과를 검증합니다.
3. **Playwright 설정** — playwright.config.ts에서 CI 재시도, 리포터, 실패 시 trace·스크린샷·동영상, 여러 브라우저, webServer를 설정합니다.
4. **불안정 테스트 대응** — test.fixme나 test.skip으로 격리하고 --repeat-each로 불안정한 케이스를 찾아 경쟁 상태, 네트워크, 애니메이션 타이밍 문제를 고칩니다.
5. **산출물과 CI** — 스크린샷, trace, 동영상을 저장하고 GitHub Actions에서 테스트를 실행해 리포트를 업로드하며 템플릿으로 보고서를 씁니다.

## 권한 설명 (SKILL.md 기준)

| 기능 | 필요 여부 | 설명 |
|---|---|---|
| 파일 쓰기 | 필요 | 테스트 파일, Page Object, playwright.config.ts, CI 워크플로를 작성합니다. |
| 명령 실행 | 테스트 시에만 필요 | npx playwright test를 --repeat-each, --retries 옵션과 함께 실행합니다. |
| 네트워크 송신 | 필요 없음 | 테스트는 기본적으로 로컬 baseURL을 대상으로 하며 그 밖의 네트워크 단계는 없습니다. |

## SKILL.md 프런트매터(YAML)

```yaml
---
name: e2e-testing
description: Playwright E2E testing patterns, Page Object Model, configuration, CI/CD integration, artifact management, and flaky test strategies. Use when writing Playwright tests, structuring page objects, or fixing flaky E2E runs in CI.
metadata:
  origin: ECC
---
```

홈: https://www.myskills.tools/ko/ · URL: https://www.myskills.tools/ko/skills/e2e-testing/