什么是Playwright MCP？
Playwright MCP服务器为任何Model Context Protocol客户端提供浏览器自动化的超强能力。服务器不是要求AI"查看"像素，而是返回页面的结构化可访问性快照，模型通过参考ID与元素交互。这使循环快速、确定性，并且没有视觉模型的开销。它适用于VS Code、Cursor、Windsurf、Claude Desktop、Claude Code以及任何其他MCP客户端。
特别是对于Claude Code，这意味着您终端中的代理现在可以打开浏览器、点击、填写表单、模拟网络请求、捕获截图，甚至执行自定义Playwright脚本——所有这些都由自然语言提示驱动。
前置条件
在开始之前，请确保您有：
- 已安装Node.js 18或更新版本
- 已安装Claude Code并已登录（在终端中运行
claude以验证） - 您熟悉的终端
仅此而已——Playwright MCP在首次运行时会下载自己的浏览器二进制文件。
设置Playwright MCP集成
将Playwright MCP连接到Claude Code只需一个命令。按照以下步骤进行连接：
添加Playwright MCP服务器
打开您的终端并运行：
claude mcp add playwright npx @playwright/mcp@latest
这注册了一个名为playwright的新MCP服务器，每当Claude Code需要浏览器工具时就会通过npx启动它。第一次调用会下载软件包和所需的浏览器二进制文件，所以第一次请给它一分钟时间。
验证连接
启动新的Claude Code会话并运行/mcp命令：
claude
/mcp
您应该看到playwright列为已连接的服务器，以及它公开的工具（导航、点击、输入、截图、网络模拟等）。
可选：改用JSON配置
如果您更喜欢直接编辑配置文件，可以使用标准MCP格式将同一服务器添加到~/.claude.json（或项目范围的.mcp.json）：
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest"
]
}
}
}
编辑文件后重启Claude Code，服务器将出现在/mcp中。
您在Claude Code中的第一个浏览器自动化
连接服务器后，您的提示现在可以驱动真实浏览器。尝试Playwright文档中的规范第一个交互：
导航到https://demo.playwright.dev/todomvc并添加几个待办事项。
Claude Code将打开浏览器、请求页面的可访问性快照、通过其元素参考定位输入、输入每个待办事项，并在终端中向您确认结果。
**关于哪个浏览器打开的提示：**默认情况下，这会以有头模式启动Chromium。要更改它，请将标志添加到MCP配置中的args并重启Claude Code：使用--headless隐藏窗口，或使用--browser=firefox|webkit|msedge切换引擎。
可访问性快照的工作原理
当Playwright MCP工具运行时，它返回页面的结构化快照——元素角色、文本内容和参考ID——而不是像素。Claude读取快照并使用诸如ref=e5之类的引用来输入文本框或ref=e10来切换复选框。没有像素推送，没有脆弱的CSS选择器——只是模型可以推理的结构化页面状态。
加入我们的新闻通讯
免费获取最新提示、趋势和优惠。
您可以从Claude Code使用的核心功能
连接Playwright MCP后，您会给同事的相同提示在Claude Code中工作：
- 导航：“转到example.com”、“返回”、“重新加载页面”。
- 点击和输入：“点击提交按钮”、“用test@example.com填写电子邮件字段”。
- 截图：“截取定价部分的截图”。
- **键盘和鼠标：**按键、悬停、拖放。
- **标签页和对话框：**打开新标签页、在它们之间切换、接受或关闭弹出窗口。
- 网络监控：“列出页面加载以来发出的请求”。
- API模拟：“模拟/api/users端点以返回空数组”。
- **存储状态：**将经过身份验证的会话保存到文件并稍后重新加载它们。
对于需要多个工具调用的工作流，您可以要求Claude Code调用browser_run_code并内联执行Playwright脚本——对于断言、数据提取或任何受益于几行命令式代码的任务都很有用。
有用的配置选项
Playwright MCP有一些值得了解的标志。将它们添加到配置中的args数组中（或在claude mcp add命令后的--之后）。
无头模式
浏览器默认以有头模式运行，以便您可以观看发生的情况。要运行无头模式——对于CI或远程shell很有用——传递--headless：
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest",
"--headless"
]
}
}
}
选择浏览器
使用--browser标志切换引擎。支持的值为chrome、firefox、webkit和msedge：
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest",
"--browser=firefox"
]
}
}
}
配置文件模式
Playwright MCP支持三种配置文件模式：
- **持久（默认）：**登录状态和Cookie在会话之间持续存在。
- **隔离：**传递
--isolated以全新启动每个会话，可选地使用--storage-state进行初始化。 - **浏览器扩展：**传递
--extension以通过Playwright MCP Bridge扩展附加到您现有的浏览器标签页。
独立HTTP服务器
如果您需要在没有显示器的地方运行有头浏览器（或从IDE worker），请单独启动服务器并通过HTTP连接。
打开第二个终端——让它在整个会话期间保持运行——并在那里启动服务器：
npx @playwright/mcp@latest --port 8931
保持该终端打开。它是在localhost:8931上公开浏览器的东西，这样您可以在自己的浏览器中查看会话，Claude Code也有东西可以连接。关闭终端会关闭服务器。
然后，在运行Claude Code的终端中，通过更新配置将其指向端点：
{
"mcpServers": {
"playwright": {
"url": "http://localhost:8931/mcp"
}
}
}
值得借鉴的实际工作流
连接Playwright MCP后，Claude Code可以处理端到端测试脚手架、bug重现、API模拟检查、页面审计和发布冒烟测试——任何涉及驱动浏览器和报告的内容。
有两件事使这些提示在实践中真正有效。首先，项目根目录中的CLAUDE.md，记录您的暂存URL、演示凭证和代理应遵循的任何约定——没有它，“以演示用户身份登录"就没有任何参考。其次，如果您希望Claude Code从问题或工单中提取上下文，请连接第二个MCP服务器——GitHub MCP服务器
是常见的选择。跳过两者，Claude Code会（合理地）询问您问题#482是什么。
为什么将Claude Code与Playwright MCP配对？
有几个原因使这个组合难以比拟：
- **终端原生：**所有事情都发生在您已经工作的地方。无需切换到单独的测试运行器。
- **可访问性优先：**快照在速度和可靠性方面优于截图，并且无需视觉模型即可工作。
- **底层是真实的Playwright：**您可以用Playwright代码做任何事情，您都可以在这里做——多浏览器、网络模拟、存储状态等。
- **与其他MCP服务器可组合：**将Playwright与GitHub、您的数据库或监控MCP服务器堆叠在一起，Claude Code可以跨所有这些端到端移动工作。
- **开放标准：**MCP是便携的。同一Playwright服务器在Cursor、VS Code、Windsurf和Claude Desktop中工作，如果您切换客户端。
添加服务器、运行/mcp进行确认，您的下一个"去测试登录页面"提示就会变成真实的浏览器会话——由Claude Code驱动、在有头模式中观看（或不观看），并可通过可访问性快照验证。
