skillpack.co
All skills

Playwright MCP

active

Microsoft's official MCP server for Playwright. Uses accessibility snapshots instead of screenshots for structured browser control. Auto-configured in GitHub Copilot's Coding Agent.

Connector
Atomic
Complexity
browserweb

84/100

Trust

29K+

Stars

7

Evidence

1.8 MB

Repo size

Product screenshot

Playwright MCP in action

Videos

Reviews, tutorials, and comparisons from the community.

AI-Powered Test Automation with Playwright MCP, GitHub Copilot & VSCode (Playwright + TypeScript)

SDET- QA·2025-06-10

Let AI Explore Your Site & Write Tests with Playwright MCP!

Playwright·2025-06-16

How to Generate Playwright Tests using MCP + Copilot

Playwright·2025-05-15

Repo health

84/100

17h ago

Last push

24

Open issues

2,357

Forks

63

Contributors

Editorial verdict

Best MCP-native browser option for teams in Microsoft's ecosystem. The accessibility-snapshot approach is more reliable than vision-based alternatives for structured data extraction.

Public evidence

strong2025-04
HN front page: 'Playwright Tools for MCP' launch thread

Playwright MCP launch hit the HN front page. Discussion covered real-world usage with Claude Code and automatic test validation workflows, signaling strong developer interest in accessibility-tree-based browser automation.

181 HN points, 34 commentsHN community (submitted by alex_hirner)
strong2025-01
Speakeasy analysis: 'The Playwright proliferation problem with MCP'

Independent analysis showing Playwright MCP's 26-tool surface causes agent decision paralysis, and reducing to 8 core tools dramatically improves performance. Validates Playwright MCP as the de facto browser-automation MCP standard others benchmark against.

Widely referenced in MCP design discussionsNolan Sullivan (Speakeasy)
strong2025-09
GitHub Blog: How to debug a web app with Playwright MCP and GitHub Copilot

Step-by-step demo of Copilot agent mode using Playwright MCP to reproduce bugs, inspect live pages via accessibility snapshots, identify fixes, and verify them — all autonomously. Shows institutional commitment to Playwright MCP as the browser layer.

GitHub official engineering blogChristopher Harrison (Senior Developer Advocate, GitHub)
moderate2025-03
Simon Willison: microsoft/playwright-mcp — launch day coverage

Launch-day coverage noting Playwright MCP uses accessibility tree instead of screenshots. Early independent validation from a respected voice in developer tooling.

Simon Willison's blog (massive organic reach)Simon Willison (Django co-creator, independent)

How does this compare?

See side-by-side metrics against other skills in the same category.

COMPARE SKILLS →

Where it wins

Microsoft/Playwright official backing

Accessibility snapshots instead of screenshots — more reliable for structured tasks

Auto-configured in GitHub Copilot Coding Agent

MCP-native — works with any MCP-compatible host

Where to be skeptical

Token-heavy: 114K tokens/session vs 27K via CLI — well-documented 4x bloat problem

Less vision-aware than Browser Use for visual tasks

Accessibility snapshots miss visual layout information

Ranking in categories

Know a better alternative?

Submit evidence and we'll run the full pipeline.

SUBMIT →

Similar skills

Raw GitHub source

GitHub README peek

Constrained peek so you can sanity-check the source material without leaving the site.

Playwright MCP

A Model Context Protocol (MCP) server that provides browser automation capabilities using Playwright. This server enables LLMs to interact with web pages through structured accessibility snapshots, bypassing the need for screenshots or visually-tuned models.

Playwright MCP vs Playwright CLI

This package provides MCP interface into Playwright. If you are using a coding agent, you might benefit from using the CLI+SKILLS instead.

  • CLI: Modern coding agents increasingly favor CLI–based workflows exposed as SKILLs over MCP because CLI invocations are more token-efficient: they avoid loading large tool schemas and verbose accessibility trees into the model context, allowing agents to act through concise, purpose-built commands. This makes CLI + SKILLs better suited for high-throughput coding agents that must balance browser automation with large codebases, tests, and reasoning within limited context windows.<br>Learn more about Playwright CLI with SKILLS.

  • MCP: MCP remains relevant for specialized agentic loops that benefit from persistent state, rich introspection, and iterative reasoning over page structure, such as exploratory automation, self-healing tests, or long-running autonomous workflows where maintaining continuous browser context outweighs token cost concerns.

Key Features
  • Fast and lightweight. Uses Playwright's accessibility tree, not pixel-based input.
  • LLM-friendly. No vision models needed, operates purely on structured data.
  • Deterministic tool application. Avoids ambiguity common with screenshot-based approaches.
Requirements
  • Node.js 18 or newer
  • VS Code, Cursor, Windsurf, Claude Desktop, Goose or any other MCP client
<!-- // Generate using: node utils/generate-links.js -->
Getting started

First, install the Playwright MCP server with your client.

Standard config works in most of the tools:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}
<details> <summary>Amp</summary>

Add via the Amp VS Code extension settings screen or by updating your settings.json file:

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

Amp CLI Setup:

Add via the amp mcp addcommand below

amp mcp add playwright -- npx @playwright/mcp@latest
</details> <details> <summary>Antigravity</summary>

Add via the Antigravity settings or by updating your configuration file:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}
</details> <details> <summary>Claude Code</summary>

Use the Claude Code CLI to add the Playwright MCP server:

claude mcp add playwright npx @playwright/mcp@latest
</details> <details> <summary>Claude Desktop</summary>

Follow the MCP install guide, use the standard config above.

</details> <details> <summary>Cline</summary>

Follow the instruction in the section Configuring MCP Servers

Example: Local Setup

Add the following to your cline_mcp_settings.json file:

{
  "mcpServers": {
    "playwright": {
      "type": "stdio",
      "command": "npx",
      "timeout": 30,
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ],
      "disabled": false
    }
  }
}
</details> <details> <summary>Codex</summary>
View on GitHub →