browser-max-automation

aktsmm's avatarfrom aktsmm

Browser automation using Playwright MCP for web testing, UI verification, and form automation. Use when navigating websites, clicking elements, filling forms, taking screenshots, or testing web applications. Supports iframe operations and complex JavaScript execution.

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

When & Why to Use This Skill

This Claude skill provides advanced browser automation capabilities powered by Playwright MCP. It enables seamless web testing, UI verification, and automated form interaction by allowing Claude to navigate websites, interact with elements via accessibility trees, and execute custom JavaScript for complex web workflows. Designed for robustness, it supports iframe operations and multi-tab management, making it an essential tool for automating sophisticated web-based tasks.

Use Cases

  • Automated UI Testing: Streamline quality assurance by automatically navigating through web applications to verify UI components and functional flows.
  • Web Form Automation: Efficiently handle repetitive data entry and multi-step form submissions on complex websites or internal portals.
  • Visual Regression and Monitoring: Capture high-quality screenshots and accessibility snapshots to track visual changes and ensure design consistency.
  • Dynamic Content Interaction: Interact with sophisticated web elements, including iframes and JavaScript-heavy components, for deep web navigation and data retrieval.
  • Web-Based Task Orchestration: Chain multiple browser actions like clicking, typing, and waiting to automate end-to-end workflows on any website.
namebrowser-max-automation
descriptionBrowser automation using Playwright MCP for web testing, UI verification, and form automation. Use when navigating websites, clicking elements, filling forms, taking screenshots, or testing web applications. Supports iframe operations and complex JavaScript execution.
licenseComplete terms in LICENSE.txt
authoryamapan (https://github.com/aktsmm)

Browser Max Automation

Browser automation via Playwright MCP.

Prerequisites

Configure .vscode/mcp.json:

{
  "servers": {
    "playwright": {
      "command": "npx",
      "args": ["@anthropic-ai/mcp-playwright@latest", "--browser", "chrome"]
    }
  }
}

Quick Reference

Command Purpose
browser_navigate Open URL
browser_snapshot Get element refs (accessibility tree)
browser_click Click element by ref
browser_type Input text
browser_take_screenshot Capture screen
browser_wait_for Wait for text/time
browser_run_code Execute JavaScript

Basic Workflow

1. browser_navigate(url)
2. browser_snapshot → get ref
3. browser_click/type(ref)
4. browser_snapshot → verify

Commands

mcp_playwright_browser_navigate
  url: "https://example.com"

Snapshot

mcp_playwright_browser_snapshot

Returns accessibility tree with ref values for each element.

Click

mcp_playwright_browser_click
  element: "Submit button"
  ref: "f2e123"

Type

mcp_playwright_browser_type
  element: "Username"
  ref: "f2e456"
  text: "user@example.com"
  submit: true  # Press Enter

Screenshot

mcp_playwright_browser_take_screenshot
  filename: "result.png"

Wait

mcp_playwright_browser_wait_for
  text: "Loading complete"  # or
  time: 3

Tabs

mcp_playwright_browser_tabs
  action: "list" | "new" | "close" | "select"
  index: 0

Advanced

iframe Operations

async (page) => {
  const frame1 = page.locator('iframe[name="Content"]').contentFrame();
  const frame2 = frame1.locator('iframe[title="Player"]').contentFrame();
  await frame2.getByRole("radio", { name: "Option A" }).click({ force: true });
  return "Selected";
};

force: true

Use when element is covered by another (e.g., SVG overlay):

await element.click({ force: true });

When browser_run_code is disabled

Use snapshot + click instead:

✅ browser_snapshot → get ref → browser_click(ref)

Reference

Type Use Case Selection
radio Single choice One only
checkbox Multiple choice 0 to many