浏览器自动化 MCP：让模型读结构，别让它猜像素

它替你干掉什么：干掉「我自己开个浏览器点一遍」那一圈

第一条立刻能跑的用法

# ① 装（官方 README 给的就是这条）
claude mcp add playwright npx @playwright/mcp@latest

# ② 更克制的装法：profile 只留在内存里，不落盘，指定浏览器
npx @playwright/mcp@latest --isolated --browser chrome

# ③ 第一句话这么说（先起好本地服务，再让它自己看）：
打开 http://localhost:5173，先 browser_snapshot 看一眼页面结构，
点「登录」，填 demo / demo，提交后把 console 里的报错原样贴给我。

注意这句话里没有「截个图给我看」。官方给 browser_snapshot 写的工具描述是一句大白话：「Capture accessibility snapshot of the current page, this is better than screenshot」；而 browser_take_screenshot 的描述直接堵死了另一条路：「You can't perform actions based on the screenshot, use browser_snapshot for actions」。截图在这套设计里只负责给人看，不负责给模型指路。

机制：它凭什么有效——因为它把「这个按钮」变成了一个可引用的名字

为什么它顺带还更省

无障碍树是文本，模型能在后续每一步里直接引用其中的节点；截图是图片，既要 vision 能力，又无法被 grep、无法被下一句话指名。省 token 只是结果，可引用才是原因。

但快照不是万能的

canvas、WebGL、纯图形的画布、以及「这两个元素有没有对齐」这类视觉回归问题，无障碍树里根本没有对应节点。这就是 --caps=vision（坐标交互）和截图工具至今还在的原因——它们是补集，不是备份。chrome-devtools-mcp 同时提供 take_snapshot 与 take_screenshot，也是同一个分工。

真实用法与边界：九个条目，分三层装

第一层 · 本地驱动（先把这层装对）

• @playwright/mcp。替你干掉：改完前端自己点一遍。怎么装：见 01 节；能力分组 vision / pdf / devtools / config / network / storage / testing 全是 opt-in，用 --caps= 按需开，默认只给核心那一组。什么时候别装：你没有能在本地跑起来的页面时，它是纯占位。
• chrome-devtools-mcp（据 GitHub 仓库页 2026-09 约 5.17 万 star / 3.6 千 fork，Apache-2.0）。替你干掉：手动录 performance trace、翻 Network 面板对着瀑布图发呆。怎么装：npx -y chrome-devtools-mcp@latest，需 Node LTS + Chrome 稳定版；独有工具是 performance_start_trace / performance_stop_trace / performance_analyze_insight / list_network_requests / get_network_request / lighthouse_audit / emulate（CPU 与网络降速）。什么时候别装：只想点页面的话别装——它的 click / fill / navigate_page / take_snapshot 和上一个大面积重叠，两个常驻就是让模型抛硬币。另有两条要知情：默认会上报使用统计（--no-usage-statistics 关掉），性能工具可能把 trace 相关 URL 发给 Google CrUX API。
• --extension 模式（Playwright 扩展，Chrome/Edge）。替你干掉：为了让 agent 看到登录后的页面而重新走一遍登录流程。怎么装：装扩展后 npx @playwright/mcp@latest --extension，直接接管你正在用的那个浏览器实例。什么时候别装：那个浏览器里还开着网银和公司后台的时候——它接管的是整个实例，不是一个标签页。

第二层 · 同样的能力，但不接 server

• Playwright Agents（官方文档源文件）。替你干掉：每次都让模型从零把流程重点一遍。怎么装：npx playwright init-agents --loop=claude（另有 vscode / codex / opencode），生成三个角色——planner 探索应用产出 Markdown 测试计划、generator 把计划变成 Playwright 测试文件、healer 跑测试并自动修复失败用例，落在 specs/ 与 tests/ 里。什么时候别用：一次性排查、根本不打算留下回归测试时，这套是负担。
• anthropics/skills · webapp-testing（据 GitHub 仓库页 2026-09 约 17.6 万 star）。替你干掉：MCP 连接本身——它让模型直接写 Playwright Python 脚本。怎么装：/plugin install example-skills@anthropic-agent-skills；核心是 scripts/with_server.py（--server "npm run dev" --port 5173 起服务再跑脚本）和一棵决策树：静态 HTML 直接读文件找选择器，动态应用先 page.wait_for_load_state('networkidle') 再 inspect。什么时候别用：你要跨多轮对话保持同一个浏览器上下文时，server 形态更省事。
• browser-use（据 GitHub 仓库页 2026-09 约 11.4 万 star，MIT）。替你干掉：多步骤的自主浏览任务（「去这个站找到 X 再填个表」）。怎么装：uv add browser-use 做库用，或 browser-use skill install 把它作为 skill 装给现有 agent——又一个同一能力做成 skill 而非 server 的例子。什么时候别装：可控性要求高的场景。自主 agent 的长处是完成率，短处正是你无法预知它点了什么。

第三层 · 远程浏览器与抓取（边界在这一层）

• Stagehand（据 GitHub 仓库页 2026-09 约 2.42 万 star，MIT）。替你干掉：为一次性提取手写一堆脆弱选择器。怎么装：npm i @browserbasehq/stagehand；三件套 act() 执行自然语言动作、observe() 找可操作元素、extract() 按 Zod schema 取结构化数据，可以和普通 Playwright locator 混写。什么时候别装：选择器本来就稳定时，直接写 locator 更快、更便宜、更可复现。
• Browserbase MCP（托管端点 https://mcp.browserbase.com/mcp，六个工具 start / end / navigate / act / observe / extract）。替你干掉：本地没有、也不想装浏览器时的那台机器。怎么装：托管端点需 BROWSERBASE_API_KEY + BROWSERBASE_PROJECT_ID。什么时候别装：先知情——它的开源仓库已于 2026-07-20 归档，README 自称不代表其现行生产服务。要用就用托管端点并去官网核当前文档，别照着归档仓库配。
• firecrawl-mcp（据 GitHub 仓库页 2026-09 约 7.4 千 star，MIT）。替你干掉：把一批别人的网页变成干净 markdown。怎么装：npx -y firecrawl-mcp 配 FIRECRAWL_API_KEY；工具 firecrawl_scrape / firecrawl_search / firecrawl_crawl / firecrawl_map / firecrawl_interact。什么时候别装：你要的是「在我自己的应用里点一遍」——那是测试，不是抓取，用第一层。
• 反面教材：@modelcontextprotocol/server-puppeteer。替你干掉：什么也不。它是 MCP 早期的参考实现，已于 2025-05-29 随 servers-archived 归档为只读。之所以点名，是因为网上大量教程还在教 npx -y @modelcontextprotocol/server-puppeteer——照抄博客不看仓库状态的典型代价。

测试与抓取的分界线

你的应用、你有源码、需要断言 → 第一层或第二层，产出应该是一个能重跑的 .spec.ts。别人的站、只要数据、没有断言 → 第三层，产出是数据。判断标准很简单：这次跑完，有没有东西值得留下来明天再跑一次？有就是测试，没有就是抓取。

代价与替代品：它不是安全边界，这句是官方自己写的

三条要知情的红线

• 官方原话：「Playwright MCP is not a security boundary」。它还带一个明确标注为 RCE 等价的工具 browser_run_code_unsafe（在 server 进程里执行任意 JavaScript）——默认不开，也别去开。
• chrome-devtools-mcp 的免责同样直白：它把浏览器实例里的内容暴露给 MCP 客户端，可以检查、调试、修改浏览器或 DevTools 里的任何数据；官方建议别在里面放你不愿意共享的敏感信息。
• 页面正文就是注入面。模型读到的每一个字都来自那个页面，包括藏在 DOM 里写给 AI 看的指令。Claude Code 官方文档在 MCP 页上写着：会抓取外部内容的 server 会让你暴露在提示注入风险下。这是下一期 Skill 12 的正题。

能立刻拧的四个旋钮

• --isolated：profile 只留在内存，不落盘；要登录态就配 --storage-state 显式给一份。
• --allowed-origins / --blocked-origins：分号分隔的白/黑名单，把浏览器能访问的域钉死。
• 别开 --allow-unrestricted-file-access：它放开的是工作区之外的文件。
• --caps= 只开这次要用的那一组。七个能力分组全是 opt-in，这个默认值本身就是一条建议。

三种什么都不装的做法

• npx playwright codegen：你自己点一遍，它录成代码。一次性验证用它比接 server 快得多。
• 把测试写进 CI：真正该重复跑的东西属于 CI，不属于每次对话。这也是 Playwright Agents 让 generator 产出 .spec.ts 的理由。
• 贴 HTML：静态页面直接把源码贴进去，比起一个浏览器实例的开销，这一条常常被忘掉——官方 webapp-testing 的决策树第一问就是它。