browser-automation

# Browser Automation

## Overview

Hybrid browser automation using Playwright CLI for simple tasks and templates for complex interactions. Provides efficient automation without MCP server overhead.

## When to Use

**Use this skill when you need to:**
- Take screenshots or generate PDFs
- Test web pages or forms
- Click elements or fill inputs
- Monitor console logs or network requests
- Automate browser interactions

**Don't use when:**
- Simple HTTP requests suffice (use fetch/curl)
- Need persistent browser sessions across conversations

## Hybrid Approach

### CLI-Native (Simple Tasks)
Use Playwright CLI directly for:
- **Screenshot**: `npx playwright screenshot <url> <filename>`
- **PDF**: `npx playwright pdf <url> <filename>`
- **Open browser**: `npx playwright open <url>` (for manual inspection)

### Templates (Complex Interactions)
Use templates (16 total) for tasks requiring state management, event handling, or multi-step logic:

**User Interactions (6)**
- Click element with wait
- Fill form field with validation
- Hover over element
- Drag and drop
- Press keyboard key
- Select dropdown option

**Form Handling (2)**
- Fill multiple fields (bulk)
- Upload file

**Page Monitoring (3)**
- Capture accessibility snapshot
- Get console messages (event listening)
- Get network requests (event listening)

**Advanced (5)**
- Evaluate JavaScript
- Navigate back with wait
- Resize browser window
- Handle dialogs (alert/confirm/prompt)
- Wait for element with timeout

## Quick Start

First time setup:
```bash
npm install -g playwright
npx playwright install chromium
```

### CLI Examples (Simple Tasks)
```bash
# Screenshot
npx playwright screenshot https://example.com ./tmp/playwright/screenshot.png

# PDF
npx playwright pdf https://example.com ./tmp/playwright/page.pdf

# Open browser for manual inspection
npx playwright open https://example.com
```

### Template Examples (Complex Tasks)
```bash
# Click element (requires wait logic)
node $SKILL_DIR/templates/click.j