mcpField
P
playwriter

playwriter

github.com/brianlovinTesting & quality3792.7k installsUpdated 31w ago
Repository

About playwriter

A skill for using Playwriter to inspect and control the user's active Chrome tab. It supports session attachment, page inspection, targeted interactions, and retrieval of logs and page state.

Key features

  1. 01Attach to an active Chrome tab
  2. 02Inspect page structure and content
  3. 03Perform targeted page actions
  4. 04Read logs and structured page state
  5. 05Troubleshoot stale or incorrect sessions

Use cases

  1. 01Inspecting the current page during testing
  2. 02Collecting UI options and hover content
  3. 03Debugging page behavior and state changes

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/brianlovin/agent-config --skill playwriter

After installing, type/playwriterin Claude Code to confirm it loaded.

Bundled filesagents/openai.yaml

Details

From the project README

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.

Comments

Markdown supported