Playwright MCP : Service MCP d'automatisation des navigateurs de Microsoft

Introduction générale

Playwright MCP 是微软开发的一款开源工具，托管在 GitHub 上。它通过 Model Context Protocol（MCP）协议，让人工智能模型能直接控制浏览器，完成打开网页、点击元素、输入文字等操作。这个工具基于 Playwright 框架，支持 Chromium、Firefox 和 WebKit 等浏览器。它的核心特点是快速、轻量，能生成结构化数据，不需要依赖截图或视觉模型。Playwright MCP 特别适合需要网页交互的 AI 应用，比如自动化测试或数据提取。官方文档更新至 2025 年 3 月，项目活跃，受到开发者欢迎。

同名项目：MCP Playwright : un service MCP qui fournit des opérations d'automatisation du navigateur.

Liste des fonctions

• 支持浏览器控制：能打开网页、导航页面、点击元素等。
• 生成结构化数据：通过可访问性快照输出数据，无需截图。
• 提供两种模式：默认的快照模式（Snapshot Mode）和视觉模式（Vision Mode）。
• 截图与保存：能截取页面或保存为 PDF 文件。
• 输入与操作：支持输入文字、按键、拖拽等功能。
• 兼容无头模式：可在后台运行浏览器，不显示界面。

Utiliser l'aide

Playwright MCP 的安装和使用很简单。下面详细介绍如何安装和操作这个工具，包括两种模式的具体功能。

Processus d'installation

1. Préparation de l'environnement
   先安装 Node.js（建议用最新 LTS 版，如 v22）。检查版本用：

node -v

如果没有，访问 Node.js 官网 下载安装。

2. 安装 Playwright MCP
   Exécutez la commande suivante dans le terminal :

npm install -g @playwright/mcp

或者直接用最新版：

npx @playwright/mcp@latest

3. Démarrer le serveur
   Saisissez la commande de démarrage :

npx @playwright/mcp@latest

默认是有头模式（显示浏览器窗口）。想用无头模式，加参数：

npx @playwright/mcp@latest --headless

4. 配置 AI 客户端
   如果你的 AI 工具支持 MCP（比如某些大模型客户端），需要编辑配置文件。例如：

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

保存后，AI 就能通过 MCP 调用浏览器。

5. 无显示器环境配置
   在 Linux 无显示器环境下，可以用客户端-服务器模式。先在一台有显示器的机器上运行：

npx playwright run-server

输出会显示一个 WebSocket 地址，比如 ws://localhost:port/。然后在 MCP 配置中添加：

{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"],
"env": {
"PLAYWRIGHT_WS_ENDPOINT": "ws://localhost:port/"
}
}
}
}

Comment utiliser les principales fonctionnalités

Playwright MCP 有两种模式：快照模式和视觉模式。下面分别介绍。

快照模式（默认）

这种模式用可访问性快照操作，速度快且稳定。常用工具如下：

1. 打开网页

• Instructions :browser_navigate "https://example.com"
• 操作：浏览器打开指定网址。
• 输出：返回页面加载状态。

2. 点击元素

• Instructions :browser_click "登录按钮" "ref123"
• 操作：点击快照中标记为 ref123 的元素（需提供元素描述和引用）。
• 注意：引用来自快照数据。

3. entrée

• Instructions :browser_type "用户名输入框" "ref456" "myuser" true
• 操作：在 ref456 的输入框中输入 "myuser"，然后按 Enter（true 表示提交）。

4. 保存为 PDF

• Instructions :browser_save_as_pdf
• 操作：将当前页面保存为 PDF 文件。

5. 等待时间

• Instructions :browser_wait 5
• 操作：等待 5 秒（最多 10 秒）。

modèle visuel

启动时加 --vision Paramètres :

npx @playwright/mcp@latest --vision

这种模式用截图和坐标操作，适合视觉模型。常用工具：

1. 截取页面
   • Instructions :browser_screenshot
   • 操作：生成当前页面截图。
2. 点击坐标
   • Instructions :browser_click 100 200
   • 操作：在坐标 (100, 200) 点击。
3. 拖拽操作
   • Instructions :browser_drag 50 50 150 150
   • 操作：从 (50, 50) 拖到 (150, 150)。
4. entrée
   • Instructions :browser_type "hello" true
   • 操作：输入 "hello" 并按 Enter。

Exemple de déroulement des opérations

假设你要登录网站：

1. Démarrer le serveur :

npx @playwright/mcp@latest --headless

2. 打开登录页面：

• Instructions :browser_navigate "https://example.com/login"

3. 输入用户名和密码（快照模式）：

• Instructions :browser_type "用户名" "ref1" "myuser" false
• Instructions :browser_type "密码" "ref2" "mypassword" true

4. 点击登录（视觉模式）：

• 切换模式：重启服务器加 --vision
• Instructions :browser_click 300 400

5. 检查结果：

• Instructions :browser_snapshot（快照模式）或 browser_screenshot（视觉模式）。

mise en garde

• 快照模式比视觉模式更可靠，但需要元素引用。
• 视觉模式适合带坐标的 AI 模型。
• 无头模式适合批量任务，有头模式便于调试。

scénario d'application

1. 网页导航与表单填写
   AI 能自动打开网页，填表并提交，适合批量注册或登录测试。
2. extraction de données
   从动态网页抓取结构化数据，比如价格或评论。
3. test automatisé
   检查网页功能是否正常，比如按钮点击或页面跳转。
4. 智能代理交互
   让 AI 操作浏览器完成复杂任务，如在线购物。

QA

1. 快照模式和视觉模式有什么区别？
   快照模式用结构化数据操作，速度快且稳定；视觉模式用截图和坐标，适合视觉 AI。
2. Quels sont les navigateurs pris en charge ?
   支持 Chromium、Firefox 和 WebKit。
3. Besoin d'écrire du code ?
   不需要。只要发送简单指令，AI 就能操作。