브라우저 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개, 차단 없음)
# verdict ∈ SHIP / SHIP WITH FIXES / DO NOT SHIP; 시각 기준이 없으면 INCONCLUSIVE 사용
통합
모든 브라우저 MCP와 함께 작동:
mChild__claude-in-chrome__*도구 (권장 — 실제 Chrome 사용)mcp__browserbase__*를 통한 Playwright- 직접 Puppeteer 스크립트
배포 후 모니터링을 위해 /canary-watch와 함께 사용하십시오.