Best MCP Browser Automation Tools with Puppeteer & Playwright

Step-by-Step Setup

The following instructions use Puppeteer MCP as the primary example because it covers the most common browser automation scenarios with the simplest setup. The same pattern applies to all five skills.

Step 1: Install Node.js

All browser MCP servers are distributed as Node.js packages. Verify you have Node 18 or later installed:

node --version  # should be v18 or higher

Step 2: Add the MCP Server to Your Config

Open your AI assistant's current MCP configuration surface and add the Puppeteer MCP server. For Cursor, this is commonly a project-level .cursor/mcp.json. For other clients, use the current add-command or settings path from that client's MCP documentation.

// Example MCP server map - adapt to your client's current MCP config
{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp"]
    },
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"]
    }
  }
}

Step 3: Restart Your AI Assistant

Restart Claude Code, Cursor, or whichever assistant you use. The MCP servers start automatically on the next session. You will see them listed under available tools when you ask your assistant "what tools do you have access to?"

Step 4: Verify the Connection

Test each server with a simple prompt to confirm it is working:

• "Navigate to example.com and take a screenshot" — verifies Puppeteer MCP is connected
• "Open Firefox and load google.com" — verifies Playwright MCP multi-browser support
• "Search for 'MCP browser automation' using Brave Search" — verifies search integration

Step 5: Add Browserbase for Production Workloads

If you need session persistence, proxy rotation, or stealth mode for production scraping, add Browserbase MCP and provide your API key:

"browserbase": {
  "command": "npx",
  "args": ["-y", "@browserbasehq/mcp"],
  "env": {
    "BROWSERBASE_API_KEY": "your_api_key",
    "BROWSERBASE_PROJECT_ID": "your_project_id"
  }
}

Use Cases

MCP browser automation is versatile enough to replace purpose-built RPA tools in many scenarios. Here are the four most common use cases with worked examples.

Web Scraping

Ask your AI agent: "Go to the product listing page at competitor.com, extract all product names and prices, and save the results as a JSON file." The agent navigates to the URL, identifies the relevant DOM elements, extracts the data, and writes the output — no selectors written by hand.

Automated Testing

Use Playwright MCP to run E2E tests across browsers: "Open the checkout flow in Chromium, Firefox, and WebKit. Fill in test payment details and verify the success page appears in all three browsers." The agent executes the same journey across all three browser engines and reports any discrepancies.

Form Filling and Submission

Automate repetitive form submissions: "Open the vendor portal, fill in the monthly expense report with the following values, attach the PDF from my Downloads folder, and submit the form." Puppeteer MCP handles file attachment, dropdown selection, and date pickers that defeat simpler automation tools.

Screenshot Capture and Visual Monitoring

Set up visual regression testing: "Take screenshots of our homepage on desktop (1440px), tablet (768px), and mobile (375px), then compare them against the reference screenshots from last week and highlight any layout differences." This workflow catches CSS regressions before they reach production.

Comparison Table

Use this table to match each browser MCP skill to your specific requirements. Cross-browser support and cloud-managed sessions are the two most common decision criteria.

Frequently Asked Questions