brianlovin/claude-config/playwriter

Playwriter

Use this skill to drive the user's active Chrome tab via Playwriter.

Full documentation is available here: https://playwriter.dev/

Quick Start

1. Ensure the Playwriter extension is enabled (green) on the target tab.
2. Ensure CLI is available:

playwriter --version || npx -y playwriter --version

1. Create/attach a session:

playwriter session new

1. Run commands against that session:

playwriter -s 1 -e "console.log(await page.url())"

Core Workflow

1. Confirm connection and correct tab:

playwriter -s <session> -e "console.log(await page.url()); console.log(await page.title());"

1. Collect page structure when needed:

playwriter -s <session> -e "console.log(await accessibilitySnapshot({ page }))"

1. Execute targeted actions (click/type/hover/fetch/evaluate).
2. Pull logs and structured state via page.evaluate.
3. Summarize findings with exact IDs, timestamps, and observed state transitions.

Useful Commands

Get list rows/options from current app UI:

playwriter -s <session> -e "const rows = await page.getByRole('option').all(); console.log(rows.length);"

Read popup/hover content:

playwriter -s <session> -e "const row = page.getByRole('option').nth(0); await row.hover(); await page.waitForTimeout(700); console.log(await page.locator('[data-side]').first().innerText());"

Run arbitrary in-page debug code:

playwriter -s <session> -e "const out = await page.evaluate(() => ({ href: location.href })); console.log(out);"

Troubleshooting

• If the session attaches to the wrong tab, click the extension icon on the intended tab and re-run playwriter session new.
• If playwriter command is missing, use npx -y playwriter ... or install globally.
• If execution errors suggest stale connection, create a fresh session.

Guardrails

• Prefer read-only inspection unless the task requires mutation.
• Announce destructive UI actions before running them.
• When capturing logs, redact sensitive tokens/user data in summaries.