browse: QA Testing & Dogfooding

Adapted from garrytan/gstack for Codex.

Persistent headless Chromium. First call auto-starts (~3s), then ~100ms per command. State persists between calls (cookies, tabs, login sessions).

Setup

Find the local browse binary:

B=$(codex/skills/browse/bin/find-browse 2>/dev/null || ~/.codex/skills/browse/bin/find-browse 2>/dev/null)
if [ -z "$B" ]; then
  echo "NEEDS_SETUP"
  exit 1
fi
echo "$B"

If NEEDS_SETUP, build it once:

cd codex/skills/browse 2>/dev/null || cd ~/.codex/skills/browse
./setup

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