# Playwright

> Browser automation CLI using Playwright. Use when automating browser workflows, filling forms, clicking elements, scraping pages, or debugging web issues.

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

---


# Browser Automation with Playwright

Use the `playwright-cli.ts` script bundled with this skill to automate web interactions and debug browser issues.

Run it with: `tsx .agents/skills/playwright/cli.ts`

## When to Use

- Pages require interaction, authentication, or dynamic content loading (instead of read_web_page)
- Debugging browser automation errors (clicks not working, selectors failing, elements not found)
- Testing interactions before codifying them in source files

## Commands

```bash
tsx .agents/skills/playwright/cli.ts open <url>          # Launch browser and navigate to URL
tsx .agents/skills/playwright/cli.ts exec <code>         # Execute Playwright TypeScript code
tsx .agents/skills/playwright/cli.ts snapshot            # Save full-page PNG + HTML to tmp/playwright-screenshots/
tsx .agents/skills/playwright/cli.ts list                # List open tabs
tsx .agents/skills/playwright/cli.ts close               # Close the browser
```

The exec command provides access to: `page`, `context`, `state`, `browser`, `snapshot`

## Example

```bash
tsx .agents/skills/playwright/cli.ts open https://example.com
tsx .agents/skills/playwright/cli.ts exec "await page.locator('button:has-text(\"Sign in\")').click()"
tsx .agents/skills/playwright/cli.ts exec "await page.fill('input[name=\"email\"]', 'user@example.com')"
tsx .agents/skills/playwright/cli.ts snapshot
tsx .agents/skills/playwright/cli.ts close
```

## Sessions & Profiles

Use `--session <name>` to run multiple isolated browser instances simultaneously.

Use `save <domain>` after logging in to persist cookies/localStorage for automatic reuse:

```bash
tsx .agents/skills/playwright/cli.ts open https://linkedin.com
# ... manually log in ...
tsx .agents/skills/playwright/cli.ts save linkedin.com
# Next time, profile is loaded automatically
```

## Connecting to the Extension Debug Session

Launch the extension in a background tmux session with CDP enabled:

```bash
pnpm debug:extension              # starts in tmux "opencode-debug", CDP on :9222
pnpm debug:extension --stop       # stops the session
```

Then connect Playwright to it:

```bash
tsx .agents/skills/playwright/cli.ts connect http://127.0.0.1:9222 --session extension
tsx .agents/skills/playwright/cli.ts exec "return await page.title()" --session extension
```

## Connecting to Other Browsers

Connect to any browser exposing a CDP endpoint:

```bash
tsx .agents/skills/playwright/cli.ts connect http://127.0.0.1:9222 --session my-session
tsx .agents/skills/playwright/cli.ts exec "return await page.title()" --session my-session
```