browser-automation

ether-moon's avatarfrom ether-moon

Automates browser interactions using Playwright CLI and templates - takes screenshots, generates PDFs, clicks elements, fills forms, monitors console/network. Use when testing web pages, automating browser tasks, or when user mentions screenshots, web testing, form automation, or Playwright

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 22, 2025⬇️1downloads
[Web Automation]

When & Why to Use This Skill

This Claude skill provides a robust framework for browser automation using Playwright CLI and pre-defined templates. It enables users to capture high-quality screenshots, generate PDFs, automate complex form submissions, and monitor network or console activity, making it an essential tool for web developers, QA engineers, and automation specialists looking for efficient, script-based browser control.

Use Cases

  • Automated QA Testing: Execute end-to-end tests on web applications by simulating user clicks, form inputs, and validating page states to ensure software quality.
  • Visual Content Generation: Programmatically generate website screenshots and PDF reports for documentation, archiving, or visual regression monitoring.
  • Web Task Automation: Streamline repetitive browser-based tasks such as filling out multi-step forms, navigating complex UI flows, and interacting with dynamic web elements.
  • Technical Monitoring and Debugging: Capture real-time console logs, network requests, and accessibility snapshots to identify performance bottlenecks or UI accessibility issues.
namebrowser-automation
descriptionAutomates browser interactions using Playwright CLI and templates - takes screenshots, generates PDFs, clicks elements, fills forms, monitors console/network. Use when testing web pages, automating browser tasks, or when user mentions screenshots, web testing, form automation, or Playwright

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:

npm install -g playwright
npx playwright install chromium

CLI Examples (Simple Tasks)

# 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)

# Click element (requires wait logic)
node $SKILL_DIR/templates/click.js https://example.com "button:has-text('Submit')"

# Fill form (multiple fields)
node $SKILL_DIR/templates/fill-form.js https://example.com '{"input[name=email]":"test@example.com"}'

# Monitor console (event listening)
node $SKILL_DIR/templates/console-messages.js https://example.com

Important Guidelines:

  • Prefer CLI first: Use npx playwright for screenshots, PDFs, and simple evaluation
  • Use templates when needed: Complex interactions, event listening, multi-step logic
  • $SKILL_DIR is automatically set to the skill's absolute path by Claude
  • Never use cd before running commands
  • Never write inline Playwright code with node -e or heredocs

Note: Output files are saved to ./tmp/playwright/ in the current project directory by default.

Documentation

  • Complete usage guide: See reference/TEMPLATES.md
  • Template reference: Each template includes usage instructions in file header