e2e

/e2e — E2E Forge Loop

화면 단위 E2E 테스트를 자동으로 도출, 생성, 실행합니다. Forge Loop로 모든 테스트가 통과할 때까지 자율 반복하며, 단계별 에스컬레이션으로 다양한 전략을 시도합니다.

설계 문서: @../../docs/e2e-forge-loop-design.md

[즉시 실행] 아래 워크플로우를 바로 시작하세요.

---

사용법

/e2e src/pages/order/          # 페이지 경로 기반
/e2e --figma https://...       # Figma 디자인 기반
/e2e --all                     # 전체 라우트 스캔
/e2e e2e/order-flow.spec.ts    # 기존 spec 재실행 (Forge Loop)

옵션	설명
--figma [URL]	Figma 화면에서 사용자 흐름 추출
--all	전체 라우트 스캔 → 화면별 spec 생성
--skip-gen	코드 생성 스킵, 기존 spec만 Forge Loop 실행
--max-retry N	Stage별 최대 재시도 횟수 (기본 3)

---

전제 조건

• Playwright 설치 필수. 미설치 시 → "/setup-e2e를 먼저 실행하세요" 안내
• 개발 서버 실행 중 (또는 playwright.config.ts에 webServer 설정)

# 전제 조건 체크
ls node_modules/@playwright/test 2>/dev/null || echo "NO_PLAYWRIGHT"
ls playwright.config.* 2>/dev/null || echo "NO_CONFIG"

---

Phase 1: 테스트 케이스 도출

Arguments: $ARGUMENTS

입력 분기:

입력	동작
페이지 경로 (src/pages/...)	해당 페이지 컴포넌트 + 라우트 분석
Figma URL (--figma)	Figma MCP로 화면 분석 → 사용자 흐름 추출
--all	전체 라우트 파일 스캔 → 화면 목록 도출
기존 spec 파일 (e2e/*.spec.ts)	Phase 1~2 스킵 → Phase 3 직행

1-1. 기존 E2E 케이스 확인

ls e2e/*.spec.ts 2>/dev/null | wc -l

• 있으면 → "기존 {N}개 spec이 있습니다. 기존 케이스로 실행할까요, 새로 도출할까요?"
• 없으면 → 도출 진행

1-2. Figma 기반 도출 (--figma 있을 때)

mcp__figma__get_metadata({ fileKey, nodeId })
mcp__figma__get_screenshot({ fileKey, nodeId })

스크린샷에서 추출:

• 화면 상태 (초기/로딩/에러/빈 상태/데이터 있음)
• 사용자 인터랙션 (버튼, 폼 입력, 네비게이션)
• 화면 간 전이 흐름

1-3. 코드 기반 도출 (경로만 있을 때)

# 라우트 구조 분석
grep -r "path:" src/routes/ 2>/dev/null || grep -r "getServerSideProps\|getStaticProps" src/pages/

# 페이지 컴포넌트 분석
# - 폼 필드, 버튼, 조건부 렌더링, API 호출 추출

1-4. BDD 시나리오 출력 (사용자 확인)

## E2E 테스트 시나리오

### 페이지: 주문 목록 (/orders)

| # | 시나리오 | 사전 조건 | 기대 결과 |
|---|---------|----------|----------|
| 1 | 주문 목록이 정상 로드된다 | 로그인 상태 | 테이블에 주문 N건 표시 |
| 2 | 검색 필터로 주문을 찾는다 | 주문 데이터 존재 | 필터링된 결과 표시 |
| 3 | 주문 상세로 이동한다 | 주문 1건 이상 | 상세 페이지 렌더링 |
| 4 | 빈 상태가 올바르게 표시된다 | 주문 0건 | 빈 상태 메시지 표시 |

이 시나리오로 진행할까요? [Y/N/수정]