How do I install the Playwright skill?

Run npx skillmds@latest add hjw21century/playwright in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Playwright safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: executes scripts, makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Playwright?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Playwright free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Playwright?

hjw21century (@hjw21century) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Playwright by hjw21century — Agent Skill

Name: Playwright
Rating: 4.2 (5 reviews)
Author: hjw21century

File contents

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):

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:

# 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

export PWCLI="$OPENCLAW_SKILL_DIR/playwright_cli.sh"

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, this is also valid:

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

Core workflow

Open the page.
Snapshot to get stable element refs.
Interact using refs from the latest snapshot.
Re-snapshot after navigation or significant DOM changes.
Capture artifacts (screenshot, pdf, traces) when useful.

Minimal loop:

"$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

"$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

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

Multi-tab work

"$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:

"$PWCLI" --help

Prefer the wrapper unless the repository already standardizes on a global install.

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.

---name: playwrightdescription: Use when 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.---# Playwright CLI SkillDrive 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):```bashcommand -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 installednode --versionnpm --version# If missing, install Node.js/npm, then:npm install -g @playwright/cli@latestplaywright-cli --help```Once `npx` is present, proceed with the wrapper script. A global install of `playwright-cli` is optional.## Skill path```bashexport PWCLI="$OPENCLAW_SKILL_DIR/playwright_cli.sh"```## Quick startUse 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:```bashnpm install -g @playwright/cli@latestplaywright-cli --help```## Core workflow1. 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 againSnapshot again after:- navigation- clicking elements that change the UI substantially- opening/closing modals or menus- tab switchesRefs 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 scriptThe 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.## 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.

Frequently asked questions

Playwright