browser-max-automation

Browser Max Automation

Browser automation via Playwright MCP.

When to use

• Automating browser-based workflows or QA checks
• Verifying UI states, DOM changes, or visual regressions
• Filling forms, clicking elements, or capturing screenshots

Prerequisites

Configure .vscode/​mcp.json:

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

Quick Reference

Basic Workflow

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

Commands

Navigate

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: "[email protected]"
  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