Playwright MCP
브라우저 자동화. 배포 후 라이브 QA·회귀 테스트에 사용.
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.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, Junie or any other MCP client
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"
]
}
}
}
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
Add via the Antigravity settings or by updating your configuration file:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest"
]
}
}
}
Use the Claude Code CLI to add the Playwright MCP server:
claude mcp add playwright npx @playwright/mcp@latest
Follow the MCP install guide, use the standard config above.
같은 카테고리 다른 리소스
Next.js
React 기반 풀스택 프레임워크. App Router + RSC가 사실상 표준.
shadcn/ui
복사-붙여넣기 React 컴포넌트 모음. npm 의존성이 아닌 코드 소유권 모델.
Supabase
PostgreSQL 기반 BaaS. Auth · Realtime · Storage · Edge Functions 통합.
Anthropic MCP
Claude가 외부 도구/데이터에 접근하도록 해주는 프로토콜 표준. 생태계의 근간.