# Playwright MCP — Browser Automation Server

> Playwright MCP is an MCP server for browser automation via Playwright snapshots. Add via npx in Claude Code/Codex to run deterministic actions.

## Install

Merge the JSON below into your `.mcp.json`:

## Quick Use

1. Install the verified entrypoint:

```bash
claude mcp add playwright npx @playwright/mcp@latest
```

2. Run a first local check:

```bash
codex mcp add playwright npx "@playwright/mcp@latest"
```

3. Add a repeatable verification step:

```bash
In your MCP client, list servers/tools and confirm Playwright appears
```

---

## Intro

Playwright MCP is a verified GitHub-backed asset sourced from `microsoft/playwright-mcp` with 32,355 stars and a Apache-2.0 license snapshot. Best for: agents that need deterministic browser automation without vision models, using structured accessibility snapshots. Works with: Node.js 18+, any MCP client (Claude Code/Codex/Cursor/etc.). Setup time: 5 minutes.

### Quantitative notes

- Node.js 18+ requirement (repo)
- npx @playwright/mcp@latest install path (repo)

---

## Deep Dive

### What it solves

Use this when you need a **repeatable, team-shareable workflow** instead of one-off agent prompts. The goal is to make installation, first-run validation, and rollback **predictable**.

### Minimal mental model

- Treat the GitHub repo as the source of truth: install instructions, configs, and upgrade paths live there.
- Keep your first run small: one command, one verification, one rollback plan.
- Capture a baseline: setup time, first successful run, and one real task completed end-to-end.

### Safe rollout checklist

1. **Verify source**: confirm repo URL, stars, and license match what you expect.
2. **Install** using the Quick Use commands above.
3. **Prove it works** with the verification command; save the output in a note or issue.
4. **Operationalize**: document owner, upgrade command, and rollback command.

### Troubleshooting (common)

- **Install succeeds but nothing shows up**
  - Likely cause: the tool needs a restart/reload (CLI/IDE) or a config file in the right path.
  - Fix: restart the client, then re-run the verification step.

- **Works on one machine, fails on another**
  - Likely cause: Node/Python/Docker versions differ or missing system dependencies.
  - Fix: pin versions (Node/Python), and copy a minimal known-good config.

- **Token cost or latency is worse than expected**
  - Likely cause: tool schemas or verbose outputs get injected into context.
  - Fix: prefer smaller steps, cache results, and keep tool responses concise when possible.


---

### FAQ

**Q: MCP vs CLI—when should I pick MCP?**
A: The repo explains MCP is useful when you want persistent state and rich introspection; CLI can be more token-efficient for coding agents.

**Q: Do I need a vision model?**
A: The repo positions it as accessibility-tree based automation; you still validate outcomes, but it doesn't require screenshot reasoning by default.

**Q: How do I keep it stable in CI?**
A: Pin Node + Playwright versions and keep browser dependencies consistent across environments.

---

## Source & Thanks

> GitHub: https://github.com/microsoft/playwright-mcp
> Owner avatar: https://avatars.githubusercontent.com/u/6154722?v=4
> License (SPDX): Apache-2.0
> Stars (verified via `api.github.com/repos/microsoft/playwright-mcp`): 32,355


---

<!-- ZH -->

# Playwright MCP——基于 Playwright 的浏览器 MCP

> Playwright MCP 是基于 Playwright 的 MCP Server：通过可访问性树而非截图驱动浏览器自动化，适合可重复的网页操作与自愈脚本。用 npx 添加到 Claude Code/Codex 配置后即可调用工具。

## 快速使用

1. 安装（以仓库为准）：

```bash
claude mcp add playwright npx @playwright/mcp@latest
```

2. 首次运行/检查：

```bash
codex mcp add playwright npx "@playwright/mcp@latest"
```

3. 可重复验证：

```bash
In your MCP client, list servers/tools and confirm Playwright appears
```

---

## 简介

Playwright MCP 已核验来源于 `microsoft/playwright-mcp`（32,355 stars，许可证 Apache-2.0）。适合：需要确定性网页自动化、希望基于结构化可访问性树而非截图/视觉模型的 agent。兼容：Node.js 18+；任意 MCP client（Claude Code/Codex/Cursor 等）。装机时间：5 分钟。

### 量化信息

- 需要 Node.js 18+（仓库）
- 用 npx @playwright/mcp@latest 安装（仓库）

---

## 深度说明

### 解决什么问题

把“找到项目 → 安装 → 首次验证 → 回滚/升级”变成可复用流程，避免只靠一次性提示词或截图操作。

### 最小心智模型

- GitHub 仓库是事实来源：安装、配置、升级、已知问题都以它为准。
- 第一次只做最小闭环：一个命令安装、一个命令验证、一个可回滚方案。
- 记录基线：装机耗时、首次成功输出、完成 1 个真实任务的证据。

### 安全推广清单

1. **核验来源**：确认仓库 URL / stars / license 与预期一致。
2. 按“快速使用”完成安装与首次检查。
3. 跑通“验证命令”，把输出留档。
4. 标注 owner，并写清升级/回滚步骤。

### 常见排障

- **装了但看不到效果**
  - 常见原因：需要重启 CLI/IDE 或配置文件路径不对。
  - 处理：重启后再跑一遍“验证命令”。

- **一台机器能跑，另一台不行**
  - 常见原因：Node/Python/Docker 版本差异或缺少系统依赖。
  - 处理：固定版本，并拷贝最小可用配置。

- **token 成本/延迟超预期**
  - 常见原因：工具 schema 或输出过长被塞进上下文。
  - 处理：拆小步骤、缓存结果、尽量让工具输出更短。


---

### FAQ

**Q: MCP 和 CLI 怎么选？**
A: 仓库说明：需要持续状态/丰富内省时选 MCP；纯高频命令型工作流用 CLI 可能更省 token。

**Q: 需要视觉模型吗？**
A: 它基于可访问性树，不依赖截图推理；仍建议用可重复的验证步骤确认结果。

**Q: CI 里怎么更稳定？**
A: 固定 Node 与 Playwright 版本，并保证浏览器依赖在各环境一致。

---

## 来源与感谢

> GitHub：https://github.com/microsoft/playwright-mcp
> Owner avatar：https://avatars.githubusercontent.com/u/6154722?v=4
> 许可证（SPDX）：Apache-2.0
> GitHub stars（已通过 `api.github.com/repos/microsoft/playwright-mcp` 核验）：32,355


---
Source: https://tokrepo.com/en/workflows/playwright-mcp-browser-automation-server
Author: MCP Hub