playwright-mcp

JamesPrial's avatarfrom JamesPrial

Programmatic browser automation using Playwright MCP server. Use when building Claude Code tools or applications that need web automation, testing, scraping, or browser interaction. Provides structured accessibility-based automation without screenshots or vision models.

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 16, 2025
[Web Automation]

When & Why to Use This Skill

The Playwright MCP skill enables Claude agents to perform programmatic browser automation, allowing for seamless web interaction, automated testing, and data scraping. By leveraging structured accessibility-based snapshots, it provides a robust way for AI tools to navigate the web, manage multiple tabs, and execute complex browser tasks without the need for heavy vision models, making it an essential tool for developers building autonomous web agents.

Use Cases

  • Automated E2E Testing: Streamline quality assurance by allowing Claude to write and execute browser-based tests, inspect network logs, and debug UI issues in real-time.
  • Web Data Extraction: Efficiently scrape content from dynamic, JavaScript-heavy websites by programmatically navigating pages and extracting structured data for research or reporting.
  • Web Task Automation: Empower AI agents to perform multi-step web workflows such as filling out complex forms, generating PDFs of web pages, or managing online account settings.
  • Accessibility Auditing: Utilize structured accessibility snapshots to audit web page hierarchies and ensure content is properly structured for assistive technologies and SEO compliance.
nameplaywright-mcp
descriptionProgrammatic browser automation using Playwright MCP server. Use when building Claude Code tools or applications that need web automation, testing, scraping, or browser interaction. Provides structured accessibility-based automation without screenshots or vision models.

Playwright MCP

Programmatic interface for Playwright MCP server - enables browser automation in Node.js applications using structured accessibility snapshots.

Installation

npm install @playwright/mcp @modelcontextprotocol/sdk

Basic Usage

import http from 'http';
import { createConnection } from '@playwright/mcp';
import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js';

// Create MCP server with browser configuration
const connection = await createConnection({ 
  browser: { 
    launchOptions: { headless: true } 
  } 
});

// Connect with SSE transport
const transport = new SSEServerTransport('/messages', res);
await connection.connect(transport);

Configuration Options

See references/configuration.md for full browser and server configuration options.

Available Tools

See references/tools.md for complete tool documentation including:

  • Core automation (click, type, navigate, etc.)
  • Tab management
  • Screenshots and PDF generation
  • JavaScript evaluation
  • Network and console inspection

Common Patterns

Headless automation:

const connection = await createConnection({
  browser: { launchOptions: { headless: true } }
});

With browser channel:

const connection = await createConnection({
  browser: { 
    launchOptions: { 
      channel: 'chrome',
      headless: false 
    } 
  }
});

Isolated contexts:

const connection = await createConnection({
  browser: { 
    isolated: true,
    contextOptions: {
      storageState: 'path/to/storage.json'
    }
  }
});

Documentation