Playwright
Automate a real browser from the terminal for navigation, forms, snapshots, and screenshots when debugging UI flows without writing @playwright/test suites first.
Overview
Playwright is an agent skill most often used in Ship testing (also Build frontend, Validate prototype) that drives a real browser from the terminal via playwright-cli and a bundled wrapper script.
Install
npx skills add https://github.com/smithery.ai --skill playwrightWhat is this skill?
- CLI-first automation via bundled playwright_cli wrapper under CODEX_HOME skills path
- Required npx prerequisite check with install steps when Node/npm is missing
- Supports open, snapshot, screenshot, navigation, form filling, and data extraction from the terminal
- Explicitly avoids pivoting to @playwright/test unless the user requests test files
- Headed and headless-style workflows through playwright-cli commands
Adoption & trust: 1 installs on skills.sh; 1/1 security scanners passed (skills.sh audits); trending (+100% hot-view momentum).
What problem does it solve?
You need to reproduce a UI bug or walk a signup flow but writing a full Playwright test project feels heavy for a one-off check.
Who is it for?
Indie devs debugging SaaS flows in Claude Code, Cursor, or Codex with Node/npx available who want fast terminal browser automation.
Skip if: Teams that only want generated @playwright/test spec files in CI without any CLI exploration step.
When should I use this skill?
The task requires automating a real browser from the terminal (navigation, form filling, snapshots, screenshots, data extraction, UI-flow debugging) via playwright-cli or the bundled wrapper script.
What do I get? / Deliverables
You get executable playwright-cli commands—open, snapshot, screenshot, interact—that document the flow and unblock fixes without mandatory @playwright/test scaffolding.
- Executable playwright-cli command sequences
- Browser snapshots or screenshots for repro
- Documented UI flow steps for fixes
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Ship → testing because CLI browser automation is most often invoked to verify flows, capture repros, and debug UI before release. Testing subphase fits terminal-driven snapshots, screenshots, and flow checks that complement formal test runners.
Where it fits
Click through a signup prototype and snapshot the DOM before committing to production routing.
Reproduce a broken checkout button with headed open and screenshot evidence for a fix PR.
Run a quick post-deploy smoke path on staging via playwright-cli without authoring a new test repo.
Replay a customer-reported UI path in a real browser to confirm whether the bug is environment-specific.
How it compares
CLI session skill for live browser control—not the same as installing a Playwright MCP server or a codegen-only test scaffold.
Common Questions / FAQ
Who is playwright for?
Solo and indie web builders who automate browsers from the terminal for debugging, demos, and light validation using playwright-cli.
When should I use playwright?
Use it during Ship testing for flow checks; during Build frontend when verifying interactions; during Validate prototype when clicking through a landing or wizard before full implementation.
Is playwright safe to install?
It runs real browsers and may touch production URLs—review the Security Audits panel on this page and avoid pasting secrets into headed sessions you do not control.
SKILL.md
READMESKILL.md - Playwright
# Playwright CLI Skill Drive a real browser from the terminal using `playwright-cli`. Prefer the bundled wrapper script so the CLI works even when it is not globally installed. Treat this skill as CLI-first automation. Do not pivot to `@playwright/test` unless the user explicitly asks for test files. ## Prerequisite check (required) Before proposing commands, check whether `npx` is available (the wrapper depends on it): ```bash command -v npx >/dev/null 2>&1 ``` If it is not available, pause and ask the user to install Node.js/npm (which provides `npx`). Provide these steps verbatim: ```bash # Verify Node/npm are installed node --version npm --version # If missing, install Node.js/npm, then: npm install -g @playwright/cli@latest playwright-cli --help ``` Once `npx` is present, proceed with the wrapper script. A global install of `playwright-cli` is optional. ## Skill path (set once) ```bash export CODEX_HOME="${CODEX_HOME:-$HOME/.codex}" export PWCLI="$CODEX_HOME/skills/playwright/scripts/playwright_cli.sh" ``` User-scoped skills install under `$CODEX_HOME/skills` (default: `~/.codex/skills`). ## Quick start Use the wrapper script: ```bash "$PWCLI" open https://playwright.dev --headed "$PWCLI" snapshot "$PWCLI" click e15 "$PWCLI" type "Playwright" "$PWCLI" press Enter "$PWCLI" screenshot ``` If the user prefers a global install, this is also valid: ```bash npm install -g @playwright/cli@latest playwright-cli --help ``` ## Core workflow 1. Open the page. 2. Snapshot to get stable element refs. 3. Interact using refs from the latest snapshot. 4. Re-snapshot after navigation or significant DOM changes. 5. Capture artifacts (screenshot, pdf, traces) when useful. Minimal loop: ```bash "$PWCLI" open https://example.com "$PWCLI" snapshot "$PWCLI" click e3 "$PWCLI" snapshot ``` ## When to snapshot again Snapshot again after: - navigation - clicking elements that change the UI substantially - opening/closing modals or menus - tab switches Refs can go stale. When a command fails due to a missing ref, snapshot again. ## Recommended patterns ### Form fill and submit ```bash "$PWCLI" open https://example.com/form "$PWCLI" snapshot "$PWCLI" fill e1 "user@example.com" "$PWCLI" fill e2 "password123" "$PWCLI" click e3 "$PWCLI" snapshot ``` ### Debug a UI flow with traces ```bash "$PWCLI" open https://example.com --headed "$PWCLI" tracing-start # ...interactions... "$PWCLI" tracing-stop ``` ### Multi-tab work ```bash "$PWCLI" tab-new https://example.com "$PWCLI" tab-list "$PWCLI" tab-select 0 "$PWCLI" snapshot ``` ## Wrapper script The wrapper script uses `npx --package @playwright/cli playwright-cli` so the CLI can run without a global install: ```bash "$PWCLI" --help ``` Prefer the wrapper unless the repository already standardizes on a global install. ## References Open only what you need: - CLI command reference: `references/cli.md` - Practical workflows and troubleshooting: `references/workflows.md` ## Guardrails - Always snapshot before referencing element ids like `e12`. - Re-snapshot when refs seem stale. - Prefer explicit commands over `eval` and `run-code` unless needed. - When you do not have a fresh snapshot, use placeholder refs like `eX` and say why; do not bypass refs with `run-code`. - Use `--headed` when a visual check will help. - When capturing artifacts in this repo, use `output/playwright/` and avoid introducing new top-level artifact folders. - Default to CLI commands and workflows, not Playwright test specs.