Browser QA — 자동화된 시각적 테스트 및 상호작용
사용 시점
- 스테이징/프리뷰에 기능을 배포한 후
- 여러 페이지에서 UI 동작을 확인해야 할 때
- 출시 전 — 레이아웃, 폼, 상호작용이 실제로 작동하는지 확인
- 프론트엔드 코드를 건드리는 PR을 리뷰할 때
- 접근성 감사 및 반응형 테스트
작동 방식
브라우저 자동화 MCP(Claude-in-Chrome, Playwright, Puppeteer)를 사용하여 실제 사용자처럼 라이브 페이지와 상호작용합니다.
안전 우선 — 피해 범위 (기본적으로 읽기 전용 실행)
Browser QA는 실제 인증 및 실제 사용자 여정을 다루므로 피해 범위를 명시적으로 다룹니다. 기본값은 읽기 전용: 프로덕션 URL에 대해 변경하는 여정(결제, 결제, 삭제, 대량 업데이트)은 절대 실행하지 마십시오. 명시적인 동의 및 스테이징/프리뷰 URL이 필요합니다. 시드된 테스트 자격 증명을 사용하고, 실제 프로덕션 로그인은 절대 사용하지 마십시오. 스크린샷을 저장하기 전에 자격 증명/토큰/PII를 삭제하세요.
1단계: 스모크 테스트
1. 대상 URL로 이동
2. 콘솔 오류 확인 (노이즈 필터링: 분석, 서드파티)
3. 네트워크 요청에서 4xx/5xx가 없는지 확인
4. 데스크톱 + 모바일 뷰포트에서 접힌 부분 위 스크린샷
5. 핵심 웹 바이탈 확인: 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, 실패 없음
- 핵심 웹 바이탈: 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와 함께 사용하세요.