AgentSkillsCN

e2e-ui-fix

将 e2e-ui-execute 生成的缺陷报告，通过 Playwright MCP 重现并修正。在 E2E 测试执行过程中发现的缺陷，予以修正。

SKILL.md
--- frontmatter
name: e2e-ui-fix
description: e2e-ui-execute에서 생성된 버그 리포트를 Playwright MCP로 재현 및 수정. E2E 테스트 실행 중 발견된 버그 수정.
context: fork
agent: general-purpose

UI E2E 버그 수정 커맨드

사용자 입력

text
$ARGUMENTS

아규먼트에서 테스트 번호(필수)를 추출. 예: /e2e-ui-fix 3 → Test 3 버그 수정.

개요

E2E 테스트 중 발견된 버그에 대한 체계적 수정 워크플로우:

  1. •버그 리포트 로드: docs/e2e-ui/bug-report-test-N.md 읽기 (English 버전, AI용)
  2. •버그 재현: Playwright MCP로 버그 존재 확인
  3. •근본 원인 분석: Grep, Read, Playwright MCP 활용
  4. •수정 구현: 코딩 원칙 준수하여 문제 수정
  5. •수정 검증: Playwright MCP로 버그 해결 확인
  6. •테스트 작성: 회귀 방지용 Playwright 테스트 생성
  7. •문서화: 이중언어 수정 요약 생성

사전 조건

  • •✅ 버그 리포트 존재: 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단계: 근본 원인 분석

분석 단계:

  1. •재현에서 에러 세부사항 추출
  2. •관련 컴포넌트 식별 (Grep 사용)
  3. •소스 파일 읽기 (타겟팅된 읽기)
  4. •근본 원인 찾기:
    • •JavaScript 에러 → 코드 버그
    • •요소 누락 → 컴포넌트 렌더링 문제
    • •잘못된 동작 → 로직 에러
    • •네트워크 실패 → API 통합 문제

발견 사항 문서화:

  • •근본 원인 기록
  • •라인 번호와 함께 영향받는 파일 기록
  • •수정 접근법 식별

4단계: 수정 구현

수정 구현:

  • •최소한의 집중된 변경
  • •코딩 원칙 엄격히 준수
  • •프로젝트 코딩 표준 준수
  • •엣지 케이스 고려

수정 유형:

  1. •UI 컴포넌트 버그: 렌더링 로직, 조건부 렌더링, CSS 수정
  2. •로직 에러: 계산, 검증, 상태 관리 수정
  3. •통합 문제: API 호출, 데이터 변환, 에러 처리 수정

5단계: 수정 검증

Playwright MCP로 수정 검증:

  • •재현 단계 반복
  • •예상 동작이 이제 작동하는지 확인
  • •콘솔 에러 없는지 확인
  • •수정 후 증거용 스크린샷 촬영
  • •엣지 케이스 테스트

수정 검증 실패 시:

  • •3단계(분석)로 돌아가기
  • •작동하지 않은 것 문서화

6단계: 회귀 테스트 작성

Playwright 테스트 생성 (수정 검증 후에만):

파일 위치: playwright.config.ts의 디렉토리 사용

파일 명명: testMatch의 프로젝트 패턴 따르기

typescript
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

완료 보고 형식

수정 완료 후 사용자에게 제공할 요약:

markdown
## 버그 수정 완료: 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}`

실행

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