browser-qa

Browser QA — 자동 시각 테스트 및 상호작용 검증

사용 시점

• 기능을 staging/preview에 배포한 뒤
• 여러 페이지에서 UI 동작을 검증해야 할 때
• 배포 전에 레이아웃, 폼, 상호작용이 실제로 동작하는지 확인할 때
• 프론트엔드 코드 변경이 포함된 PR을 검토할 때
• 접근성 감사와 반응형 테스트를 할 때

동작 방식

브라우저 자동화 MCP(claude-in-chrome, Playwright, Puppeteer)를 사용해 실제 사용자처럼 라이브 페이지와 상호작용합니다.

1단계: 스모크 테스트

1. 대상 URL로 이동
2. 콘솔 오류 확인(분석 도구, 서드파티 노이즈는 걸러냄)
3. 네트워크 요청에 4xx/5xx가 없는지 확인
4. 데스크톱 + 모바일 뷰포트에서 첫 화면 스크린샷
5. Core Web Vitals 확인: LCP < 2.5s, CLS < 0.1, INP < 200ms

2단계: 상호작용 테스트

1. 모든 내비게이션 링크 클릭 — 죽은 링크 없는지 확인
2. 유효한 데이터로 폼 제출 — 성공 상태 확인
3. 잘못된 데이터로 폼 제출 — 오류 상태 확인
4. 인증 흐름 테스트: 로그인 → 보호 페이지 → 로그아웃
5. 핵심 사용자 여정 테스트(결제, 온보딩, 검색)

3단계: 시각 회귀

1. 주요 페이지를 3개 브레이크포인트(375px, 768px, 1440px)에서 캡처
2. 저장된 기준 스크린샷과 비교
3. 5px 초과 레이아웃 이동, 누락 요소, overflow 표시
4. 해당 시 다크 모드 확인

4단계: 접근성

1. 각 페이지에 axe-core 또는 동등 도구 실행
2. WCAG AA 위반(대비, 레이블, 포커스 순서) 표시
3. 키보드 내비게이션이 처음부터 끝까지 동작하는지 확인
4. 스크린 리더 랜드마크 점검

출력 형식

## QA Report — [URL] — [timestamp]

### Smoke Test
- Console errors: 치명적 0개, 경고 2개(분석 도구 노이즈)
- Network: 모두 200/304, 실패 없음
- Core Web Vitals: LCP 1.2s ✓, CLS 0.02 ✓, INP 89ms ✓

### Interactions
- [✓] Nav links: 12/12 working
- [✗] Contact form: 잘못된 이메일에 대한 오류 상태 없음
- [✓] Auth flow: login/logout working

### Visual
- [✗] 375px 뷰포트에서 Hero 섹션 overflow
- [✓] Dark mode: 모든 페이지 일관성 유지

### Accessibility
- AA 위반 2건: Hero 이미지 alt 없음, footer 링크 대비 부족

### Verdict: SHIP WITH FIXES (이슈 2건, blocker 0건)

연동

모든 브라우저 MCP와 함께 사용할 수 있습니다.

• mChild__claude-in-chrome__* 도구
• mcp__browserbase__* 기반 Playwright
• 직접 작성한 Puppeteer 스크립트

배포 후 모니터링에는 /canary-watch와 함께 쓰는 것이 좋습니다.