tomevault-io UI E2E 버그 수정 커맨드
사용자 입력
$ARGUMENTS
아규먼트에서 테스트 번호(필수)를 추출. 예: /e2e-ui-fix 3 → Test 3 버그 수정.
개요
E2E 테스트 중 발견된 버그에 대한 체계적 수정 워크플로우:
- 버그 리포트 로드: docs/e2e-ui/bug-report-test-N.md 읽기 (English 버전, AI용)
- 버그 재현: Playwright MCP로 버그 존재 확인
- 근본 원인 분석: Grep, Read, Playwright MCP 활용
- 수정 구현: 코딩 원칙 준수하여 문제 수정
- 수정 검증: Playwright MCP로 버그 해결 확인
- 테스트 작성: 회귀 방지용 Playwright 테스트 생성
- 문서화: 이중언어 수정 요약 생성
사전 조건
- ✅ 버그 리포트 존재:
docs/e2e-ui/bug-report-test-N.md(English 버전 필수) - ✅ Playwright MCP 서버 실행 중
- ✅ 프론트엔드 서버 실행 중
실행 워크플로우
1단계: 준비
버그 리포트 로드 (English 버전만, AI용):
docs/e2e-ui/bug-report-test-N.md읽기 (English, AI용 - ko.md 아님)- 추출 정보: 재현 단계, 예상 vs 실제 동작, 증거, 콘솔 에러, 우선순위
프로젝트 설정 읽기:
playwright.config.ts: base URL, 테스트 디렉토리 추출package.json: 프레임워크 감지
2단계: 버그 재현
Playwright MCP로 버그 재현:
- 버그 리포트의 정확한 단계 따르기
- 실제 동작과 예상 동작 비교
- 수정 전 증거용 스크린샷 촬영
- 현재 상태 문서화
버그 재현 실패 시:
- 버그가 이미 수정되었을 가능성 기록
- 사용자에게 계속 진행 또는 건너뛸지 질문
3단계: 근본 원인 분석
분석 단계:
- 재현에서 에러 세부사항 추출
- 관련 컴포넌트 식별 (Grep 사용)
- 소스 파일 읽기 (타겟팅된 읽기)
- 근본 원인 찾기:
- JavaScript 에러 → 코드 버그
- 요소 누락 → 컴포넌트 렌더링 문제
- 잘못된 동작 → 로직 에러
- 네트워크 실패 → API 통합 문제
발견 사항 문서화:
- 근본 원인 기록
- 라인 번호와 함께 영향받는 파일 기록
- 수정 접근법 식별
4단계: 수정 구현
수정 구현:
- 최소한의 집중된 변경
- 코딩 원칙 엄격히 준수
- 프로젝트 코딩 표준 준수
- 엣지 케이스 고려
수정 유형:
- UI 컴포넌트 버그: 렌더링 로직, 조건부 렌더링, CSS 수정
- 로직 에러: 계산, 검증, 상태 관리 수정
- 통합 문제: API 호출, 데이터 변환, 에러 처리 수정
5단계: 수정 검증
Playwright MCP로 수정 검증:
- 재현 단계 반복
- 예상 동작이 이제 작동하는지 확인
- 콘솔 에러 없는지 확인
- 수정 후 증거용 스크린샷 촬영
- 엣지 케이스 테스트
수정 검증 실패 시:
- 3단계(분석)로 돌아가기
- 작동하지 않은 것 문서화
6단계: 회귀 테스트 작성
Playwright 테스트 생성 (수정 검증 후에만):
파일 위치: playwright.config.ts의 디렉토리 사용
파일 명명: testMatch의 프로젝트 패턴 따르기
import { test, expect } from "@playwright/test";
test.describe("Test N: {시나리오 이름}", () => {
test("should {예상 동작}", async ({ page }) => {
// 네비게이션, 상호작용, assertion
});
// 필요 시 엣지 케이스 테스트
});
7단계: 문서화
이중언어 수정 요약 생성:
docs/e2e-ui/fix-summary-test-N.ko.md(Korean)docs/e2e-ui/fix-summary-test-N.md(English)
버그 리포트 상태 업데이트:
- 버그 리포트에 "Fixed" 상태 추가
- 수정 요약 링크
핵심 규칙
✅ 반드시 할 것
playwright.config.ts와package.json먼저 읽기- English 버그 리포트만 읽기 (.md, ko.md 아님) - 토큰 절약
- 수정 시도 전에 버그 먼저 재현
- 코딩 원칙 엄격히 준수
- 테스트 작성 전에 수정 작동 확인
- playwright.config.ts의 디렉토리에 회귀 테스트 작성
- 이중언어 수정 요약 생성 (ko.md + md)
- 증거용 스크린샷 촬영 (수정 전, 수정 후)
❌ 절대 하지 말 것
playwright.config.ts읽기 건너뛰기- Korean 버그 리포트(ko.md) 읽기 (토큰 낭비)
- 버그 재현 단계 건너뛰기
- 근본 원인 이해 없이 수정
- 수정 작동 확인 전에 테스트 코드 작성
- playwright.config에 명시된 디렉토리 외부에 테스트 작성
- 광범위하고 대규모 변경
🎯 수정 품질 기준
좋은 수정:
- 증상이 아닌 근본 원인 해결
- 최소한의 코드 변경
- 코드 품질 유지
- 기존 기능 망가뜨리지 않음
좋은 테스트:
- 원래 버그 시나리오 재현
- 수정 전 실패, 수정 후 성공
- 엣지 케이스 테스트
- 명확한 assertions
완료 보고 형식
수정 완료 후 사용자에게 제공할 요약:
## 버그 수정 완료: Test N
### 🐛 원본 버그
- **우선순위**: {priority}
- **이슈**: {한 줄 설명}
### ✅ 수정 요약
- **근본 원인**: {root cause}
- **수정 접근법**: {approach}
- **변경된 파일**: {count}개 파일
### 🧪 검증
- **재현**: ✅ 버그 재현 성공
- **수정 검증**: ✅ 예상 동작 정상 작동
- **테스트 작성**: ✅ 회귀 테스트 생성됨
### 📝 생성된 파일
- **수정 요약**: `docs/e2e-ui/fix-summary-test-N.ko.md` and `.md`
- **테스트 파일**: `{path/to/test.spec.ts}`
### 🔄 다음 단계
1. 수정 구현 검토
2. 전체 테스트 스위트 실행
3. 다음 버그 또는 테스트 계속: `/e2e-ui-execute {N+1}`
실행
위의 가이드라인에 따라 작업을 시작하세요.
Converted and distributed by TomeVault — claim your Tome and manage your conversions.