blog
AI 코딩 도구로 E2E 테스트를 작성·검증하는 사이클
Front-end / Testing#E2E#Playwright#테스트 커버리지#Claude Code#SuperClaude
Claude Code + SuperClaude로 페이지 단위 E2E 테스트를 만들 때 반복한 사이클이다. 각 단계의 프롬프트를 고정해 두니 결과 품질이 일정해졌다.
1. 작성
해당 페이지를 분석한 뒤 E2E 상세 테스트를 작성해. 이 페이지의 E2E 커버리지(nextcov) 100%를 목표로 해.
(/sc:test)
2. 검증 ↔ 보완 반복
이 디렉터리의 테스트가 E2E 커버리지 100%를 달성했는지 분석해. 하위 컴포넌트도 모두 포함해.
(/sc:analyze)
위 분석 결과를 바탕으로 누락된 테스트를 작성해.
(/sc:test)
커버리지 리포트에 빠진 분기가 없어질 때까지 두 단계를 반복한다. "분석"과 "작성"을 한 프롬프트에 섞지 않고 나누면, 분석 결과를 사람이 먼저 확인하고 방향을 조정할 수 있다.
3. 정리
이 페이지 테스트 중 다음에 해당하는 것이 있는지 분석해.
- 중복 테스트: 같은 동작을 검증하는 테스트
- 커버리지에 기여하지 않는 테스트: 다른 테스트에서 이미 검증한 내용을 반복
- 과도한 대칭 테스트: 탭마다 같은 패턴을 반복해 추가 커버리지가 없는 테스트
(/sc:analyze)
커버리지 100%를 목표로 하면 AI가 비슷한 테스트를 계속 늘리는 경향이 있다. 정리 단계에서 실행 시간과 유지보수 비용을 다시 줄인다.
4. 분리 (필요할 때)
이 페이지 파일들에 코드 분리가 필요한지 분석하고, 필요하면 분리 계획을 세워.
(/sc:analyze)
테스트를 쓰다 보면 한 컴포넌트가 너무 많은 분기를 갖고 있다는 게 드러난다. 테스트하기 어려운 구조는 분리 신호다.
주의할 점
- 커버리지 100%는 "모든 줄이 한 번 이상 실행됐다"는 뜻이지, 모든 동작이 올바르게 검증됐다는 뜻이 아니다. 단언(
expect) 없이 클릭만 하는 테스트도 커버리지는 올린다. 생성된 테스트의 단언을 사람이 확인한다. - E2E 커버리지는 브라우저에서 실행된 코드만 측정한다. 서버 전용 코드는 별도로 수집하지 않으면 결과에 나타나지 않는다.
/sc:*명령은 SuperClaude가 제공하는 프롬프트 템플릿이다. 같은 내용을 자연어로 요청해도 된다.