브라우저 QA — 자동화된 시각적 테스트 및 상호작용 검증은(는) 무엇을 하나요?
사용 시기
- 스테이징/프리뷰 환경에 기능을 배포한 후
- 여러 페이지에서 UI 동작을 확인해야 할 때
- 출시 전 — 레이아웃, 폼, 상호작용이 실제로 작동하는지 확인할 때
- 프론트엔드 코드를 건드리는 PR을 리뷰할 때
- 접근성 감사 및 반응형 테스트
작동 방식
브라우저 자동화 MCP(claude-in-chrome, Playwright 또는 Puppeteer)를 사용하여 실제 사용자처럼 라이브 페이지와 상호작용합니다.
안전 우선 — 폭발 반경 (기본적으로 읽기 전용 실행)
브라우저 QA는 실제 인증 및 실제 사용자 여정을 다루므로, 폭발 반경을 명시적으로 처리해야 합니다. 기본값은 읽기 전용: 프로덕션 URL에 대해 변이 여정(결제, 지불, 삭제, 대량 업데이트)을 절대 실행하지 마십시오. 명시적 옵트인 및 스테이징/프리뷰 URL이 필요합니다. 실제 프로덕션 로그인이 아닌 시드된 테스트 자격 증명을 사용하고, 스크린샷을 저장하기 전에 자격 증명/토큰/PII를 삭제하십시오.
1단계: 스모크 테스트
1. 대상 URL로 이동
2. 콘솔 오류 확인 (노이즈 필터링: 분석, 타사)
3. 네트워크 요청에서 4xx/5xx 없음 확인
4. 데스크톱 + 모바일 뷰포트에서 접힌 부분 위 스크린샷 촬영
5. Core Web Vitals 확인: LCP < 2.5초, CLS < 0.1, INP < 200ms
(INP는 2024년 3월 FID를 대체함; 임계값은 web.dev 기준)
2단계: 상호작용 테스트
1. 모든 탐색 링크 클릭 — 끊어진 링크 없음 확인
2. 유효한 데이터로 폼 제출 — 성공 상태 확인
3. 유효하지 않은 데이터로 폼 제출 — 오류 상태 확인
4. 인증 흐름 테스트: 로그인 → 보호된 페이지 → 로그아웃 (테스트 자격 증명만 사용, 프로덕션 금지)
5. 주요 사용자 여정 테스트 (결제, 온보딩, 검색)
— 기본적으로 읽기 전용; 명시적 옵트인이 있는 경우에만 스테이징에 대해 변이 여정 실행
(위의 "안전 우선" 참조)
3단계: 시각적 회귀 테스트
1. 주요 페이지를 3개의 중단점(375px, 768px, 1440px)에서 스크린샷 촬영
2. 커밋된 기준 스크린샷과 비교
— 기준이 없으면 INCONCLUSIVE로 보고, 절대 무음 PASS로 보고하지 않음
3. 5px 이상 레이아웃 이동, 누락된 요소, 오버플로우 플래깅
4. 해당되는 경우 다크 모드 확인
4단계: 접근성 검사
1. 각 페이지에서 axe-core 또는 동등한 도구 실행
2. WCAG 2.2 AA 위반 사항 플래깅 (대비, 레이블, 포커스 순서)
3. 키보드 탐색이 처음부터 끝까지 작동하는지 확인
4. 스크린 리더 랜드마크 확인
참고: axe-core는 자동으로 WCAG의 약 30~40%를 다룹니다. 깔끔한 실행은 필요 조건이지, 충분 조건이 아닙니다 — 키보드 탐색, 포커스 순서, 스크린 리더 통과는 여전히 수동 확인이 필요합니다. 자동화된 패스만으로 "접근 가능"이라고 보고하지 마십시오.
출력 형식
## QA 보고서 — [URL] — [타임스탬프]
### 스모크 테스트
- 콘솔 오류: 0개의 심각, 2개의 경고 (분석 노이즈)
- 네트워크: 모두 200/304, 실패 없음
- Core Web Vitals: LCP 1.2초 ✓, CLS 0.02 ✓, INP 89ms ✓
### 상호작용
- [✓] 탐색 링크: 12/12 작동
- [✗] 문의 양식: 잘못된 이메일에 대한 오류 상태 누락
- [✓] 인증 흐름: 로그인/로그아웃 작동
### 시각적
- [✗] 히어로 섹션이 375px 뷰포트에서 오버플로우됨
- [✓] 다크 모드: 모든 페이지 일관성 유지
### 접근성
- AA 위반 2개: 히어로 이미지에 대체 텍스트 누락, 푸터 링크의 낮은 대비
### 판정: 수정 후 출시 (2개 이슈, 0개 차단)
# 판정 ∈ 출시 / 수정 후 출시 / 출시 금지; 시각적 기준이 없으면 INCONCLUSIVE 사용
통합
모든 브라우저 MCP와 함께 작동:
mChild__claude-in-chrome__*도구 (선호 — 실제 Chrome 사용)mcp__browserbase__*를 통한 Playwright- 직접 Puppeteer 스크립트
배포 후 모니터링을 위해 /canary-watch와 함께 사용하십시오.