Playwriter Skill
Control Chrome via the Playwriter CLI using Playwright code snippets executed in a sandboxed Node.js
environment.
Always invoke Playwriter via npx:
npx playwriter@latest <command>
Use @latest for the first session command of a task to pick up the newest version.
Reference Docs
Read the files relevant to your current task. Read setup.md and workflow.md first before any
automation task.
| File |
Read when... |
setup.md |
Starting a new session, Chrome isn't running, or using --direct CDP mode. |
workflow.md |
Required before any task. Core rules, context variables, the observe→act→observe loop, and bash quoting. |
observation.md |
You need to inspect page state: find elements, read text, check for errors, or decide between snapshot/screenshot. |
interaction.md |
You need to click, type, scroll, drag, upload files, or take screenshots. |
navigation.md |
Working with tabs, popups, iframes, dialogs, or managing the page lifecycle. |
obstacles.md |
Clicks aren't working, a modal is blocking the page, or content isn't loading. |
scraping.md |
Extracting data, intercepting network requests, downloading media, or using page.evaluate. |
recording.md |
Recording videos or creating demo videos. |
advanced.md |
Using CDP, debugger, live editor, React source inspection, or pinned elements. |
When to Use Playwriter
- JS-heavy sites (SPAs like Instagram, Twitter, Facebook) — webfetch returns empty shells.
- Cookie consent modals, login walls, age gates — dismiss them before scraping.
- Lazy-loaded content, carousels, infinite scroll — interact to reveal content.
- Authenticated pages — reuse the user's existing Chrome session cookies.
- Visual tasks — screenshots, recordings, demos.
Core Principles
- Use
state.page stored in session state for all operations.
- Observe → Act → Observe: never chain multiple actions blindly.
- Read and verify state with
snapshot() — you can't judge fine visual detail from a screenshot
yourself (observation.md).
- Single-quote
-e to prevent bash from corrupting JS code.
Quick Start
- Get a session (required for all commands):
npx playwriter@latest session new
- Initialize your page (first execute call only):
npx playwriter@latest -s 1 -e 'state.page = context.pages().find((p) => p.url() === "about:blank") ?? (await context.newPage()); await state.page.goto("https://example.com", { waitUntil: "domcontentloaded" })'
- Observe → Act → Observe (see
workflow.md):npx playwriter@latest -s 1 -e 'console.log("URL:", state.page.url()); await snapshot({ page: state.page }).then(console.log)'
1---2name: playwriter3description: Drives the user's running Chrome via the Playwriter CLI. Use when the task needs their browser identity — cookies, logins, open tabs, profile.4---56<!-- Synced from `npx playwriter@latest skill` — playwriter v0.2.0, 2026-06-10. To re-check: `npx playwriter@latest skill > /tmp/playwriter-skill-latest.md` and diff against these files. -->78# Playwriter Skill910Control Chrome via the Playwriter CLI using Playwright code snippets executed in a sandboxed Node.js11environment.1213**Always invoke Playwriter via `npx`:**1415```bash16npx playwriter@latest <command>17```1819Use `@latest` for the first session command of a task to pick up the newest version.2021## Reference Docs2223Read the files relevant to your current task. **Read `setup.md` and `workflow.md` first** before any24automation task.2526| File | Read when... |27| ---------------- | ------------------------------------------------------------------------------------------------------------------ |28| `setup.md` | Starting a new session, Chrome isn't running, or using `--direct` CDP mode. |29| `workflow.md` | **Required before any task.** Core rules, context variables, the observe→act→observe loop, and bash quoting. |30| `observation.md` | You need to inspect page state: find elements, read text, check for errors, or decide between snapshot/screenshot. |31| `interaction.md` | You need to click, type, scroll, drag, upload files, or take screenshots. |32| `navigation.md` | Working with tabs, popups, iframes, dialogs, or managing the page lifecycle. |33| `obstacles.md` | Clicks aren't working, a modal is blocking the page, or content isn't loading. |34| `scraping.md` | Extracting data, intercepting network requests, downloading media, or using `page.evaluate`. |35| `recording.md` | Recording videos or creating demo videos. |36| `advanced.md` | Using CDP, debugger, live editor, React source inspection, or pinned elements. |3738## When to Use Playwriter3940- **JS-heavy sites** (SPAs like Instagram, Twitter, Facebook) — webfetch returns empty shells.41- **Cookie consent modals, login walls, age gates** — dismiss them before scraping.42- **Lazy-loaded content, carousels, infinite scroll** — interact to reveal content.43- **Authenticated pages** — reuse the user's existing Chrome session cookies.44- **Visual tasks** — screenshots, recordings, demos.4546## Core Principles4748- **Use `state.page`** stored in session state for all operations.49- **Observe → Act → Observe**: never chain multiple actions blindly.50- **Read and verify state with `snapshot()`** — you can't judge fine visual detail from a screenshot51 yourself (`observation.md`).52- **Single-quote `-e`** to prevent bash from corrupting JS code.5354## Quick Start55561. **Get a session** (required for all commands):57 ```bash58 npx playwriter@latest session new59 ```602. **Initialize your page** (first execute call only):61 ```bash62 npx playwriter@latest -s 1 -e 'state.page = context.pages().find((p) => p.url() === "about:blank") ?? (await context.newPage()); await state.page.goto("https://example.com", { waitUntil: "domcontentloaded" })'63 ```643. **Observe → Act → Observe** (see `workflow.md`):65 ```bash66 npx playwriter@latest -s 1 -e 'console.log("URL:", state.page.url()); await snapshot({ page: state.page }).then(console.log)'67 ```
mary-ext