browser-automation

name: browser-automation description: This skill should be used when the user asks about browser automation, testing web pages, scraping content, filling forms, taking screenshots, or monitoring console/network activity. Activates for E2E testing, web scraping, form automation, or debugging web applications.

When the user asks about browser automation, use Firefox DevTools MCP to control a real Firefox browser.

When to Use This Skill

Activate this skill when the user:

• Wants to automate browser interactions ("Fill out this form", "Click the login button")
• Needs E2E testing ("Test the checkout flow", "Verify the login works")
• Requests web scraping ("Extract prices from this page", "Get all links")
• Needs screenshots ("Screenshot this page", "Capture the error state")
• Wants to debug ("Check for JS errors", "Show failed network requests")

Core Workflow

Step 1: Navigate and Snapshot

navigate_page url="https://example.com"
take_snapshot

The snapshot returns a DOM representation with UIDs (e.g., e42) for each interactive element.

Step 2: Interact with Elements

Use UIDs from the snapshot:

fill_by_uid uid="e5" text="user@example.com"
click_by_uid uid="e8"

Step 3: Re-snapshot After Changes

DOM changes invalidate UIDs. Always re-snapshot after:

• Page navigation
• Form submissions
• Dynamic content loads

take_snapshot  # Get fresh UIDs

Quick Reference

Guidelines

• Always snapshot first: UIDs only exist after take_snapshot
• Re-snapshot after DOM changes: UIDs become stale after interactions
• Check for errors: Use list_console_messages level="error" to catch JS issues
• Firefox only: This MCP controls Firefox, not Chrome or Safari