Agent skill
playwright
Install this agent skill to your Project
npx add-skill https://github.com/6BNBN/FlowPilot/tree/main/兼容codex@cursor一键安装技能/cursor一键安装技能/纯手动安装/skills/playwright
SKILL.md
name: "playwright"
description: "Use when the task requires automating a real browser from the terminal in Cursor, including navigation, form filling, snapshots, screenshots, data extraction, and UI-flow debugging via playwright-cli or the bundled wrapper scripts."
Playwright CLI Skill
Drive a real browser from the terminal using playwright-cli. In Cursor, prefer the bundled wrapper scripts so the CLI can run 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
Before proposing commands, verify that node, npm, and npx are available.
PowerShell:
node --version
npm --version
npx --version
Bash:
node --version
npm --version
npx --version
If they are missing, pause and ask the user to install Node.js first. A global install of playwright-cli is optional; the bundled wrappers use npx.
Skill path in Cursor
When this skill is installed as a Cursor personal skill, it lives under ~/.cursor/skills/playwright/.
Windows PowerShell:
$PWCLI = Join-Path $env:USERPROFILE ".cursor\skills\playwright\scripts\playwright_cli.cmd"
Bash:
export PWCLI="$HOME/.cursor/skills/playwright/scripts/playwright_cli.sh"
Prefer the Windows .cmd wrapper on Windows and the .sh wrapper on bash-compatible shells.
Quick start
Windows PowerShell:
& $PWCLI open https://playwright.dev --headed
& $PWCLI snapshot
& $PWCLI click e15
& $PWCLI type "Playwright"
& $PWCLI press Enter
& $PWCLI screenshot
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:
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 such as screenshots, PDFs, or 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 or 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 scripts
The wrapper scripts use npx --package @playwright/cli playwright-cli so the CLI can run without a global install.
Windows PowerShell:
& $PWCLI --help
Bash:
"$PWCLI" --help
Prefer the bundled wrappers 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
evalandrun-codeunless needed. - When you do not have a fresh snapshot, use placeholder refs like
eXand say why; do not bypass refs withrun-code. - Use
--headedwhen a visual check will help. - When capturing artifacts in a repo, prefer
output/playwright/and avoid introducing new top-level artifact folders unless the project already uses a different convention. - Default to CLI commands and workflows, not Playwright test specs.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
test-driven-development
Use when implementing any feature or bugfix, before writing implementation code
using-superpowers
Use when starting any conversation to discover relevant skills and open the right SKILL.md files before responding, including before clarifying questions.
ui-ux-pro-max
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
requesting-code-review
Use when completing tasks, implementing major features, or before merging to verify work meets requirements.
superpowers
Use when starting any conversation to discover relevant skills and open the right SKILL.md files before responding, including before clarifying questions.
Didn't find tool you were looking for?