browser-qalisted

# Browser QA — Automated Visual Testing & Interaction ## When to Use - After deploying a feature to staging/preview - When you need to verify UI behavior across pages - Before shipping — confirm layouts, forms, interactions actually work - When reviewing PRs that touch frontend code - Accessibility audits and responsive testing ## How It Works 라이브 페이지를 실제 사용자처럼 조작한다. **Orca 안에서는 Orca 임베디드 브라우저를 쓴다** (`orca-cli` 스킬) — playwright MCP 는 등록하지 않는다. 매핑은 그대로 대응된다: | 필요한 동작 | Orca CLI | |---|---| | 이동 | `orca tab create --url <URL>` · `orca goto --url <URL>` | | 요소 파악 | `orca snapshot` — element ref(`@e1`)를 돌려준다. 셀렉터 대신 이걸 쓴다 | | 조작 | `orca click --element @e1` · `fill --element @e1 --value` · `type` · `select` · `hover` · `keypress` · `scroll` | | 검증 | `orca eval --expression <JS>` · `orca screenshot` · `orca wait` | | 로그인 상태 | `orca tab profile create/set` — 세션 프로필로 유지된다(헤드리스에는 없는 이점) | Orca 브라우저가 실패하면 Playwright 로 넘어간다(아래 Integration 절). ### Phase 1: Smoke Test ``` 1. Navigate to target URL 2. Check for console errors (filter noise: analytics, third-party) 3. Verify no 4xx/5xx in network requests 4. Screenshot above-the-fold on desktop + mobile viewport 5. Check Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms ``` ### Phase 2: Interaction Test ``` 1. Click every nav link — verify no dead links 2. Submit forms with valid data — verify success state 3. Submit forms with invalid data — verify error state 4. Test auth flow: login → protected page → logout 5. Test critical u