Connected Playwright Mcp

Official Playwright MCP server that enables browser automation through structured accessibility snapshots, eliminating the need for screenshots or vision models.

When to Use This MCP Server

Connect this server when you need to:

• Automate browser interactions using accessibility tree snapshots instead of expensive vision model calls
• Build reliable browser automation that works with screen readers and follows accessibility-first principles
• Integrate the official Microsoft Playwright MCP package for production-grade browser automation in Claude Code

Consider alternatives when:

• Your target pages have poor accessibility markup and require visual element identification instead
• You need cloud-hosted browser infrastructure rather than local browser management

Quick Start

Configuration

Copy
name: connected-playwright-mcp
type: mcp
category: browser_automation

Example Connection

Copy
claude mcp add connected-playwright-mcp -- npx @playwright/mcp@latest

Available Tools

browser_navigate:     Navigate to a URL and return the accessibility snapshot
browser_click:        Click an element identified by accessibility reference
browser_type:         Type text into a focused or specified input element
browser_snapshot:     Capture the current page accessibility tree structure
browser_screenshot:   Take a visual screenshot of the current viewport
browser_evaluate:     Execute JavaScript and return the result

Core Concepts

Accessibility-First Automation Overview

Aspect	Details
Protocol	MCP over stdio transport
Element Targeting	Accessibility tree references instead of CSS selectors
Vision Independence	No screenshot-based models needed for interaction
Official Package	Maintained by the Playwright team at Microsoft
Browser Support	Chromium, Firefox, and WebKit via Playwright
Page Representation	Structured accessibility snapshots as tool responses

Accessibility Snapshot Architecture

┌─────────────┐     ┌──────────────────┐     ┌────────────────┐
│ Claude Code  │────▶│  Playwright MCP  │────▶│  Browser       │
│  (Client)    │◀────│  (@playwright/)  │◀────│  Engine        │
└─────────────┘     └──────────────────┘     └────────────────┘
                           │
                    ┌──────┴──────┐
                    │ Accessibility│
                    │   Tree API   │
                    └─────────────┘

Configuration

Parameter	Type	Default	Description
browser	string	chromium	Browser engine to launch: chromium, firefox, or webkit
headless	boolean	true	Run without a visible browser window
viewport	string	1280x720	Browser viewport dimensions as widthxheight
device	string	none	Emulate a specific device profile for mobile testing
timeout	integer	30000	Default timeout in milliseconds for navigation and actions

Best Practices

1. Rely on Accessibility Snapshots - The primary advantage of this server is its accessibility-first approach. Use browser_snapshot to understand page structure rather than taking screenshots, which saves tokens and avoids vision model costs.

2. Target Elements by Accessible Name - Reference elements using their accessible names from the snapshot tree. This produces more resilient automation than fragile CSS selectors or XPath expressions that break on minor UI changes.

3. Combine with Visual Screenshots Selectively - While accessibility snapshots handle most interactions, take visual screenshots only when you need to verify layout or styling. This hybrid approach balances efficiency with completeness.

4. Use Device Emulation for Responsive Testing - Leverage the device parameter to emulate phones and tablets. The accessibility tree changes with responsive layouts, so test across viewports to catch mobile-specific issues.

5. Keep the Browser Focused - Accessibility snapshots capture the entire page tree, which can be large. Navigate to specific sections or close unnecessary tabs to reduce snapshot size and improve response times.

Common Issues

1. Large Accessibility Trees - Complex pages produce massive accessibility snapshots that may exceed token limits. Use targeted navigation to specific page sections or filter the snapshot output to relevant subtrees.

2. Dynamic Content Missing from Snapshot - Content loaded asynchronously may not appear in the initial snapshot. Wait for network idle or use browser_evaluate to check loading state before capturing the snapshot.

3. Accessibility Attributes Not Present - Some poorly-built websites lack proper ARIA labels and semantic HTML. In these cases, fall back to browser_screenshot with visual inspection or use browser_evaluate to query the DOM directly.