QA 1인이 Claude Code 멀티 페르소나로 E2E 테스트 35개를 구축한 방법

요약

토스인컴 QA Manager 정수호가 7~11월 5개월간 혼자 + AI 3개 도구로 35개 E2E 테스트를 운영 단계까지 가져감. 사람이 한 코드 작성은 10% 미만, 나머지는 문제 정의·요구사항 정리·검토. React 클릭 안정화, 약관 자동 처리, 테스트 결과 메신저 루프 같은 구조적 해법이 핵심.

내용

세금환급 서비스는 연말정산·현금영수증·세금비서·숨은환급찾기 4종으로 분화돼 있고 각자 UX와 인증이 다름. 의료비·인적공제·전월세·주담대·중소기업 감면 등 공제 항목이 수십 가지, 실험 그룹·약관·홈택스 스크래핑 서버 상태까지 더하면 테스트 조합이 폭발적으로 늘어남. 7월 시점 추산으로 E2E 1개 작성에 4~~8시간, 40개를 만들면 160~~300시간 소요 — 1인 운영 + 잦은 UI/정책 변경 환경에서 사람 손으로는 유지 불가.

플로우 자체가 평균 15~20단계의 장거리 릴레이. 로그인(내부 인증) → 공제 선택(정책 엔진) → 스크래핑(외부 공공기관 API) → 환급 금액(엔진 계산) → 결제(페이 연동)이 한 번에 이어짐. 한 단계라도 타이밍이 어긋나면 전체 실패. UI는 React 기반이라 사용자 입장에서 자연스러운 애니메이션·오버레이가 E2E에는 클릭 미스·전환 실패로 돌아옴.

7~11월 사이 일어난 변경 — 7월 스크래핑 단계 UI 개편, 8월 일 단위 문구 변경(예: '공제 수정하기' → '입력한 정보 수정하기'), 9월 프론트 리팩토링 + 컴포넌트 대규모 업데이트, 10월 월세 공제 질문 추가, 11월 서비스별 약관 개선. 사람에겐 사소한 UI 변화가 자동화에는 시나리오 재구성을 요구하는 큰 변경.

해결 / 접근

AI 도구 역할 분담

Claude Sonnet 4.5 (Claude Code) — 메인 개발자, 3개 페르소나
- SDET (Software Development Engineer in Test) Agent — 테스트 설계·아키텍처
- Documentation Specialist — 문서·일지 자동 생성
- Git Master — 커밋·PR·변경 요약
Cursor — IDE 페어 프로그래머, type 에러·import 실시간 처리
Codex — 코드 비교·차이 분석 ("이 두 테스트의 차이는?")

React UI 클릭 안정화 — 성공률 70% → 100%

문제 진단: DOM은 보이지만 클릭 안 되는 상태. CSS 레이아웃 완료 후에도 React useEffect 내부 로직으로 onClick 핸들러 등록까지 수 ms~수백 ms 지연. Playwright는 "보임"만 기준으로 클릭 시도 → "Element is not clickable"
해법: 시각 준비(visual ready)와 상호작용 준비(interaction ready)를 분리해 대기
1. DOMContentLoaded → visible 확인 → React effect 바인딩까지 단계별 안정화 대기
2. 폴백 계층 — 표준 click → 네이티브 키보드(Enter) → JS 디스패치 (위험하지 않은 순서)
3. clickReactButton()으로 통합 API 추상화, 전체 테스트에서 재사용
16·17번 테스트에서 반복되던 클릭 실패가 사라짐, 코드 복잡도 ↓ UI 안정성 ↑

약관 자동 처리 시스템

문제: 4개 서비스가 약관 개수·순서·명칭이 전부 다름 → 하드코딩 불가
해법
- URL 기반 서비스 타입 자동 감지
- checkbox 개수로 신/구 유저 구분
- consentOptions.ts에 서비스별 필수 약관 중앙 관리
- "모두 동의하기" 버튼이 없는 경우 fallback
결과: clickInitialConsent() 함수 하나로 4개 서비스 약관 변화 모두 흡수, 약관 변경에 테스트 중단 0회. 이후 약관 추가는 설정 파일 한 줄 수정

메신저 루프

매 테스트 종료 시 결과·실행시간·환경·실행시각·테스트 UserNo·관련 티켓 브랜치를 메신저로 자동 발신
실패 시 에러 메시지·실패 단계·EventID·로그 + 테스트 리포트 + 실패 지점 스크린샷
흐름: 메신저에서 결과 확인 → 이상 케이스 AI에 재분석 요청 → AI 수정 코드 적용 → 메신저 재확인. 코드 직접 입력 시간보다 메신저에서 AI와 대화하는 시간이 늘어남

시간순 마일스톤

7월 — 핵심 5개 테스트 + Page Object Model 도입
8월 — React 타이밍 이슈 해결, 클릭 성공률 70% → 100%
9월 — 2,147줄 파일을 3개 파일로 분리, 23개 테스트 import 자동 수정, userNo 충돌 해소
10월 — consentOptions.ts 중앙 관리, URL 기반 서비스 자동 감지 → 3일 만에 약관 정합성 시스템 완성
11월 — v3.3.0, 35개 테스트 운영 단계 진입

일지 자동화

이전: 30~40분 / 일
이후: 커밋 기반 자동 정리 → 1~2분 검토

결과 / 참고

E2E 테스트 35개 운영, 사람 1명 + AI 3개로 4~5명 규모 자동화 팀 결과치 도달
사람의 코드 직접 입력 비중 < 10%, 시간의 대부분은 문제 정의·요구사항 정리·맥락 설명·결과 검토
기간: 2025년 7월~11월
작성: 토스인컴 QA Manager 정수호
원문: https://toss.tech/article/ai-driven-ui-test-automation

요약

내용

해결 / 접근

AI 도구 역할 분담

Claude Sonnet 4.5 (Claude Code) — 메인 개발자, 3개 페르소나
- SDET (Software Development Engineer in Test) Agent — 테스트 설계·아키텍처
- Documentation Specialist — 문서·일지 자동 생성
- Git Master — 커밋·PR·변경 요약
Cursor — IDE 페어 프로그래머, type 에러·import 실시간 처리
Codex — 코드 비교·차이 분석 ("이 두 테스트의 차이는?")

React UI 클릭 안정화 — 성공률 70% → 100%

문제 진단: DOM은 보이지만 클릭 안 되는 상태. CSS 레이아웃 완료 후에도 React useEffect 내부 로직으로 onClick 핸들러 등록까지 수 ms~수백 ms 지연. Playwright는 "보임"만 기준으로 클릭 시도 → "Element is not clickable"
해법: 시각 준비(visual ready)와 상호작용 준비(interaction ready)를 분리해 대기
1. DOMContentLoaded → visible 확인 → React effect 바인딩까지 단계별 안정화 대기
2. 폴백 계층 — 표준 click → 네이티브 키보드(Enter) → JS 디스패치 (위험하지 않은 순서)
3. clickReactButton()으로 통합 API 추상화, 전체 테스트에서 재사용
16·17번 테스트에서 반복되던 클릭 실패가 사라짐, 코드 복잡도 ↓ UI 안정성 ↑

약관 자동 처리 시스템

문제: 4개 서비스가 약관 개수·순서·명칭이 전부 다름 → 하드코딩 불가
해법
- URL 기반 서비스 타입 자동 감지
- checkbox 개수로 신/구 유저 구분
- consentOptions.ts에 서비스별 필수 약관 중앙 관리
- "모두 동의하기" 버튼이 없는 경우 fallback
결과: clickInitialConsent() 함수 하나로 4개 서비스 약관 변화 모두 흡수, 약관 변경에 테스트 중단 0회. 이후 약관 추가는 설정 파일 한 줄 수정

메신저 루프

매 테스트 종료 시 결과·실행시간·환경·실행시각·테스트 UserNo·관련 티켓 브랜치를 메신저로 자동 발신
실패 시 에러 메시지·실패 단계·EventID·로그 + 테스트 리포트 + 실패 지점 스크린샷
흐름: 메신저에서 결과 확인 → 이상 케이스 AI에 재분석 요청 → AI 수정 코드 적용 → 메신저 재확인. 코드 직접 입력 시간보다 메신저에서 AI와 대화하는 시간이 늘어남

시간순 마일스톤

7월 — 핵심 5개 테스트 + Page Object Model 도입
8월 — React 타이밍 이슈 해결, 클릭 성공률 70% → 100%
9월 — 2,147줄 파일을 3개 파일로 분리, 23개 테스트 import 자동 수정, userNo 충돌 해소
10월 — consentOptions.ts 중앙 관리, URL 기반 서비스 자동 감지 → 3일 만에 약관 정합성 시스템 완성
11월 — v3.3.0, 35개 테스트 운영 단계 진입

일지 자동화

이전: 30~40분 / 일
이후: 커밋 기반 자동 정리 → 1~2분 검토

결과 / 참고

E2E 테스트 35개 운영, 사람 1명 + AI 3개로 4~5명 규모 자동화 팀 결과치 도달
사람의 코드 직접 입력 비중 < 10%, 시간의 대부분은 문제 정의·요구사항 정리·맥락 설명·결과 검토
기간: 2025년 7월~11월
작성: 토스인컴 QA Manager 정수호
원문: https://toss.tech/article/ai-driven-ui-test-automation

QA 1인이 Claude Code 멀티 페르소나로 E2E 테스트 35개를 구축한 방법

요약

내용

해결 / 접근

AI 도구 역할 분담

React UI 클릭 안정화 — 성공률 70% → 100%

약관 자동 처리 시스템

메신저 루프

시간순 마일스톤

일지 자동화

결과 / 참고

댓글 0

QA 1인이 Claude Code 멀티 페르소나로 E2E 테스트 35개를 구축한 방법

요약

내용

해결 / 접근

AI 도구 역할 분담

React UI 클릭 안정화 — 성공률 70% → 100%

약관 자동 처리 시스템

메신저 루프

시간순 마일스톤

일지 자동화

결과 / 참고

댓글 0