Playwright MCP Server

What it does

The Playwright MCP Server from Microsoft gives AI coding agents the ability to control a real web browser. Agents can navigate pages, fill forms, click buttons, extract content, and generate Playwright test scripts. Instead of relying on screenshots (which require vision models), it uses accessibility snapshots that represent page structure as text, making it fast and cost-effective.

This is one of the most popular MCP servers with over 150 reviews, and is particularly valuable for agents that need to test web applications or scrape structured data.

Available tools

Tool	What it does
browser_navigate	Navigate to a URL
browser_click	Click an element identified by accessibility role and name
browser_type	Type text into an input field
browser_snapshot	Get an accessibility tree snapshot of the current page
browser_select_option	Select a dropdown option
browser_hover	Hover over an element
browser_drag	Drag and drop between elements
browser_press_key	Press keyboard keys (Enter, Tab, shortcuts)
browser_wait	Wait for a condition or timeout
browser_screenshot	Take a PNG screenshot (for vision-capable models)
browser_pdf_save	Save the current page as PDF
browser_tab_list	List all open browser tabs
browser_tab_create	Open a new tab
browser_tab_close	Close the current tab
browser_console_messages	Get browser console output
browser_network_requests	List network requests made by the page

Setup by tool

Cursor

Create .cursor/mcp.json in your project root:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

Claude Code

Add to your Claude configuration file:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

VS Code / GitHub Copilot

code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

Prerequisites

Make sure Playwright browsers are installed:

npx playwright install

When to use this

• End-to-end testing: Agents navigate your app and verify features work after code changes
• Test generation: Describe a user flow in plain language and get Playwright test code
• Web scraping: Extract structured data from websites during development
• Visual regression: Agents can screenshot pages before and after changes for comparison
• Form testing: Automated form filling and submission validation

How accessibility snapshots work

Instead of sending large screenshot images to the model, Playwright captures the page's accessibility tree, which looks like:

- heading "Dashboard" [level=1]
- navigation "Main"
  - link "Home"
  - link "Settings"
  - link "Profile"
- main
  - heading "Recent Activity" [level=2]
  - list
    - listitem "Deployed v2.1.0 - 2 hours ago"
    - listitem "Merged PR #423 - 5 hours ago"

This text-based representation is much smaller than screenshots, costs fewer tokens, and gives agents precise element identifiers they can use in click and type operations.