Agent skill
playwright
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.
Install this agent skill to your Project
npx add-skill https://github.com/tercumantanumut/selene/tree/main/lib/skills/catalog/bundled/playwright
SKILL.md
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 (set once)
export PWCLI="${SELENE_SKILL_ROOT}/scripts/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.
References
Open only what you need:
- CLI command reference:
${SELENE_SKILL_ROOT}/references/cli.md - Practical workflows and troubleshooting:
${SELENE_SKILL_ROOT}/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 this repo, use
output/playwright/and avoid introducing new top-level artifact folders. - 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.
app-mockup
Create deterministic browser, tablet, laptop, and phone mockups from real screenshots via the local TypeScript renderer in this plugin. Use for marketing visuals, store screenshots, and framed UI previews without ML image generation.
chatgpt-apps
Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine an MCP server and widget UI. Use when Codex needs to design tools, register UI resources, wire the MCP Apps bridge or ChatGPT compatibility APIs, apply Apps SDK metadata or CSP or domain settings, or produce a docs-aligned project scaffold. Prefer a docs-first workflow by invoking the openai-docs skill or OpenAI developer docs MCP tools before generating code.
screenshot
Use when the user explicitly asks for a desktop or system screenshot (full screen, specific app or window, or a pixel region), or when tool-specific capture capabilities are unavailable and an OS-level capture is needed.
security-ownership-map
Analyze git repositories to build a security ownership topology (people-to-file), compute bus factor and sensitive-code ownership, and export CSV/JSON for graph databases and visualization. Trigger only when the user explicitly wants a security-oriented ownership or bus-factor analysis grounded in git history (for example: orphaned sensitive code, security maintainers, CODEOWNERS reality checks for risk, sensitive hotspots, or ownership clusters). Do not trigger for general maintainer lists or non-security ownership questions.
gh-fix-ci
Use when a user asks to debug or fix failing GitHub PR checks that run in GitHub Actions; use `gh` to inspect checks and logs, summarize failure context, draft a fix plan, and implement only after explicit approval. Treat external providers (for example Buildkite) as out of scope and report only the details URL.
speech
Use when the user asks for text-to-speech narration or voiceover, accessibility reads, audio prompts, or batch speech generation via the OpenAI Audio API; run the bundled CLI (`${SELENE_SKILL_ROOT}/scripts/text_to_speech.py`) with built-in voices and require `OPENAI_API_KEY` for live calls. Custom voice creation is out of scope.
Didn't find tool you were looking for?