Home
cd ../playbooks
Developer ToolsAdvanced

Browser Automation Assistant

Automate web browser interactions, scraping, testing, and workflow automation with Puppeteer/Playwright

10 minutes
By communitySource
#browser#puppeteer#playwright#scraping#testing

You spend 20 minutes every morning clicking through the same web dashboards, copying data into spreadsheets, and filling out the same forms. It's tedious, error-prone, and you know a script could do it — if only writing Playwright code weren't its own headache.

Who it's for: developers automating repetitive web tasks, QA engineers writing browser tests, data analysts scraping web dashboards, operations teams automating form submissions, growth hackers building scrapers

Example

"Scrape product prices from these 5 competitor websites daily" → Puppeteer/Playwright scripts that navigate each site, extract pricing data, handle pagination, and export results to a CSV — running on schedule

CLAUDE.md Template

New here? 3-minute setup guide → | Already set up? Copy the template below.

# Browser Automation

Automate web browser interactions for scraping, testing, and workflow automation.

## Core Capabilities

### Navigation
```yaml
navigation:
  goto:
    url: "https://example.com"
    wait_until: "networkidle"
    timeout: 30000
    
  actions:
    - wait_for_selector: ".content"
    - scroll_to_bottom: true
    - wait_for_navigation: true
```

### Element Interaction
```yaml
interactions:
  click:
    selector: "button.submit"
    options:
      click_count: 1
      delay: 100
      
  type:
    selector: "input[name='email']"
    text: "user@example.com"
    options:
      delay: 50  # Human-like typing
      
  select:
    selector: "select#country"
    value: "US"
    
  file_upload:
    selector: "input[type='file']"
    files: ["document.pdf"]
```

### Data Extraction
```yaml
scraping:
  extract_text:
    selector: ".article-content"
    
  extract_all:
    selector: ".product-card"
    fields:
      name: ".product-name"
      price: ".price"
      url:
        selector: "a"
        attribute: "href"
        
  extract_table:
    selector: "table.data"
    output: json
```

### Screenshots & PDF
```yaml
capture:
  screenshot:
    path: "screenshot.png"
    full_page: true
    type: "png"
    
  pdf:
    path: "page.pdf"
    format: "A4"
    print_background: true
```

## Workflow Examples

### Form Automation
```javascript
// Login and fill form
await page.goto('https://app.example.com/login');
await page.fill('#email', 'user@example.com');
await page.fill('#password', 'securepass');
await page.click('button[type="submit"]');
await page.waitForNavigation();

// Navigate to form
await page.click('a[href="/new-entry"]');
await page.fill('#title', 'Automated Entry');
await page.fill('#description', 'Created via automation');
await page.click('button.submit');
```

### Web Scraping
```yaml
scraping_workflow:
  - navigate: "https://news.example.com"
  - wait: ".article-list"
  - extract_all:
      selector: ".article"
      fields:
        title: "h2"
        summary: ".excerpt"
        link:
          selector: "a"
          attribute: "href"
  - paginate:
      next_button: ".pagination .next"
      max_pages: 10
  - output: "articles.json"
```

### E2E Testing
```yaml
test_workflow:
  - name: "User Registration"
    steps:
      - goto: "/register"
      - fill:
          "#email": "test@example.com"
          "#password": "Test123!"
      - click: "button[type='submit']"
      - assert:
          selector: ".success-message"
          text_contains: "Welcome"
```

## Best Practices

1. **Wait Strategies**: Use proper waits
2. **Error Handling**: Catch navigation failures
3. **Rate Limiting**: Be respectful to servers
4. **Headless Mode**: Use for production
5. **Selectors**: Prefer data-testid attributes
6. **Screenshots**: Capture on failures
README.md

What This Does

Automate web browser interactions for scraping, testing, and workflow automation.


Quick Start

Step 1: Create a Project Folder

mkdir -p ~/Documents/BrowserAutomation

Step 2: Download the Template

Click Download above, then:

mv ~/Downloads/CLAUDE.md ~/Documents/BrowserAutomation/

Step 3: Start Working

cd ~/Documents/BrowserAutomation
claude

Best Practices

  1. Wait Strategies: Use proper waits
  2. Error Handling: Catch navigation failures
  3. Rate Limiting: Be respectful to servers
  4. Headless Mode: Use for production
  5. Selectors: Prefer data-testid attributes
  6. Screenshots: Capture on failures

$Related Playbooks

Developer Tools

Changelog Generator

Generate release notes from git commits, updates, or feature lists

10 minutes
Advanced
Developer Tools

Claude Model Migration Assistant

Migrate code and prompts between Claude models — update model strings, remove incompatible beta headers, and adjust prompts only for reported behavioral differences.

5 minutes
Beginner
Developer Tools

Claude Code Plugin Builder

End-to-end guided workflow for building Claude Code plugins — structure, commands, agents, skills, hooks, and MCP integration — with a validation checklist before you distribute.

15 minutes
Advanced
Developer Tools

CLAUDE.md Progressive Disclosurer

Slim down and restructure a bloated CLAUDE.md (or AGENTS.md) using progressive disclosure — move low-frequency detail to Level 2 references while keeping Level 1 lean, with zero information loss.

15 minutes
Intermediate
Developer Tools

Claude Usage Analyst

Analyze Claude Code token usage, cost, quota burn, model mix, and cache read/write using ccusage evidence — and explain in human terms why your quota got exhausted.

10 minutes
Beginner
Developer Tools

CLI Demo Generator

Generate professional animated CLI demos as GIFs using VHS terminal recordings — with self-bootstrapping setup, output filtering, and frame-level verification.

15 minutes
Intermediate
Developer Tools

Cloudflare Troubleshooting

Investigate and resolve Cloudflare issues with API-driven evidence — ERR_TOO_MANY_REDIRECTS, SSL mode mismatches, DNS, and proxy problems — instead of guessing.

15 minutes
Intermediate
Developer Tools

CI/CD Pipeline Generator

Create production-ready CI/CD pipeline configurations for GitHub Actions, GitLab CI, CircleCI, and Jenkins with deployment to Vercel, Netlify, or AWS.

15 minutes
Intermediate
Developer Tools

Codebase Documenter

Create comprehensive, beginner-friendly documentation for codebases including READMEs, architecture guides, API docs, and code comments.

10 minutes
Beginner
Developer Tools

Distinctive Frontend Design

Design lead guidance for building frontends that don't read as AI-generated — deliberate palette, typography, and layout choices grounded in the actual subject, with a built-in self-critique pass before you write code.

5 minutes
Intermediate
Developer Tools

Continue Claude Work

Recover actionable context from local .claude session artifacts and continue interrupted work — without running claude --resume — by inspecting history first.

10 minutes
Intermediate
Developer Tools

Composio SDK with Claude Code: Connect 250+ APIs in Minutes

Connect Claude Code to 250+ APIs using Composio SDK. Build AI agents that send emails, create GitHub issues, and post to Slack — not just generate text.

15 minutes
Advanced

Browse all Developer Tools playbooks →