qa-browser-testinglisted
Install: claude install-skill My-Next-Studio/build-studio
# QA Browser Testing
Browser testing for QA validation using `playwright-cli`. Use this when you need to
verify visual state, check UI behavior, or validate acceptance criteria that require
a running browser.
## When to use browser testing
```
AC requires verification → Can it be tested with unit tests?
├─ Yes (API response, data transform, validation logic) → Write unit test. STOP.
└─ No (requires browser) → Does it need visual verification?
├─ Yes (layout, colors, design match) → Screenshot with playwright-cli
└─ No (click flow, form submit, navigation) → Interact with playwright-cli
```
**Default to unit tests.** Only use browser testing when the acceptance criterion
genuinely requires a browser — visual state, client-side navigation, form interactions,
or cross-layer integration that can't be tested at the API level.
## playwright-cli quick reference
```bash
# Open and navigate
playwright-cli open http://localhost:<port>
playwright-cli goto http://localhost:<port>/other-page
# Viewport control
playwright-cli resize 1440 900 # desktop
playwright-cli resize 390 844 # mobile
# Screenshots
playwright-cli screenshot --filename /tmp/page.png
playwright-cli screenshot --filename /tmp/full.png --full-page
playwright-cli screenshot "button.submit" --filename /tmp/button.png # element
# Interact
playwright-cli click "Submit" # click by text/ref
playwright-cli fill "Email" "test@example.com"
playwright-cli select "Countr