Garry Tan
d827276a8d
Reorient SKILL.md files from raw command reference to QA-first playbook with 10 workflow patterns (test user flows, verify deployments, dogfood features, responsive layouts, file upload, forms, dialogs, compare pages). Compact command reference tables at the bottom. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
3.9 KiB
name, version, description, allowed-tools
| name | version | description | allowed-tools | ||
|---|---|---|---|---|---|
| browse | 1.1.0 | Fast headless browser for QA testing and site dogfooding. Navigate any URL, interact with elements, verify page state, diff before/after actions, take annotated screenshots, check responsive layouts, test forms and uploads, handle dialogs, and assert element states. ~100ms per command. Use when you need to test a feature, verify a deployment, dogfood a user flow, or file a bug with evidence. |
|
browse: QA Testing & Dogfooding
Persistent headless Chromium. First call auto-starts (~3s), then ~100ms per command. State persists between calls (cookies, tabs, login sessions).
Core QA Patterns
1. Verify a page loads correctly
$B goto https://yourapp.com
$B text # content loads?
$B console # JS errors?
$B network # failed requests?
$B is visible ".main-content" # key elements present?
2. Test a user flow
$B goto https://app.com/login
$B snapshot -i # see all interactive elements
$B fill @e3 "user@test.com"
$B fill @e4 "password"
$B click @e5 # submit
$B snapshot -D # diff: what changed after submit?
$B is visible ".dashboard" # success state present?
3. Verify an action worked
$B snapshot # baseline
$B click @e3 # do something
$B snapshot -D # unified diff shows exactly what changed
4. Visual evidence for bug reports
$B snapshot -i -a -o /tmp/annotated.png # labeled screenshot
$B screenshot /tmp/bug.png # plain screenshot
$B console # error log
5. Find all clickable elements (including non-ARIA)
$B snapshot -C # finds divs with cursor:pointer, onclick, tabindex
$B click @c1 # interact with them
6. Assert element states
$B is visible ".modal"
$B is enabled "#submit-btn"
$B is disabled "#submit-btn"
$B is checked "#agree-checkbox"
$B is editable "#name-field"
$B is focused "#search-input"
$B js "document.body.textContent.includes('Success')"
7. Test responsive layouts
$B responsive /tmp/layout # mobile + tablet + desktop screenshots
$B viewport 375x812 # or set specific viewport
$B screenshot /tmp/mobile.png
8. Test file uploads
$B upload "#file-input" /path/to/file.pdf
$B is visible ".upload-success"
9. Test dialogs
$B dialog-accept "yes" # set up handler
$B click "#delete-button" # trigger dialog
$B dialog # see what appeared
$B snapshot -D # verify deletion happened
10. Compare environments
$B diff https://staging.app.com https://prod.app.com
Snapshot Flags
-i Interactive elements only (buttons, links, inputs)
-c Compact (no empty structural nodes)
-d <N> Limit depth
-s <sel> Scope to CSS selector
-D Diff against previous snapshot
-a Annotated screenshot with ref labels
-o <path> Output path for screenshot
-C Cursor-interactive elements (@c refs)
Combine: $B snapshot -i -a -C -o /tmp/annotated.png
Use @refs after snapshot: $B click @e3, $B fill @e4 "value", $B click @c1
Full Command List
Navigate: goto, back, forward, reload, url Read: text, html, links, forms, accessibility Snapshot: snapshot (with flags above) Interact: click, fill, select, hover, type, press, scroll, wait, wait --networkidle, wait --load, viewport, upload, cookie-import, dialog-accept, dialog-dismiss Inspect: js, eval, css, attrs, is, console, console --errors, network, dialog, cookies, storage, perf Visual: screenshot, pdf, responsive Compare: diff Multi-step: chain (pipe JSON array) Tabs: tabs, tab, newtab, closetab Server: status, stop, restart