Claude Code 기반 E2E 테스트 자동화

배경

운영 중인 쇼핑몰 웹앱은 77개 페이지를 다루면서도 체계화된 테스트 시나리오 문서가 한 건도 없었습니다. 회귀가 두려워 배포 전마다 손으로 눌러봤고, AI에게 테스트를 부탁하면 매번 컨텍스트를 다시 설명하는 복붙 루프에 빠졌습니다. Cypress를 거의 몰랐던 상태에서 Claude Code와 함께 기준선을 만든 과정을, 같은 문제를 겪는 다른 팀에 공유하기 위해 준비했습니다.

구성

1. 01Before — 77개 페이지, 시나리오 문서 0건, 회귀 공포, AI 복붙-재설명 루프
2. 02발상 전환 — "AI야 테스트 짜줘"가 아니라, 정답을 참조 구현의 파일:라인으로 먼저 문서에 고정한다
3. 034레이어 구조 — 행동 명세(WHAT) → 시나리오 카드(HOW) → 실행(Cypress·Vitest) → 수동 확인(QA 체크리스트). 전 구간 역추적 가능
4. 04노하우① 증거 기반 — 참조 구현 인용 강제, 추측 금지
5. 05노하우② 5초 회귀 체크 포인트 — 시나리오 카드에 사람용 3항목 내장
6. 06노하우③ 계산 로직 독립 — 쿠폰·포인트·배송비를 E2E에서 떼어 Vitest 단위 테스트로
7. 07노하우④ 프로젝트 메모리 — 세션을 넘어 유지할 규칙·불변 조건·함정을 CLAUDE.md에 기록
8. 08사례① 결제 금액 불일치 — 저장소 4개를 교차 검증해 원인 5종을 동시에 정합
9. 09사례② 마이페이지 리뷰 흐름 — 별점·텍스트·이미지 업로드 폼 자동화, API 인터셉트, 캐시 갱신 검증
10. 10한계와 로드맵 — 복잡 UI의 수동 의존, 토큰 비용, 로컬/CI 환경차 → CI 통합, 시나리오 자가 갱신

핵심 메시지

• 정답을 먼저 고정한다 — AI가 현재 코드를 정답으로 삼으면 틀린 테스트가 통과한다. 참조 구현의 파일:라인을 인용하게 만든다.
• 5초 체크리스트 — 자동화가 못 잡는 것을 사람이 5초 안에 확인할 수 있게 카드 안에 넣는다.
• 로직을 격리한다 — 금액 계산은 E2E가 아니라 단위 테스트의 영역이다. 실행 시간이 570ms면 매 저장마다 돌릴 수 있다.

발표에서 인용한 수치

페이지 커버

77 / 77

테스트 시나리오

약 700건 (문서 78개)

Cypress 케이스

515건 (실행 300 · skip 215)

QA 체크리스트

83항목

계산 로직 단위 테스트

Vitest 약 570ms

금액 불일치 사례

저장소 4개 · 원인 5종