AntiGem 브라우저 QA
개요
AntiGem의 네이티브 browser_mcp(17개 도구)를 위한 통합적이고 토큰 효율적인 브라우저 테스트 스킬입니다. 점진적 공개 방식으로 8가지 테스트 측면을 다룹니다: 탐색적 플로우, 폼/보안, 레이아웃/접근성/시각, PWA/오프라인/i18n, 인페이지 감사 스니펫. 필수 프로토콜: 탭 재사용 → 잠금 → 참조 기반 탐색 → React 안전 입력 → 배치 작업 → 런타임 게이트(콘솔 + 네트워크).
사용 시기
- 웹/PWA 앱의 E2E 테스트 작성 또는 실행
- 탐색적 버그 헌팅(첫 사용자 플로우, 적대적 시퀀스)
- 폼 경계 퍼징, XSS 페이로드, 파일 업로드, 드래그 앤 드롭, 캔버스/WebGL
- WCAG 2.1 AA/AAA 감사, 200% 확대 재배치, CLS, 터치 대상(≥48px/≥60dp)
- 시각적 회귀 기준선 대 빌드 차이 비교, 반응형 중단점
- 서비스 워커 라이프사이클, IndexedDB/Dexie 오프라인 동기화, 인디어 합자/마트라 잘림
- 런타임 콘솔 오류 / 네트워크 실패 제로 톨러런스 게이트
필수 실행 프로토콜
- 탭 재사용:
browser_list_tabs → 기존 탭 재사용 또는 browser_open_url
- 터치/확대 잠금: 멀티 단계 체인 전에
browser_lock(locked=true)
- 참조 기반 탐색:
browser_find(query="...")(권장) 또는 browser_read_page(filter="interactive")로 안정적인 ref_N ID를 가진 ARIA 트리 확보
- React 안전 입력:
<input>, <textarea>, <select>, 체크박스/스위치, 라디오, contenteditable에 대해 browser_form_input(ref, value) 사용
- 신뢰할 수 있는 동작:
browser_computer (left_click, hover, left_click_drag, key, scroll_to, screenshot, zoom [x0,y0,x1,y1], wait); 파일 입력에 browser_upload_file; 알림에 browser_handle_dialog
- 왕복 배칭: 결정론적 멀티 단계 체인에
browser_batch 사용
- 런타임 게이트 (제로 톨러런스): 각 화면 후
browser_get_console_logs(pattern="error|warn") + browser_read_network (탭이 MCP 연결보다 먼저 존재했다면 먼저 새로고침)
- 잠금 해제: 종료 시
browser_lock(locked=false)
8가지 측면 통합 체크리스트
| # | 측면 | 통과/실패 게이트 |
|---|
| 1 | 탐색 및 플로우 | 첫 사용자 시뮬레이션; 다중 경로 탐색; browser.goBack() 모달 우선 순위; 포커스 트랩; 결함 보고서 형식 |
| 2 | 폼 및 컴포넌트 | 경계 퍼징; 숫자 클램핑; 인라인 블러 유효성 검사; 첫 번째 오류로 스크롤; 이중 제출 디바운스; XSS 살균; 파일 업로드; 드래그 앤 드롭; 캔버스/SVG 확인 |
| 3 | 보안 테스트 | CSP 헤더; XSS 페이로드 주입; 권한 거부 대체; 보안 쿠키 플래그 |
| 4 | 레이아웃, 접근성, 시각 | WCAG AA ≥4.5:1 / 햇빛 AAA ≥7.0:1 / 야간 적색 #000000; 200% 확대 재배치; CLS ≤0.1; prefers-reduced-motion; 터치 대상 ≥48px(표준) / ≥64px(지방); 시각적 차이 기준선 대 빌드 |
| 5 | PWA, 오프라인, i18n | 매니페스트 및 SW 라이프사이클; IndexedDB/Dexie ACID + useLiveQuery; 오프라인 시뮬레이션 + 동기화 큐; 인디어 합자/마트라 잘림; document.documentElement.lang; Lakhs/Crores + tabular-nums |
| 6 | 웹 API 및 권한 | navigator.vibrate?.(), 카메라/지리 권한 거부; 하드웨어 API 대체 |
| 7 | 런타임 진단 | 콘솔 오류 빠른 실패; 네트워크 4xx/5xx 빠른 실패; browser_eval_js를 통한 LCP/메모리 감사 |
| 8 | 모바일 및 뷰포트 | browser_set_view_mode 모바일/데스크톱 매트릭스; browser_computer(action="zoom") 미세 검사 |
점진적 참조 라우터 테이블
| 작업 초점 | 참조 로드 |
|---|
| 탐색적 버그 헌팅, 첫 번째 플로우, 모달 포커스, 탐색 | references/01-exploratory-and-flows.md |
| 폼 유효성 검사, 경계 퍼징, 파일 업로드, 드래그 앤 드롭, 캔버스, XSS | references/02-forms-components-security.md |
| WCAG 감사, 대비, 확대 재배치, CLS, 터치 대상, 시각적 차이 | references/03-layout-a11y-visual.md |
| SW 라이프사이클, IndexedDB, 오프라인 동기화, 인디어 타이포그래피, 권한 | references/04-pwa-offline-i18n-apis.md |
| 인페이지 감사 스니펫 (고아 레이블, 경계 상자, 대비, SW, IndexedDB) | references/05-eval-js-audit-snippets.md |
빠른 참조: browser_mcp 도구 매핑
| 업스트림 프리미티브 | AntiGem 도구 |
|---|
page.fill() / selectOption() / check() | browser_form_input(ref, value) |
page.click() / keyboard.press() / hover() / dragAndDrop() | browser_computer(left_click, hover, left_click_drag, key, scroll_to, ...) |
page.setInputFiles() | browser_upload_file |
page.on('dialog') | browser_handle_dialog(accept=true/false) |
page.evaluate() | browser_eval_js (최상위 await, JSON 반환) |
page.on('console') / page.on('pageerror') | browser_get_console_logs(pattern="...") |
page.on('response') / HAR | browser_read_network |
| 멀티 단계 체인 | browser_batch + browser_lock |
| 뷰포트 / 스크린샷 / 확대 | `browser_set_view_mode + browser_computer(screenshot |
일반적인 실수
browser_lock 건너뛰기 → 우발적인 터치/확대로 ref ID 손상- 참조 대신 좌표 사용 → 취약함, 재배치 시 깨짐
- 런타임 게이트 미실행 → 콘솔 오류 / 실패한 요청 놓침
- 모든 참조를 한 번에 로드 → 토큰 부풀림; 라우터 테이블에 따라 필요 시 로드
browser_lock(false) 잊음 → 사용자를 위해 탭 잠금 상태로 둠
실제 영향
browser_find/browser_read_page(filter="interactive")를 통해 전체 DOM 스냅샷 대비 90% 토큰 감소- 단일
browser_eval_js 호출로 전체 화면 감사 실행 (접근성 + 지오메트리 + 대비 + SW + IndexedDB)
- 제로 톨러런스 런타임 게이트가 회귀를 사용자에게 도달하기 전에 포착