mirror of
https://github.com/garrytan/gstack.git
synced 2026-05-17 17:51:27 +08:00
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>
129 lines
3.9 KiB
Markdown
129 lines
3.9 KiB
Markdown
---
|
|
name: browse
|
|
version: 1.1.0
|
|
description: |
|
|
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.
|
|
allowed-tools:
|
|
- Bash
|
|
- Read
|
|
|
|
---
|
|
|
|
# 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
|
|
```bash
|
|
$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
|
|
```bash
|
|
$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
|
|
```bash
|
|
$B snapshot # baseline
|
|
$B click @e3 # do something
|
|
$B snapshot -D # unified diff shows exactly what changed
|
|
```
|
|
|
|
### 4. Visual evidence for bug reports
|
|
```bash
|
|
$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)
|
|
```bash
|
|
$B snapshot -C # finds divs with cursor:pointer, onclick, tabindex
|
|
$B click @c1 # interact with them
|
|
```
|
|
|
|
### 6. Assert element states
|
|
```bash
|
|
$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
|
|
```bash
|
|
$B responsive /tmp/layout # mobile + tablet + desktop screenshots
|
|
$B viewport 375x812 # or set specific viewport
|
|
$B screenshot /tmp/mobile.png
|
|
```
|
|
|
|
### 8. Test file uploads
|
|
```bash
|
|
$B upload "#file-input" /path/to/file.pdf
|
|
$B is visible ".upload-success"
|
|
```
|
|
|
|
### 9. Test dialogs
|
|
```bash
|
|
$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
|
|
```bash
|
|
$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
|