Agent skill
playwright-cli
Translate natural-language browser automation requests into exact `playwright-cli` commands for interactive web testing and debugging. Use when requests involve opening/navigating pages, interacting with elements, capturing snapshots/screenshots/PDFs, using tabs, inspecting console/network, mocking routes, managing cookies/storage/state, configuring browser sessions, or controlling named Playwright CLI sessions.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/playwright-cli-ivancampos-agents
SKILL.md
Playwright CLI
Use playwright-cli directly (already installed) to execute browser automation from natural-language requests.
Quick Start
- Verify the CLI is available:
bash
command -v playwright-cli >/dev/null 2>&1 - Open a browser session:
bash
playwright-cli open https://example.com - Capture refs before ref-based commands:
bash
playwright-cli snapshot
Natural-Language Execution Workflow
- Parse the request into atomic actions.
- Convert each action to command templates from
references/command-map.md. - Run
playwright-cli snapshotbefore commands that require element refs (click,fill,check,select,hover,drag, etc.) unless a fresh snapshot is already available. - Re-run
playwright-cli snapshotafter navigation or major DOM changes. - For assertions, prefer
playwright-cli evaland parse the### Resultvalue from stdout. - Treat
### Erroroutput as command failure, even when process exit code is0. - For screenshots, capture PNG first, then compress to JPEG with
ffmpegbefore final save/return. - Use explicit filenames when saving artifacts (screenshots, snapshots, PDFs, videos, storage state).
- Return executed commands and key results (URLs, counts, file paths, errors).
Command Mapping Rules
- Map intent verbs directly:
- open/launch ->
open - navigate ->
goto - click/tap ->
click - double click/double tap ->
dblclick - type/input ->
type - fill/set field ->
fill - back/forward/refresh ->
go-back/go-forward/reload
- open/launch ->
- Preserve user-provided optional flags and values.
- Omit optional args when unspecified.
- Use
-s=<name>when the user asks for a named/session-isolated browser. - Prefer native commands over
evalandrun-code; useevalorrun-codeonly if no first-class command exists. - Keep session names short and filesystem-safe (lowercase letters + numbers, no punctuation, target <= 12 chars) to avoid local socket path errors on macOS.
Reliability Guardrails (Must Follow)
- Do not classify pass/fail from shell exit codes for
evalorrun-code. - Always inspect command output:
- If output contains
### Error, treat as failure. - If output contains
### Result, use that value for assertions.
- If output contains
- Prefer
evalfor boolean checks and DOM assertions. - Use
run-codefor imperative Playwright flows only. run-codeexpects a valid JS expression; statements like barereturn ...orthrow ...are invalid.- For JS snippets passed to
eval, prefer expression-safe patterns:- Good:
Array.from(...).some(function(x){ ... }) - Risky in this CLI context: snippets that are parsed as non-expression wrappers.
- Good:
- When user requests pass and fail screenshots:
- Capture one screenshot per scenario after assertion.
- Capture to temporary PNG, then convert with
ffmpegto JPEG as the final artifact. - Name final files with scenario status prefix, e.g.
pass-<name>.jpg,fail-<name>.jpg. - Save a machine-readable index file (
results.txtor JSON) mapping scenario -> status -> final JPEG artifact path.
Screenshot Compression Rule (Required)
- Always return compressed JPEG screenshots, not raw PNG screenshots.
- Required flow:
- Capture screenshot to temporary PNG path.
- Compress to JPEG with
ffmpeg. - Return/report only the JPEG path.
- Default command pattern:
bash
playwright-cli screenshot --full-page --filename "$TMP_PNG" ffmpeg -y -i "$TMP_PNG" -q:v 4 "$FINAL_JPG" - If
ffmpegis unavailable, stop and report the missing dependency instead of returning an uncompressed PNG.
Session and Artifact Conventions
- Use default session unless the user requests named sessions.
- Keep multi-step flows in one session for continuity.
- Place generated artifacts in predictable paths when the user does not specify:
output/playwright/*.jpgoutput/playwright/*.pdfoutput/playwright/*.jsonoutput/playwright/*.zip
Full Command Coverage
Load references/command-map.md when mapping or validating command usage. It contains the complete command catalog for:
- Core
- Navigation
- Keyboard
- Mouse
- Save as
- Tabs
- Storage (state, cookies, localStorage, sessionStorage)
- Network
- DevTools
- Install
- Configuration
- Sessions
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?