Playwright

Skill wachawo/claude-skills/skills/playwright

Claude Skills for software engineers and developers

Install

npx -y skills add wachawo/claude-skills --skill playwright

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use when the task requires automating a real browser from the terminal (navigation, form filling, snapshots, screenshots, data extraction, debugging user scenarios) via `playwright-cli` or the bundled wrapper script.

SKILL.md

3.8 KB, as published. Nobody here has run it

Playwright CLI Skill

Drive a real browser from the terminal with playwright-cli. Prefer the bundled wrapper script so the CLI works even without a global install. Treat this skill as CLI-first automation. Do not switch to @playwright/test unless the user explicitly asks for test files.

Prerequisite check (mandatory)

Before suggesting commands, check whether npx is available (the wrapper depends on it):

command -v npx >/dev/null 2>&1

If it is not available, stop and ask the user to install Node.js/npm (which provide npx). Give them these steps verbatim:

# 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 available, switch to the wrapper script. A global playwright-cli install is optional.

Skill path (set once)

export CODEX_HOME="${CODEX_HOME:-$HOME/.codex}"
export PWCLI="$CODEX_HOME/skills/playwright/scripts/playwright_cli.sh"

User skills are installed under $CODEX_HOME/skills (default: ~/.codex/skills).

Quick start

Use the wrapper script:

"$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, that is also fine:

npm install -g @playwright/cli@latest
playwright-cli --help

Core workflow

Open the page.
Take a snapshot to get stable element references.
Interact using the references from the latest snapshot.
Take a fresh snapshot after navigation or significant DOM changes.
Save artifacts (screenshot, pdf, traces) when useful.

Minimal cycle:

"$PWCLI" open https://example.com
"$PWCLI" snapshot
"$PWCLI" click e3
"$PWCLI" snapshot

When to re-snapshot

Take a new snapshot after:

navigation
clicking elements that change the UI substantially
opening/closing modals or menus
switching tabs

References can go stale. If a command fails due to a missing reference, take a new snapshot.

Recommended patterns

Filling and submitting a form

"$PWCLI" open https://example.com/form
"$PWCLI" snapshot
"$PWCLI" fill e1 "[email protected]"
"$PWCLI" fill e2 "password123"
"$PWCLI" click e3
"$PWCLI" snapshot

Debugging a user scenario with traces

"$PWCLI" open https://example.com --headed
"$PWCLI" tracing-start
# ...interactions...
"$PWCLI" tracing-stop

Working with multiple tabs

"$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 runs without a global install:

"$PWCLI" --help

Prefer the wrapper unless the repository has already standardized on a global install.

Reference material

Open only what you need:

CLI command reference: references/cli.md
Practical scenarios and troubleshooting: references/workflows.md

Guardrails

Always take a snapshot before using identifiers like e12.
Take a new snapshot whenever references look stale.
Prefer explicit commands over eval and run-code unless necessary.
If you don't have a fresh snapshot, use placeholder references like eX and explain why; don't bypass references with run-code.
Use --headed when visual verification helps.
When saving artifacts in this repository, use output/playwright/ and don't create new top-level artifact folders.
Default to CLI commands and scripts, not Playwright test specs.

Gives 1 of the 12 instructions most e2e browser skills give

Counted across 407 of the 410 authors here whose files we hold, read 2026-08-06

use page object model patternin 35 of 407, across 25 files
Snapshot to get element refsin 24 of 407, across 14 files
keep tests independentin 23 of 407, across 18 files
Interact using refs from the latest snapshotin 23 of 407, across 11 files
clean up test data after each testin 21 of 407, across 15 files
test user behavior not implementationin 20 of 407, across 14 files
quarantine flaky tests explicitlyin 19 of 407, across 10 files
wait for specific network conditionsin 18 of 407, across 8 files
re-snapshot after navigation or dom changeshere, and in 17 of 407, across 10 files
Detect running dev servers before writing test codein 17 of 407, across 7 files
use web-first assertionsin 17 of 407, across 14 files
capture screenshots or videos on test failurein 17 of 407, across 14 files

Said here and by no other author read

stop and request node if npx is missing
open the target page first
take a new snapshot if references are stale
default to CLI commands over test specs

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once.