AgentSkillsCN

e2e-ui-execute

使用 Playwright MCP 依次实现 UI E2E 测试，一旦发现缺陷即记录并继续推进。在 e2e-ui-research 后，落实既定的测试场景。

SKILL.md
--- frontmatter
name: e2e-ui-execute
description: Playwright MCP를 사용하여 순차적으로 UI E2E 테스트 구현, 버그 발견 시 문서화 후 계속. e2e-ui-research 후 계획된 테스트 시나리오 구현.
context: fork
agent: general-purpose

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로 이동 중..."

완료

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

실행

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