# E2e UI Execute

> Playwright MCP를 사용하여 순차적으로 UI E2E 테스트 구현, 버그 발견 시 문서화 후 계속. e2e-ui-research 후 계획된 테스트 시나리오 구현. Use when this capability is needed.

- Skill: `tomevault-io/e2e-ui-execute-3` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/e2e-ui-execute-3`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/e2e-ui-execute-3/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/e2e-ui-execute-3

---


# UI E2E 테스트 구현 커맨드

## 사용자 입력

```text
$ARGUMENTS
```

테스트 번호를 추출하고 (지정된 경우) 추가 컨텍스트가 있으면 고려합니다 (비어있지 않은 경우).

---

## 개요

1. **전제조건 확인**:
   - `docs/e2e-ui/test-targets.md` 존재 확인 (영문 버전, AI용)
   - 없으면 ERROR: "먼저 /e2e-ui-research를 실행하세요"

2. **프로젝트 설정 읽기**:
   - `playwright.config.ts` (또는 `.js`) 읽기:
     - `testDir` 또는 `testMatch`에서 테스트 디렉토리 추출
     - `webServer.url` 또는 `use.baseURL`에서 base URL 추출
   - `package.json` 읽기 (같은 디렉토리):
     - dependencies에서 프레임워크 감지

3. **테스트 대상 로드**:
   - 문서에서 테스트 시나리오 읽기
   - $ARGUMENTS에서 테스트 번호 추출 (제공된 경우)
   - 실행 순서 식별

4. **테스트 순차 실행**:
   - 각 테스트 시나리오에 대해 (순서대로):
     a. **수동 테스트 단계**: Playwright MCP로 동작 검증
     b. **버그 감지**: 이슈 확인
     c. **버그 처리**: 버그 발견 시 이중 언어 버그 리포트 생성(ko.md + md) 후 계속
     d. **코드 작성 단계**: 통과하면 Playwright 테스트 코드 작성 (버그 시 건너뜀)
     e. **진행 상황 보고**: summary 문서 업데이트

5. **문서 생성**:
   - 완료된 각 테스트에 대해 `docs/e2e-ui/summary-test-N.md` 생성
   - 버그에 대해 `docs/e2e-ui/bug-report-test-N.ko.md`와 `bug-report-test-N.md` 생성
   - 전체 진행 상황 추적

6. **결과 보고**:
   - 완료된 테스트 목록
   - 발견된 버그 목록 (세부사항 포함)
   - 생성된 테스트 코드 요약
   - 다음 단계 안내

---

## 주요 규칙

### 🚨 버그 감지 (중요)

**다음 상황 발생 시 문서화 후 계속**:

1. **페이지 로드 실패**: 네비게이션 타임아웃, 404/500 에러, 빈 페이지
2. **요소 미발견**: 예상 버튼/입력 누락, 잘못된 요소 속성
3. **상호작용 실패**: 클릭 작동 안 함, 입력 텍스트 입력 안 됨
4. **콘솔 에러**: JavaScript 에러, 네트워크 실패
5. **예상치 못한 동작**: 잘못된 네비게이션, 잘못된 데이터 표시

**버그 리포트 형식** (ko.md와 md 버전 모두 생성):

생성할 파일:

- `docs/e2e-ui/bug-report-test-N.ko.md` (한국어)
- `docs/e2e-ui/bug-report-test-N.md` (영어)

버그 리포트 생성 후, 중단하지 말고 **다음 테스트로 계속 진행**합니다.

### ✅ 반드시 해야 할 것

- **`playwright.config.ts`와 `package.json` 먼저 읽기** 프로젝트 설정 가져오기
- 테스트를 **한 번에 하나씩** (순차적으로) 실행
- 코드 작성 전 **실제 테스트**에 Playwright MCP 사용
- 버그 발견 시 **이중 언어 버그 리포트 생성** (ko.md + md)
- 버그 문서화 후 **테스트 계속**
- **playwright.config.ts에서 지정된 디렉토리**에 테스트 코드 작성
- testMatch 패턴의 네이밍 규칙 따르기
- 증거로 스크린샷 촬영

### ❌ 절대 하지 말아야 할 것

- **`playwright.config.ts` 읽기 건너뛰기**
- 여러 테스트 병렬 실행
- 수동 검증 단계 건너뛰기
- **버그 발견 후 테스트 중단** (계속 진행해야 함)
- 동작 검증 없이 테스트 코드 작성
- playwright.config에서 지정한 디렉토리 밖에 테스트 코드 작성
- base URL이나 테스트 디렉토리 하드코딩

### 🎯 테스트 구현 프로세스

각 테스트마다:

1. **수동 검증** (Playwright MCP 사용):
   - 페이지 이동
   - UI 요소와 상호작용
   - 스냅샷 촬영
   - 예상 동작 검증
   - 콘솔 메시지 확인

2. **버그 체크**:
   - 모든 것이 예상대로 작동했나?
   - 에러나 경고가 있나?
   - 동작이 올바른가?

3. **결정 시점**:
   - ✅ **통과하면**: 테스트 코드 작성 진행
   - 🐛 **버그 발견**: 이중 언어 버그 리포트 생성, 다음 테스트로 계속

4. **테스트 코드 작성** (통과한 경우에만):

   ```typescript
   // playwright.config.ts에서 지정된 디렉토리에 테스트 파일 생성
   // 프로젝트 테스트 패턴 따르기
   // assertion과 에러 처리 포함
   ```

5. **문서화**:
   - summary 문서 생성
   - 테스트한 내용 기록
   - 관찰사항 메모

---

## 실행 흐름

### 초기화

1. **프로젝트 설정 파일 읽기**
2. 테스트 대상 문서 로드 (docs/e2e-ui/test-targets.md - 영문 버전, AI용)
3. 실행할 테스트 결정
4. 기존 summary 확인 (재개 기능)

### 각 테스트마다

1. **알림**: "테스트 N 시작: [이름]"
2. **수동 테스트**: Playwright MCP 도구 사용
3. **평가**: 동작이 올바른가? 에러가 있나?
4. **결정**: 버그면 버그 리포트, 통과면 코드 작성
5. **문서화**: summary 또는 버그 리포트 생성
6. **진행**: "테스트 N 완료. 테스트 N+1로 이동 중..."

### 완료

- 종합적인 요약 제공:
  - 생성된 코드와 함께 통과한 테스트 목록
  - 리포트 링크와 함께 발견된 버그 목록
  - 달성한 전체 커버리지
  - 다음 단계 권장사항

---

## 실행

위 가이드라인에 따라 작업을 시작하세요.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/kubrickcode) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->