browser-automation

hippocampus-dev's avatarfrom hippocampus-dev

Browser automation toolkit using Playwright. Supports interacting with web applications, form filling, capturing screenshots, viewing browser logs, and running automated tests. Use when automating browser tasks, testing web UI, or scraping web pages.

⭐1stars🔀0forks📁View on GitHub🕐Updated Jan 4, 2026
[Web Automation]

When & Why to Use This Skill

This Claude skill provides a comprehensive browser automation toolkit powered by Playwright, designed to streamline web interactions and testing. It enables users to automate complex browser tasks, perform end-to-end (E2E) testing, and scrape data from dynamic web pages with advanced features like server lifecycle management, screenshot capture, and console log monitoring.

Use Cases

  • Automated E2E Testing: Create and execute TypeScript-based Playwright scripts to verify web application functionality, ensuring UI consistency and reliability across different environments.
  • Dynamic Web Scraping: Efficiently extract data from modern, JavaScript-heavy websites by waiting for network idle states and inspecting the DOM for specific selectors.
  • Workflow Automation: Automate repetitive manual browser processes such as filling out multi-step forms, navigating complex portals, or performing routine web-based administrative tasks.
  • UI Debugging and Visual Regression: Capture screenshots and monitor browser console logs during automated runs to identify frontend errors, layout shifts, or performance bottlenecks.
namebrowser-automation
descriptionBrowser automation toolkit using Playwright. Supports interacting with web applications, form filling, capturing screenshots, viewing browser logs, and running automated tests. Use when automating browser tasks, testing web UI, or scraping web pages.
keywordsplaywright, browser, ブラウザ, 自動化, スクレイピング, e2e, screenshot, スクリーンショット, scraping
  • Write @playwright/test scripts in TypeScript, run with npx playwright test
  • Use scripts/with-server.mjs --help to manage server lifecycle
  • Wait for networkidle before inspecting DOM on dynamic apps

Quick Start

  • npx playwright install chromium - Install browser (one-time)
  • npx playwright test your-test.spec.ts - Run a test

Approach

  • Static HTML → Read file directly to identify selectors, then write test
  • Dynamic app (server not running) → Use with-server.mjs to start server, then test
  • Dynamic app (server running) → Navigate, wait for networkidle, inspect, then act

Basic Test Structure

import {test, expect, type Page} from "@playwright/test";

test("verify homepage loads", async ({page}: {page: Page}) => {
    await page.goto("http://localhost:5173");
    await page.waitForLoadState("networkidle");
    await expect(page.locator("h1")).toBeVisible();
});

Using with-server.mjs

# Single server
node scripts/with-server.mjs --server "npm run dev" --port 5173 -- npx playwright test

# Multiple servers
node scripts/with-server.mjs \
  --server "cd backend && python server.py" --port 3000 \
  --server "cd frontend && npm run dev" --port 5173 \
  -- npx playwright test

Best Practices

  • Use expect() for assertions instead of manual checks
  • Browser cleanup is automatic with @playwright/test
  • Use descriptive selectors: text=, role=, CSS selectors, or IDs
  • Add waits: page.waitForSelector() or expect().toBeVisible()

Reference Files

  • examples/element-discovery.spec.ts - Discovering buttons, links, inputs
  • examples/static-html-automation.spec.ts - Using file:// URLs
  • examples/console-logging.spec.ts - Capturing console logs