pick
Context
- Current working directory: !
pwd
- Package.json dev script (if exists): !
cat package.json 2>/dev/null | grep -E '"dev":|"start":' | head -2 || echo "No dev/start script"
- Dev host/port hint (from CLAUDE.md, if any): !
grep -rhoE 'https?://[a-zA-Z0-9.-]+:[0-9]+' CLAUDE.md .claude/CLAUDE.md 2>/dev/null | sort -u | head -3 || echo "No CLAUDE.md dev URL hint"
- LISTEN ports (candidate dev servers): !
{ ss -tlnH 2>/dev/null | awk '{print $4}' || lsof -nP -iTCP -sTCP:LISTEN 2>/dev/null | awk 'NR>1{print $9}'; } | grep -oE ':[0-9]+$' | tr -d ':' | sort -un | grep -vE '^(22|53|631)$' | head -10 || echo "none"
- Debuggable browser on :9222 (Chrome OR Edge — both CDP): !
curl -s --max-time 1 http://localhost:9222/json/version 2>/dev/null | grep -oE '"Browser": *"[^"]*"' || echo "nothing on :9222"
Your task
Help the user pick an element from the browser. playwright-cli attaches to
any Chromium browser over CDP (Chrome, Edge, Electron) — there is no native
picker, so we inject a JS overlay and poll for the result.
Every command below runs in the named session -s=pick (the flag goes before
the command), so it never touches the user's other playwright-cli sessions.
Step 0: Preflight
${CLAUDE_PLUGIN_ROOT}/skills/playwright-cli/check.sh
If it fails, stop and relay its message to the user — it says what to install.
Step 1: Get a debuggable browser
Step 1b: Attach + select the tab
Attach to the browser, list its tabs, and select the one showing the app. Tab
selection is explicit and sticky: every later eval hits that tab.
PORT=9222 # or 9223 if you launched fresh
playwright-cli -s=pick close 2>/dev/null # drop a stale pick session, if any
playwright-cli -s=pick attach --cdp=http://localhost:$PORT
playwright-cli -s=pick tab-list # "- 1: (current) [Title](url)"
playwright-cli -s=pick tab-select <n>
playwright-cli -s=pick --raw eval 'location.href + " | " + document.title' # confirm right tab
Step 2: Find the page to pick from
- Prefer the dev URL hint from CLAUDE.md (context above) — it carries the right
host (some apps key locale/routing off the Host header, so
localhost ≠ the
project hostname).
- Else pick the dev server from the LISTEN ports above (ignore system ports).
- If nothing is listening, start the app the way this project starts it: a
run skill for the project if one is available, else whatever CLAUDE.md or
the README prescribes, else the repo's own package manager and dev script.
Background it and wait until its port is LISTEN.
Step 3: Navigate
playwright-cli -s=pick goto "<dev-url>"
playwright-cli -s=pick --raw eval 'location.href + " | " + document.title' # confirm
Step 4: Arm the picker overlay, then poll
Inject the overlay (multi-select via Ctrl/Cmd+click, Enter finishes, single
click resolves one, ESC cancels):
playwright-cli -s=pick --raw eval "$(cat "${CLAUDE_SKILL_DIR}/picker.js")"
The overlay lives in picker.js next to this file: it highlights
whatever the cursor is over, and on click leaves the pick (selector, text,
truncated HTML, attributes) on window.__picked with window.__pickerDone set.
Returns "armed", or "already-armed" if it is on the page already.
Then poll (eval is one-shot, so loop). --raw eval prints the value as JSON,
so returning the object itself gives clean, parseable output:
for i in $(seq 1 120); do
r=$(playwright-cli -s=pick --raw eval 'window.__pickerDone ? window.__picked : null' 2>/dev/null)
[ -n "$r" ] && [ "$r" != "null" ] && { echo "$r"; break; }
sleep 1
done
[ -z "$r" ] || [ "$r" = "null" ] && echo "TIMEOUT: no element picked in 120s"
Use the user's prompt below to tell the user what to click before you start
polling.
Step 5: Return results
- If
cancelled, report the user cancelled.
- For a single pick or each multi entry, show
tag / id / classes / text
and the ready-to-use CSS selector.
- Detach so the user's browser stays up:
playwright-cli -s=pick detach.
User prompt (if any)
$ARGUMENTS