# Playwright

> Use when the task needs real browser automation from the terminal for navigation, form filling, snapshots, screenshots, extraction, or UI-flow debugging; prefer the bundled `scripts/playwright_cli.sh` wrapper over ad-hoc browser code.

- Skill: `hebertzhu/playwright` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add hebertzhu/playwright`
- Raw SKILL.md: https://api.skillmd.com/api/skills/hebertzhu/playwright/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Productivity
- Author: hebertzhu (https://skillmd.com/u/hebertzhu)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/hebertzhu/playwright

---


# Playwright

## Intent
- Use for browser automation, UI flow debugging, reproducible interaction sequences, screenshots, and extraction tasks that need a real page state.

## Default operating pattern
1. Confirm `npx` is available before relying on the wrapper script.
2. Open the target page first, then snapshot before interacting so element references stay grounded in the current DOM.
3. Re-snapshot after navigation or major UI changes; treat stale refs as a sign to refresh context instead of guessing.
4. Prefer explicit CLI actions through the wrapper script instead of jumping straight to custom code.
5. Capture screenshots or other artifacts whenever the user needs evidence, not just a verbal summary.

## Bundled helper
- `scripts/playwright_cli.sh` wraps `@playwright/cli` so the workflow can run without a global install.

## Pack fit
- Included in: `automation-and-testing`
- Best for repeatable browser-driven QA, debugging, and data extraction loops.

## Boundary
- Do not reference stale element ids without taking a fresh snapshot.
- Do not pivot to writing full Playwright test suites unless the user explicitly asks for test files.