Skip to main content
Testing & QAjpoutrin

install-playwright-mcp

Install Playwright MCP server for browser automation in Claude Code

Stars
13
Source
jpoutrin/product-forge
Updated
2026-03-01
Slug
jpoutrin--product-forge--install-playwright-mcp
View on GitHubRaw SKILL.md

// install — copy + paste into any project

mkdir -p .claude/skills && curl -fsSL https://raw.githubusercontent.com/jpoutrin/product-forge/HEAD/plugins/claude-code-dev/skills/install-playwright-mcp/SKILL.md -o .claude/skills/install-playwright-mcp.md

Drops the SKILL.md into .claude/skills/install-playwright-mcp.md. Works with Claude Code, Cursor, and any agent that loads SKILL.md files from .claude/skills/.

Install Playwright MCP Server

Install the Playwright MCP server to enable browser automation capabilities.

What This Does

The Playwright MCP server provides:

  • Browser automation - Navigate, click, fill forms, take screenshots
  • Accessibility snapshots - LLM-friendly structured data, no vision models needed
  • Fast and lightweight - Uses Playwright's accessibility tree

Installation Command

Run this command to install:

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

Scope Options

  • --scope local (default): Available only in current project
  • --scope project: Shared with team via .mcp.json
  • --scope user: Available across all your projects
# Install for user (all projects)
claude mcp add playwright --scope user -- npx @playwright/mcp@latest

# Install for project (team shared)
claude mcp add playwright --scope project -- npx @playwright/mcp@latest

Headless Mode

For headless operation (no visible browser):

claude mcp add playwright -- npx @playwright/mcp@latest --headless

Common Configurations

With specific browser

claude mcp add playwright -- npx @playwright/mcp@latest --browser firefox

With custom viewport

claude mcp add playwright -- npx @playwright/mcp@latest --viewport-size 1920x1080

With isolated sessions (no persistence)

claude mcp add playwright -- npx @playwright/mcp@latest --isolated

Verify Installation

After installation:

  1. Restart Claude Code
  2. Run /mcp to see the playwright server
  3. Test with: "Navigate to google.com and take a snapshot"

Available Tools After Installation

  • browser_navigate - Go to URL
  • browser_click - Click elements
  • browser_type - Type text
  • browser_snapshot - Get page accessibility tree
  • browser_take_screenshot - Capture screenshot
  • browser_fill_form - Fill multiple form fields
  • And many more...

Execution Instructions

When the user runs this command:

  1. Determine scope from arguments or ask:

    • Default to local if not specified

  2. Run installation:

    claude mcp add playwright [--scope <scope>] -- npx @playwright/mcp@latest [options]

  3. Verify success by checking output

  4. Inform user to restart Claude Code to use the new MCP server