Browser

Browser Automation Skill

This skill uses pkgx to run tools without global installation:

• Node scripts: pkgx pnpm exec tsx script.ts
• Python scripts: pkgx uv run script.py

This skill provides browser automation using Puppeteer through a simple DSL. You can use it to:

• Test web applications
• Scrape web content
• Automate repetitive browser tasks
• Take screenshots of pages

Installation

First, install dependencies in the skill directory:

cd ~/.claude/skills/browser
pkgx pnpm install

This will install Puppeteer, TypeScript, and tsx.

Then install Chrome for Puppeteer:

npx puppeteer browsers install chrome

This downloads a compatible Chrome version to ~/.cache/puppeteer/.

Usage

Running from Command Line

cd ~/.claude/skills/browser && pkgx pnpm exec tsx scripts/browser.ts "
load https://www.google.com
waitForElement textarea[name=q]
click textarea[name=q]
type hello world
sleep 500
waitForElement input[value=\"Google Search\"]
click input[value=\"Google Search\"]
waitForNewPage google.com/search
screenshot result.png
"

Available Commands

• load <url> - Navigate to a URL
• waitForElement <selector> - Wait for an element to appear (30s timeout)
• click <selector> - Click an element
• type <text> - Type text into the currently focused element
• waitForNewPage <urlPattern> - Wait for navigation to a new page, then verify the URL contains the given pattern (substring match)
• screenshot <filename> - Take a screenshot and save to /tmp/magenta/
• sleep <ms> - Wait for a specified duration in milliseconds
• hover <selector> - Hover over an element
• select <selector> <value> - Select an option from a dropdown
• focus <selector> - Focus an element
• pressKey <key> - Press a keyboard key (e.g., Enter, Escape, Tab)
• getText <selector> - Get and log the text content of an element
• getAttribute <selector> <attribute> - Get and log an element's attribute value
• reload - Reload the current page
• saveContent <filename> - Save page HTML to /tmp/magenta/
• keepOpen - Keep browser open after script completes (useful for debugging)
• eval / endeval - Execute JavaScript code in the page context

  eval
  console.log('Hello from page context');
  return document.title;
  endeval
  

DSL Syntax

• One command per line (except eval blocks)
• Commands use the format: commandName arg1 arg2 ...
• No quotes or parentheses needed - arguments are separated by whitespace
• Multi-line code blocks supported with eval / endeval
• Lines starting with # are treated as comments
• Empty lines are ignored

Examples

Simple commands:

load https://example.com
click button.submit
type Hello World
waitForNewPage example.com/results  # Waits for navigation, then checks URL contains "example.com/results"

Multi-line eval block:

eval
const title = document.querySelector('h1').textContent;
console.log('Title:', title);
return title;
endeval