注册
Claude

Claude Code 配 Playwright MCP 做浏览器测试：一条命令安装，让它打开页面、点按钮、读控制台，再把流程写成测试

想让 Claude Code 自己打开浏览器测试你的网页。本文按微软 Playwright MCP 官方仓库和 Claude Code 官方 MCP 文档讲：安装命令、怎么确认连上、有头无头与隔离参数、一次测试的提示词，以及它不是安全边界这件事。

NNathaniel bigo··原创首发·AI 辅助撰写
10 分钟读完
资料核对于 2026-11-05 · 依据官方文档与公开资料整理 Pro 账号
本文根据 Playwright MCP 官方仓库 README、Claude Code 官方《Connect Claude Code to tools via MCP》、Playwright 官方《Installation》整理，资料核对于 2026-11-05。配图为本站整理的示意图，不是界面截图。本站（bigolab.com）不是 Anthropic 或微软官方网站。

适用于谁

  • 写前端或全栈项目，想让 Claude Code 自己打开页面点一点、看有没有报错的人；
  • 想把「手动点一遍」的流程变成自动化测试的人；
  • 搞不清 Playwright MCP、Claude 的 Chrome 集成、Playwright 测试框架有什么区别的人。

结论先说

  1. 安装只要一条命令：claude mcp add playwright npx @playwright/mcp@latest，这是 Playwright MCP 官方仓库给 Claude Code 的写法。要求 Node.js 18 或更新版本。
  2. 它靠网页的「无障碍树」快照工作，不是靠截图。官方仓库的说法是结构化数据、不需要视觉模型，所以点哪个元素是明确的。
  3. 默认是有界面的浏览器，加 --headless 才是无界面；默认会保存登录状态到持久化配置里，要干净的环境用 --isolated。
  4. 官方仓库明确写了：Playwright MCP 不是安全边界。 不要让它在登录了重要账号的浏览器里乱点，也不要拿它访问你不信任的网站。
  5. 同一份仓库说明里也提到，面向编码智能体，Playwright CLI 加 Skills 更省 token；MCP 更适合需要持续浏览器状态的探索式场景。选哪个看你的任务。

Playwright MCP 从安装到测试

图：本站根据 Playwright MCP 官方仓库 整理的示意图

三个容易混的东西

  • Playwright MCP：给 Claude Code 一套「操作浏览器」的工具，本文主角。
  • Playwright 测试框架（@playwright/test）：你的项目里跑的自动化测试，用 npx playwright test 执行。MCP 可以帮你写这类测试，但它们是两个东西。
  • Claude 的 Chrome 集成：Claude Code 官方文档里的另一个功能，通过 Claude in Chrome 扩展连接你自己的 Chrome，共用你的登录状态，用 claude --chrome 启动，且需要 Pro、Max 等官方套餐并用 /login 登录。详见 /guides/claude-in-chrome。

如果你要测的是自己本机的开发站点，不需要登录状态，Playwright MCP 加隔离模式更干净。

第一步：安装并确认连上

在终端（不是在 Claude Code 里面）执行官方仓库给 Claude Code 的命令：

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

然后启动 claude，输入 /mcp，看 playwright 一行是否显示已连接。Claude Code 官方文档也给了命令行检查办法：claude mcp list 列出全部服务器及状态，claude mcp get playwright 看单个详情。MCP 的基础概念见 /guides/claude-code-mcp-setup。

想要无界面且不留登录状态，可以把参数写在 -- 后面。下面这条是本站按 Claude Code 官方「-- 之后原样传给服务器」的规则自己拼的，不是仓库原文：

bash
claude mcp add playwright -- npx @playwright/mcp@latest --headless --isolated

官方仓库列出的相关参数：--headless 无界面；--isolated 把浏览器配置放内存里不落盘；--browser 可选 chrome、firefox、webkit、msedge；--user-data-dir 指定持久化目录；--storage-state 为隔离会话加载保存好的 cookie 和本地存储。

常用参数怎么选

图：本站根据 Playwright MCP 官方仓库 整理的示意图

第二步：先在本机站点上试一次

先让开发服务器跑起来，比如 npm run dev。

提示词 1：只读式冒烟检查

text
我的站点跑在 http://localhost:3000。请用 playwright 工具打开首页，并依次：
1）读取页面快照，列出导航栏里的所有链接；
2）逐个点击，确认每个页面都能打开，记录标题和 HTTP 状态；
3）每个页面都读取浏览器控制台消息，汇总其中的错误和警告；
4）全程不要提交任何表单，不要访问 localhost 以外的网址。
最后给我一张表：页面、是否正常、控制台错误。

官方仓库列出的工具里，browser_navigate 打开地址，browser_snapshot 取页面结构，browser_click 点击，browser_console_messages 读控制台，browser_network_requests 看网络请求，browser_take_screenshot 截图。你不需要在提示词里点工具名，Claude 会自己选，写需求即可。

第三步：测一条真实流程

提示词 2：走一遍注册或下单流程

text
请在 http://localhost:3000 测试「注册 → 登录 → 修改昵称」流程，使用测试账号 [email protected]（不要使用任何真实邮箱和密码）。
每一步都要：说明你点了什么、页面出现了什么；遇到报错时读取控制台和网络请求，找出失败的接口和状态码。
流程结束后，告诉我：哪一步不符合预期、你怀疑的原因在哪个源码文件。先不要改代码。

Claude Code 官方最佳实践反复强调：给它一个能判断对错的检查，它就能自己闭环。浏览器测试正好是这样的检查：页面出现了什么，一目了然。

第四步：把流程固化成测试

浏览器里点通了，不等于项目里有了测试。如果项目已经用 Playwright 测试框架（官方入门文档里创建项目是 npm init playwright@latest，运行是 npx playwright test），可以让 Claude 把刚才走通的流程写成测试文件。

提示词 3：把走通的流程写成测试

text
请把刚才「注册 → 登录 → 修改昵称」的流程写成 Playwright 测试，放进项目现有的测试目录，风格参考 @tests/example.spec.ts。
要求：不依赖固定等待时间；测试数据用测试账号；每个关键步骤有断言。
写完用 npx playwright test 运行，失败就读报错并修复，直到全部通过，最后把命令输出贴给我。

测试框架的更多用法见 /guides/ai-write-unit-tests-workflow。

安全：官方仓库怎么说，你要怎么做

官方仓库的 Security 一节只有一句核心话：它不是安全边界。结合 Claude Code 官方对 MCP 的提醒（连接任何服务器前要确认你信任它），建议：

  • 默认只让它访问 localhost 的开发站；参数 --allowed-origins 可以限定允许的来源，但仓库自己写明它不能当安全边界，也管不了重定向；
  • 持久化配置会保存登录状态，位置在 Windows 的 %USERPROFILE%\AppData\Local\ms-playwright\ 下，不再需要时可以手动删除；
  • 同一个持久化配置同一时间只能被一个浏览器实例使用，多个客户端并行要加 --isolated 或指定不同的 --user-data-dir；
  • 网页内容本身可能含有诱导 AI 的文字，浏览真实第三方网站时，不要让它顺手执行页面上的「指令」。这条是常识性提醒，不是仓库原文。

常见问题

Q：/mcp 里没有显示 playwright？

先在终端运行 claude mcp list 看有没有；添加后需要在新会话里生效。Node.js 版本低于 18 也会失败。

Q：占上下文吗？

Claude Code 官方说明已连接的 MCP 服务器会把工具信息放进上下文。官方仓库自己也提示 MCP 比 CLI 更占 token。不用时可以在 /mcp 里关掉。

Q：能测手机端页面吗？

仓库的参数表里有 --device（例如模拟 iPhone 15）和 --mobile（模拟通用手机）。具体效果本文没有实际核实，以 README 为准。

订阅和额度

浏览器测试会产生大量页面快照，上下文消耗比普通改代码高，复杂流程建议分段做。订阅选择见 /chongzhi/claude-code，价格和额度以官方页面当前显示为准。

相关教程

参考资料

  • Playwright MCP 官方仓库 — https://github.com/microsoft/playwright-mcp
  • Claude Code 文档：Connect Claude Code to tools via MCP — https://code.claude.com/docs/en/mcp
  • Claude Code 文档：Use Claude Code with Chrome — https://code.claude.com/docs/en/chrome
  • Playwright 文档：Installation — https://playwright.dev/docs/intro

Nathaniel 的更多内容

  1. 01

    Claude Code 在 Windows 上的常见坑：Git Bash 还是 PowerShell、路径反斜杠、假报错、WSL 怎么选

    Windows 上用 Claude Code，装好之后最容易踩的是：用哪个 shell、路径写法不一致、grep 没匹配就报错、钩子没生效、WSL 和原生怎么选。本文逐条按官方文档整理原因和处理办法，附三段提示词和一张对照表。

    Claude0
  2. 02

    Claude Code Hooks 实战「提交前自动跑测试」：PreToolUse 拦住 git commit，测试不过就退出码 2，附 Windows 注意点

    只写一个完整例子：让 Claude Code 每次要执行 git commit 之前，先自动跑项目测试，没通过就拦下并把输出交给它修。本文按官方 Hooks 文档给出脚本、settings.json 配置、测试方法、排错和 Windows 的两处坑。

    Claude0
  3. 03

    Claude Code 自定义斜杠命令与 Skill 实战：从零写一个「生成更新日志」的 /release-notes，含传参、预执行命令和调试

    概念看过了，还是不知道从哪下手？本文按 Claude Code 官方「Extend Claude with skills」写一个完整可用的例子：用 /release-notes 根据 git 记录生成更新日志，覆盖目录、frontmatter、传参、预执行命令、预授权和调试。

    Claude0
  4. 04

    Claude Code 部署网站：先写 Dockerfile 和 compose 在本机跑通，再按清单上云服务器，别让它直接改线上

    想让 Claude Code 帮你把网站部署到云服务器。本文只写通用做法，按 Docker 官方文档讲：让它写 Dockerfile、.dockerignore 和 compose，在本机跑通，端口和数据卷怎么设，再给出上线清单，并说明为什么不要让它直接动线上机器。

    Claude0
  5. 05

    Claude Code 写爬虫与数据清洗：先查 robots.txt 和网站条款，控制频率，原始数据留一份再清洗

    想让 Claude Code 写爬虫抓数据再清洗。本文先讲合规：robots.txt 不是授权也不是安全措施、网站条款要自己读；再讲怎么用 Python 标准库检查规则、小样本先试、保存原始数据，以及用 pandas 清洗，附四段提示词。

    Claude0
  6. 06

    Claude Code 写 Chrome 扩展：按 Manifest V3 起步，加载未打包的扩展，改了哪些文件要重新加载

    想让 Claude Code 帮你写一个 Chrome 扩展。本文按 Chrome 官方扩展文档讲：manifest.json 的最小写法、在 chrome://extensions 加载未打包的扩展、哪些改动要刷新、怎么看控制台和报错，再给四段提示词，以及权限要尽量少。

    Claude0

同产品的其他教程

  1. 01

    Claude Code 写安卓 App：Android Studio 建项目、让它用 gradlew 编译安装，报错和日志怎么喂给它

    想让 Claude Code 帮你写安卓 App。官方文档没有专门的安卓教程，本文把 Claude Code 官方工作流和安卓官方命令行文档拼在一起：Android Studio 建项目、gradlew 编译安装、模拟器和真机、测试与日志，附四段提示词。

    Claude0
  2. 02

    Claude Code 用数据库 MCP 查数据、出报表：只读账号、先看口径再看数字，结果别一次拉太多行

    想用自然语言让 Claude Code 查数据库、出统计报表，而不是写后端接口。本文按官方 MCP 页面和 DBHub 说明讲：怎么连 PostgreSQL、MySQL、SQLite、输出太大怎么办、怎么让它先说明口径、怎么核对数字，附三段提示词。

    Claude0
  3. 03

    Claude Code 配 Figma MCP 还原设计稿：插件或一条命令安装，复制图层链接，小块小块地让它出代码

    想让 Claude Code 照 Figma 设计稿写前端代码。本文按 Figma 官方开发者文档讲：远程服务器地址、插件和手动两种安装、怎么复制图层链接、为什么要选小块、座位类型与调用次数限制，并给三段还原设计稿的提示词。

    Claude0
  4. 04

    Claude Code 管理 GitHub issue：用 gh 命令还是 GitHub MCP，怎么装、怎么限权、怎么让它分拣和回复 issue

    让 Claude Code 读 issue、分拣标签、起草回复、关联 PR，有两条路：装好 gh 命令行直接用，或连 GitHub 官方 MCP 服务器。本文按两边官方文档讲安装命令、令牌权限、只读模式，并给出三段分拣提示词和限权设置。

    Claude0
  5. 05

    Claude Code 写文档、README 和代码注释：先让它读代码再动笔，指定风格，写完逐条核对命令能不能跑

    想让 Claude Code 给项目补 README、接口文档和注释，又怕它编造不存在的命令和参数。本文按官方「Handle documentation」工作流讲：先找没有文档的代码、指定风格、写完核对，附四段可复制提示词和验证办法。

    Claude0
  6. 06

    用 Claude Code 整理电脑文件、批量重命名、处理表格：先出清单再执行，副本操作和权限设置

    Claude Code 不只能写代码，官方说它能在任何文件夹里搜索、编辑和整理内容。本文讲非程序员怎么用它整理下载文件夹、批量重命名、处理表格：先出整理清单、用副本操作、权限怎么设，附四段提示词和撤销办法。

    Claude0

0 条评论

登录 后参与评论

还没有评论，来抢沙发～