Skip to content
BSWEN
Blog

How to Use Playwright MCP for Browser Automation with AI Agents

Cowrie
Cowrie
Dev @ Bswen

The Problem

I wanted my AI assistant to interact with web pages directly - navigate to sites, fill forms, click buttons, and extract data. But LLMs are text-based. They can’t see or interact with browsers.

I tried using Python scripts with Selenium, but maintaining selectors was painful. Every time a website changed its HTML, my automation broke. Plus, I had to write code for every single interaction.

Traditional automation headache
1. Inspect element → Find selector → Write code
2. Website updates → Selector breaks → Fix code
3. Repeat forever...

What I wanted was simple: tell the AI what to do in plain English, and have it figure out the browser interactions automatically.

Environment

I’m using:

  • macOS (works on Windows/Linux too)
  • Claude Desktop or Cursor IDE
  • Node.js 18+
  • A Model Context Protocol (MCP) client

What Happened

I discovered Playwright MCP through a Reddit comment that caught my attention:

“playwright MCP… Nothing even comes close… playwright is GOAT”

So I tried it. And honestly? The commenter was right.

Solution

Step 1: Install Playwright MCP

First, I installed the MCP server:

terminal
npm install -g @executeautomation/playwright-mcp-server

Or if you prefer npx (no global install):

terminal
npx @executeautomation/playwright-mcp-server

Step 2: Configure Claude Desktop

I added Playwright MCP to my Claude Desktop configuration:

claude_desktop_config.json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@executeautomation/playwright-mcp-server"]
    }
  }
}

The config file location depends on your OS:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json
  • Linux: ~/.config/Claude/claude_desktop_config.json

Step 3: Restart Claude Desktop

After updating the config, I restarted Claude Desktop. The MCP server loaded automatically.

Step 4: Start Automating

Now I can ask Claude to interact with browsers:

Natural language automation
Me: "Go to example.com, fill the contact form with my details, and submit it."


Claude: *Opens browser, navigates, fills form, clicks submit*

The AI can:

  • Navigate to URLs
  • Click elements by description
  • Fill forms with data
  • Extract text content
  • Execute JavaScript
  • Take screenshots (when needed)

Here’s what a typical interaction looks like:

Sample interaction flow
User: Find the latest pricing for "GPT-4 API" on OpenAI's website


Claude:
1. Navigates to openai.com/pricing
2. Locates GPT-4 pricing section
3. Extracts current prices
4. Returns structured data


Result:
├── Input: $0.03 / 1K tokens
├── Output: $0.06 / 1K tokens
└── Context window: 8K tokens

Step 5: Advanced Usage

For more control, I can chain multiple actions:

Complex workflow
User: "Go to GitHub, search for 'playwright mcp', open the first result,
and tell me how many stars it has."


Claude:
1. Opens github.com
2. Types in search box
3. Clicks search button
4. Clicks first result
5. Reads star count
6. Returns: "The repository has 2,847 stars"

Why This Works

Accessibility Tree vs Screenshots

The key innovation is using the accessibility tree instead of pixel-based screenshots. Here’s why this matters:

Comparison
┌─────────────────────────────────────────────────────┐
│ Pixel-based approach                                 │
├─────────────────────────────────────────────────────┤
│ ✓ Can see visual layout                              │
│ ✗ Heavy (large image tokens)                         │
│ ✗ Slow to process                                    │
│ ✗ Can't read text reliably                           │
└─────────────────────────────────────────────────────┘


┌─────────────────────────────────────────────────────┐
│ Accessibility tree approach                          │
├─────────────────────────────────────────────────────┤
│ ✓ Lightweight (text representation)                  │
│ ✓ Fast processing                                    │
│ ✓ Reliable element detection                         │
│ ✓ Works with screen readers                          │
│ ✗ No visual layout information                       │
└─────────────────────────────────────────────────────┘

The accessibility tree gives the AI a structural view of the page - buttons, links, forms, and their relationships. It’s like giving the AI an HTML outline without the visual noise.

Zero-Code Philosophy

Traditional browser automation requires:

selenium_example.py
from selenium import webdriver
from selenium.webdriver.common.by import By


driver = webdriver.Chrome()
driver.get("https://example.com")


# Find element by CSS selector (breaks if HTML changes)
button = driver.find_element(By.CSS_SELECTOR, "#submit-btn")
button.click()


# Find form field (breaks if class name changes)
field = driver.find_element(By.CLASS_NAME, "email-input")
field.send_keys("[email protected]")

With Playwright MCP, the same task:

Natural language command
Me: "Go to example.com, enter '[email protected]' in the email field, and click submit."


Claude: *Does everything automatically*

No selectors. No code. No maintenance when websites change.

Integration with AI Agents

The MCP (Model Context Protocol) acts as a bridge:

Architecture overview
┌──────────────┐      ┌─────────────┐      ┌──────────────┐
│   AI Agent   │ ←──→ │  MCP Server │ ←──→ │   Browser    │
│  (Claude)    │      │ (Playwright) │      │ (Chromium)   │
└──────────────┘      └─────────────┘      └──────────────┘
       ↑                    ↑
       │                    │
   Natural           Accessibility
   Language             Tree

The AI agent doesn’t need to “see” pixels. It understands the page structure through the accessibility tree, just like how screen readers help visually impaired users navigate.

Limitations

I found a few things to be aware of:

  1. Complex visual layouts - If the task requires understanding visual design, accessibility tree might miss context
  2. Dynamic content - Heavily JavaScript-dependent sites might need explicit wait commands
  3. Authentication - You’ll need to handle logins separately or use persisted sessions

Summary

Playwright MCP transforms browser automation from a coding task into a conversation. Instead of writing fragile selectors, I describe what I want in plain English. The AI figures out the how.

Key takeaways:

  • Uses accessibility tree (lightweight, reliable)
  • Zero-code automation through natural language
  • Works with Claude Desktop, Cursor IDE, and other MCP clients
  • More resilient than traditional selector-based approaches

For anyone doing web automation, this is genuinely a game-changer. The Reddit commenter was right - nothing comes close.

Final Words + More Resources

My intention with this article was to help others share my knowledge and experience. If you want to contact me, you can contact by email: Email me

Here are also the most important links from this article along with some further resources that will help you in this scope:

Oh, and if you found these resources useful, don’t forget to support me by starring the repo on GitHub!

Comments

Tags: