domains / software-engineering / browser-automation / playwright
The copies describe three different Playwright automation procedures. The first two are identical and drive a real browser via a terminal CLI wrapper (playwright-cli) with snapshot-based element refs. The third writes custom Playwright JavaScript to /tmp and executes it via a local run.js, with dev-server detection. The fourth is a general Playwright/MCP/scraper guide focused on selectors, scraping, and MCP server setup. Crowning one would hide the CLI-first, script-execution, and MCP/scraping alternatives.
| Repository | Path |
|---|---|
| openai/skills | skills/.curated/playwright/SKILL.md |
| foryourhealth111-pixel/Vibe-Skills | bundled/skills/playwright/SKILL.md |
| sickn33/agentic-awesome-skills | plugins/agentic-awesome-skills-claude/skills/playwright-skill/SKILL.md |
| LeoYeAI/openclaw-master-skills | skills/playwright/SKILL.md |
| Role | Repository | Path |
|---|---|---|
| peer | openai/skills | skills/.curated/playwright/SKILL.md |
| peer | foryourhealth111-pixel/Vibe-Skills | bundled/skills/playwright/SKILL.md |
| peer | sickn33/agentic-awesome-skills | plugins/agentic-awesome-skills-claude/skills/playwright-skill/SKILL.md |
| peer | LeoYeAI/openclaw-master-skills | skills/playwright/SKILL.md |
| adapter | sickn33/agentic-awesome-skills | plugins/agentic-awesome-skills/skills/playwright-skill/SKILL.md |
| adapter | sickn33/agentic-awesome-skills | plugins/agentic-bundle-aas-accessibility-inclusive-ux/skills/playwright-skill/SKILL.md |
| adapter | sickn33/agentic-awesome-skills | plugins/agentic-bundle-aas-qa-test-automation/skills/playwright-skill/SKILL.md |
| adapter | sickn33/agentic-awesome-skills | skills/playwright-skill/SKILL.md |
# Playwright Browser Automation
Choose the approach that matches the task and environment.
## Approach A: CLI-first automation (playwright-cli)
Use when the task requires terminal-driven browser automation with stable element refs.
1. Check for npx: `command -v npx >/dev/null 2>&1`. If missing, install Node.js/npm.
2. Set the wrapper path: `export PWCLI="$CODEX_HOME/skills/playwright/scripts/playwright_cli.sh"`.
3. Open the page: `"$PWCLI" open <url> --headed`.
4. Snapshot to get element refs: `"$PWCLI" snapshot`.
5. Interact using refs from the latest snapshot (click, fill, type, press).
6. Re-snapshot after navigation, modals, or significant DOM changes.
7. Capture artifacts (screenshot, pdf, traces) when useful.
## Approach B: Custom Playwright scripts
Use when the task requires custom logic, multi-viewport testing, or complex flows.
1. Detect dev servers for localhost testing: `cd $SKILL_DIR && node -e "require('./lib/helpers').detectDevServers().then(s => console.log(JSON.stringify(s)))"`.
2. Write the script to `/tmp/playwright-test-*.js` with parameterized URLs.
3. Use `headless: false` by default for visible debugging.
4. Execute via: `cd $SKILL_DIR && node run.js /tmp/playwright-test-*.js`.
5. Clean up temporary files.
## Approach C: General Playwright/MCP/Scraping
Use for scraping, E2E testing, or MCP integration.
1. Prefer role selectors (`getByRole`) over CSS selectors.
2. Never use `waitForTimeout()`; wait for specific conditions.
3. Always close the browser to prevent memory leaks.
4. Use `storageState` to persist auth sessions.
5. For MCP, install `@playwright/mcp` and use the provided tools.
## Conflicts
- openai/skills and foryourhealth111-pixel/Vibe-Skills mandate CLI-first automation with snapshot refs.
- sickn33/agentic-awesome-skills mandates custom JS scripts executed via run.js.
- LeoYeAI/openclaw-master-skills mandates a general Playwright/MCP approach with selector priority.