Back to Blog
Playwright MCP Claude Code October 3, 2025

Browser Automation with Playwright MCP and Claude Code

How to teach Claude Code to control a real browser. For web scraping, testing, and automation.

The Model Context Protocol (MCP) extends Claude Code's capabilities with external tools. One of the most powerful extensions: Playwright MCP, which lets Claude control a real browser.

Setup in One Minute

The installation is remarkably simple. A single command before starting Claude:

$ claude mcp add playwright npx '@playwright/mcp@latest'

That's it. The configuration is stored in ~/.claude.json and persists for future sessions.

How It Works

After setup, Claude can control a visible Chrome window. You see in real time what the agent is doing. Loading pages, filling out forms, clicking buttons.

A practical tip: Explicitly mention "Playwright MCP" in your requests. This way Claude selects the right tool and doesn't try to use regular Bash commands.

Authentication Made Easy

A major advantage: Claude displays login pages while you authenticate manually. Session cookies are preserved throughout the entire interaction. No need to pass credentials to the AI.

Available Browser Tools

Playwright MCP provides 25 browser functions. You don't need to memorize the names. Claude automatically selects the right function for your task:

browser_navigate
Open URLs
browser_click
Click elements
browser_type
Enter text
browser_screenshot
Take screenshots
browser_snapshot
Capture DOM structure
browser_tabs
Manage tabs
browser_drag
Drag & Drop
browser_hover
Hover effects
browser_select_option
Operate dropdowns
browser_file_upload
Upload files
browser_pdf_save
Generate PDFs
browser_network
Monitor network

Practical Use Cases

1. Web Scraping with JavaScript Rendering

Many modern websites only render content with JavaScript. Playwright automatically waits for complete rendering before extracting data. 

# Prompt for Claude:
"Use Playwright MCP to open the page example.com/products
and extract all product names and prices as JSON."

2. Automated Testing

Claude can perform end-to-end tests and even generate Playwright test scripts that you can later integrate into your CI/CD pipeline.

3. Form Automation

Repetitive form entries? Claude fills them out while you validate the final values.

4. Screenshot Documentation

Automatic screenshots of websites for documentation or monitoring, with annotations if desired.

Best Practices

  1. Explicit tool naming: Say "with Playwright MCP" so Claude selects the right tool
  2. Step-by-step instructions: Break down tasks for complex workflows
  3. Snapshots over screenshots: browser_snapshot provides structured data that Claude can process more effectively
  4. Monitor authentication: You can intervene manually on login pages

Security Considerations

Since Claude controls a real browser, some precautions apply:

  • Do not work with sensitive production data without review
  • Use test accounts for automation experiments
  • Watch the browser actions - you can see everything live
  • Never pass sensitive credentials directly to Claude

Tools used:

Playwright Claude Code

Want to integrate browser automation into your workflows? Get in touch. I help with setup and development of tailored solutions.