browser-tools

lttr's avatarfrom lttr

Use this skill when the user asks to test, verify, interact with, or automate web pages and browsers. Trigger for requests involving Chrome automation, browser testing, web scraping, screenshot capture, element selection, or checking web applications. Also trigger when user mentions "browser tools" explicitly.

⭐1stars🔀0forks📁View on GitHub🕐Updated Dec 15, 2025
[Web Automation]

When & Why to Use This Skill

This Claude skill enables comprehensive web automation and browser interaction through the Chrome DevTools Protocol. It allows agents to perform end-to-end web testing, dynamic web scraping, and real-time debugging by providing tools for navigation, JavaScript execution, screenshot capture, and DOM element selection. It is designed to bridge the gap between AI reasoning and live web environments, facilitating complex workflows like automated QA and session management.

Use Cases

  • Automated QA & Testing: Verify web application functionality, UI components, and responsiveness by navigating through user flows and checking page states.
  • Dynamic Web Scraping: Extract data from modern, JavaScript-heavy websites that require full browser rendering and interaction to reveal content.
  • Visual Regression & Debugging: Capture high-resolution screenshots and monitor browser console logs to identify and resolve front-end errors or layout shifts.
  • Authentication & Session Analysis: Debug complex login sequences and manage browser cookies to troubleshoot authentication issues or state persistence.
  • Interactive Element Mapping: Use the visual element picker to accurately identify CSS selectors and HTML structures for building robust automation scripts.
namebrowser-tools
descriptionUse this skill when the user asks to test, verify, interact with, or automate web pages and browsers. Trigger for requests involving Chrome automation, browser testing, web scraping, screenshot capture, element selection, or checking web applications. Also trigger when user mentions "browser tools" explicitly.
allowed-toolsBash(browser-start:*), Bash(browser-nav:*), Bash(browser-eval:*), Bash(browser-screenshot:*), Bash(browser-pick:*), Bash(browser-cookies:*), Bash(browser-console:*), Read, Read(/tmp/screenshot*), Glob

Browser Tools

Chrome DevTools Protocol automation for agent-assisted web testing and interaction. Uses Chrome running on :9222 with remote debugging.

Prerequisites

Run /browser-tools:setup once after plugin installation - This installs dependencies and creates global symlinks for all browser scripts.

Usage

When user asks to test, verify, or interact with web pages using browser tools:

  1. Start Chrome - Launch with debugging enabled
  2. Navigate & interact - Use scripts to navigate, evaluate JS, take screenshots
  3. Return results - Show output/screenshots to user

IMPORTANT: Use command names directly (e.g., browser-start), NOT full paths (e.g., ~/bin/browser-start). Commands are in PATH after setup.

Available Scripts

All scripts located in skills/browser-tools/scripts/:

browser-start

By default use the persistent profile at /tmp/chrome-profile-browser-tools.

browser-start --profile    # Persistent profile
browser-start              # Fresh profile

Launch Chrome with remote debugging on port 9222. Use --profile to maintain login state between sessions.

browser-nav

browser-nav https://example.com
browser-nav https://example.com --new

Navigate to URLs. Use --new to open in new tab instead of current tab.

browser-eval

browser-eval 'document.title'
browser-eval 'document.querySelectorAll("a").length'
browser-eval 'Array.from(document.querySelectorAll("h1")).map(h => h.textContent)'

Execute JavaScript in active tab. Runs in async context. Use for:

  • Extract data from pages
  • Inspect page state
  • Manipulate DOM
  • Test page functionality

browser-screenshot

browser-screenshot

Capture current viewport, returns temp file path. Use Read tool to show screenshot to user.

browser-pick

browser-pick                      # Uses default message "Select element(s)"
browser-pick "Select the submit button"

Interactive element picker - Launches UI overlay for user to click and select elements. Returns element details (tag, id, class, text, html, parent hierarchy). Message parameter is optional.

Use when:

  • User says "click that button" or "extract those items"
  • Need specific selectors but page structure is unclear
  • User wants to identify elements visually

Controls:

  • Click to select single element
  • Cmd/Ctrl+Click for multiple selections
  • Enter to finish (when multiple selected)
  • ESC to cancel

browser-console

browser-console                         # Stream logs until Ctrl+C or kill
browser-console --url http://...        # Navigate and exit after load
browser-console --url http://... --no-exit  # Navigate then keep streaming
browser-console --level error,warn      # Filter by log level

Capture console logs (log, warn, error, info, debug) from Chrome. Includes stack traces for errors and page errors.

Modes:

  • Streaming (default): Captures logs until process is killed. Best for workflow monitoring.
  • Navigation (--url): Navigates to URL and exits after page load. Captures logs during page initialization.

Claude Code usage:

# Page load logs - auto-exits after load
browser-console --url http://localhost:3000

# Workflow monitoring - run in background, kill when done
browser-console &
browser-nav http://localhost:3000
browser-eval "triggerSomeAction()"
# Check logs via BashOutput, kill via KillShell

browser-cookies

browser-cookies

Display all cookies for current tab (domain, path, httpOnly, secure flags). Use for debugging auth issues.

Workflow Examples

Test dev server feature

# Start browser with persistent profile
browser-start --profile

# Navigate to dev server
browser-nav http://localhost:3000

# Test functionality
browser-eval 'document.querySelector("#new-feature").textContent'

# Take screenshot
SCREENSHOT=$(browser-screenshot)
# Then use Read tool to show screenshot at $SCREENSHOT path

Debug authentication

browser-start --profile
browser-nav https://app.example.com/login
browser-cookies

Extract data from page

browser-start
browser-nav https://example.com
browser-eval 'Array.from(document.querySelectorAll(".product")).map(p => ({name: p.querySelector(".title").textContent, price: p.querySelector(".price").textContent}))'

Important Notes

  • Chrome required - Scripts use google-chrome binary
  • Port 9222 - Chrome runs with --remote-debugging-port=9222
  • Profile location - /tmp/chrome-profile-browser-tools when using --profile
  • Temp screenshots - Screenshots saved to OS temp directory
  • Dependencies - Requires chrome-remote-interface (installed via /browser-tools:setup)
  • Error handling - If scripts fail, check Chrome is running and port 9222 is available