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

Get new playbooks like this one

One email a week with new Claude Code workflows. Free, like everything here.

No spam. Unsubscribe anytime.

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

Database Sync Manager

Automate database synchronization, replication, migration, and cross-platform data integration

10 minutes
Advanced
Developer Tools

Developer Presentation Builder

Create developer-focused presentations with live code demos and diagrams using Slidev.

10 minutes
Advanced
Developer Tools

DevOps Automation Assistant

DevOps and IT Ops automation - CI/CD, monitoring, incident management, and infrastructure workflows

10 minutes
Advanced
Developer Tools

Discord Bot Builder

Discord bot development - community management, moderation, notifications, and AI integration

10 minutes
Advanced
Developer Tools

ETL Pipeline Builder

Design and automate Extract, Transform, Load data pipelines for data integration and analytics

10 minutes
Advanced
Developer Tools

Docker Containerization

Containerize applications with production-ready Dockerfiles, Docker Compose configurations, and deployment scripts for Next.js, React, and Node.js projects.

15 minutes
Intermediate
Developer Tools

DevOps Server Manager

Manage servers, Docker containers, VMs, and network infrastructure through Claude Code via SSH. Keep your entire infrastructure documented in markdown files.

15 minutes
Advanced
Developer Tools

Android Restore Credentials

Implement Android's Restore Credentials feature with androidx.credentials — the two-tier background/foreground restoration architecture, the createCredential fallback for devices without end-to-end encryption, sign-in and deletion flows with real Kotlin code, and the backend guidelines a client-side implementation must hand off to the developer, not implement itself.

10 minutes
Intermediate
Developer Tools

Autonomous Skill Optimizer

Evaluate and iteratively improve SKILL.md files with a research-grounded 9-dimension rubric and a critical insight most self-improvement loops miss: absolute LLM-judge scores are too noisy (±8 points on unchanged text) for keep/revert decisions — only a same-judge, same-call paired comparison between two versions cancels that noise out reliably.

15 minutes
Advanced
Developer Tools

Better Web Typography

Web typography engineering as a review discipline, not a style guide — CSS properties over raw variable-font tags, a semantic type scale with descending heading sizes, deliberate text-wrap usage (balance vs. pretty), tabular numbers for changing values, mobile input zoom fixes, and a severity-rated review report format with a concrete common-mistakes table.

5 minutes
Intermediate
Developer Tools

Automated PR Code Review

High-signal automated PR review using parallel agents with a validation pass that filters out false positives before anything gets posted.

10 minutes
Advanced
Developer Tools

Auto Repo Setup

Turn Claude Code into an environment doctor that diagnoses, fixes, and verifies a codebase so non-technical teammates can run it without understanding the stack.

10 minutes
Intermediate

Browse all Developer Tools playbooks →