Claude Code + Playwright MCP（Windows）完整指南：从 settings.json 到 Chromium 验证

1. Windows 上 Claude Code 接 Playwright MCP 到底卡在哪Claude Code 是 Anthropic 推出的命令行编程助手它能通过 MCPModel Context Protocol挂载外部工具其中 Playwright MCP 让它具备真实操作浏览器的能力打开页面、点击元素、填表单、截图、抓取渲染后的 DOM。对做前端调试、自动化测试、爬虫验证的人来说这等于给 AI 装了一双手。但 Windows 用户第一次接入时十有八九会撞上同一个报错Executable doesnt exist at C:\Users\admin\AppData\Local\ms-playwright\chromium-1179\chrome-win\chrome.exe。这个报错的根源不是配置写错了而是 Playwright MCP 插件强制依赖它自己管理的 Chromium 副本不会自动复用你系统里已经装好的 Edge 或 Chrome。它默认从官方 CDN 拉取浏览器二进制国内网络环境下这一步经常卡死或超时于是路径下空空如也MCP 启动时找不到可执行文件直接崩掉。很多人以为改.claude/config.json里的executablePath就能指向本地 Edge实测下来这条路走不通——插件仍然会去启动它自己那份 Chromium。这篇指南面向在 Windows 上使用 Claude Code 的开发者从settings.json配置骨架讲起把 Chromium 依赖、镜像加速、启动参数、连接验证一次讲透。读完你能拿到可直接复制的配置片段并在本地跑通第一个浏览器自动化任务。下面所有命令都在 PowerShell 里执行路径以 Windows 默认用户目录为准。2. 前置准备TaoToken 接入与 Claude Code 环境Claude Code 要调用模型需要一个稳定的 API 入口。TaoToken 提供兼容 Anthropic 协议的接入方式你可以在官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 了解整体能力实际调用走 API 地址 https://taotoken.net/api。先到控制台创建密钥再把它写进环境变量Claude Code 启动时会自动读取。创建密钥的入口在 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 生成后复制那串以sk-开头的字符串。密钥管理页面在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 后续要轮换或吊销都在这里操作。如果你还没决定用哪个模型可以先去模型对话页 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 试一下响应风格确认适合再做编码任务。环境变量这样设置PowerShell 里执行setx ANTHROPIC_BASE_URL https://taotoken.net/api setx ANTHROPIC_API_KEY sk-你的密钥setx写入的是用户级持久变量执行完必须重开一个 PowerShell 窗口才生效。想临时验证可以只在当前窗口用$env:ANTHROPIC_BASE_URLhttps://taotoken.net/api关掉窗口就失效。Node.js 建议用 18 以上版本node -v确认一下Claude Code 和 Playwright 都依赖它。装好 Claude Code 后claude --version能打印版本号就说明命令行入口通了。3. 可复制配置settings.json 骨架与 Chromium 依赖Claude Code 的 MCP 服务配置放在用户目录下的.claude文件夹里。Windows 上完整路径是C:\Users\你的用户名\.claude\settings.json。注意文件名是settings.json不是网上一些旧文章写的config.json写错文件名插件根本不会加载。先建目录再建文件New-Item -ItemType Directory -Force -Path $env:USERPROFILE\.claude notepad $env:USERPROFILE\.claude\settings.json把下面这段完整粘进去这是经过验证的骨架mcpServers里注册 playwright 服务env段控制浏览器下载行为{ mcpServers: { playwright: { command: npx, args: [ -y, modelcontextprotocol/server-playwright ], env: { PLAYWRIGHT_BROWSERS_PATH: 0, PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 0 } } }, playwright: { defaultBrowser: chromium, headless: false, viewport: { width: 1280, height: 800 } } }几个参数值得说清楚。PLAYWRIGHT_BROWSERS_PATH设为0表示浏览器装到项目本地而非全局缓存避免多项目互相干扰如果你希望全局共享删掉这一行即可。PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD设0是允许下载设1会跳过下载——但跳过之后 MCP 找不到 Chromium 照样报错所以第一次接入必须让它下载。headless设false能让你亲眼看到浏览器窗口动起来调试阶段强烈建议开着跑通后再改true提速。配置写好后关键一步是装 Chromium。国内直连官方 CDN 大概率失败先切镜像源$env:PLAYWRIGHT_DOWNLOAD_HOSThttps://npmmirror.com/mirrors/playwright/ npx playwright install chromium$env:只在当前窗口有效适合一次性安装。想永久生效用setx PLAYWRIGHT_DOWNLOAD_HOST https://npmmirror.com/mirrors/playwright/然后重开窗口。安装完成后浏览器会落在C:\Users\你的用户名\AppData\Local\ms-playwright\下目录名类似chromium-1179。你可以用dir确认chrome-win\chrome.exe确实存在这一步是后面所有验证的前提。4. 验证请求让 Claude Code 打开第一个页面配置和依赖都就位后重开 PowerShell进入你的项目目录直接启动claude。首次启动它会读取settings.json并拉起 playwright MCP 服务你会在日志里看到类似MCP server playwright connected的字样。如果没看到先别急着往下走回到第 5 节排查。连接成功后在 Claude Code 的对话里输入一句自然语言指令用 playwright 打开 https://www.baidu.com截图保存到当前目录正常情况下你会看到 Chromium 窗口弹出地址栏跳到百度页面加载完成后截图文件出现在项目目录里。这一步跑通说明从模型请求到 MCP 工具调用再到浏览器执行的整条链路是通的。如果想让 Claude 做更复杂的动作比如搜索关键词并读取结果标题可以继续输入在刚才的页面搜索框输入 Claude Code点击搜索把前 5 条结果的标题列出来Playwright MCP 会把页面可访问性树暴露给模型模型据此决定点哪个元素、填什么内容。实测下来结构清晰的页面识别准确率很高动态渲染的 SPA 偶尔需要你补充一句「等页面加载完再操作」。想验证模型本身的响应质量可以到 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentchatutm_campaignrewrite 对比一下对话效果确认接入的模型符合预期。如果你打算长期用 Claude Code 做编码和 Agent 任务按量计费之外可以看看 Coding Plan入口在 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 适合高频调用场景。接入细节和协议说明在文档里 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 遇到字段对不上时优先查这里。5. 本篇常见错排查报错一Executable doesnt exist at ...chromium-1179\chrome-win\chrome.exe这是最高频的问题本质是 Chromium 没装成功。先确认镜像变量在当前窗口生效再重跑npx playwright install chromium。如果下载中途断了删掉AppData\Local\ms-playwright下残缺的目录重来。装完用dir核对chrome.exe真实存在路径里的版本号可能不是 1179以实际目录为准。报错二MCP 服务连不上日志里没有playwright connected先检查文件名是不是settings.json很多人写成了config.json。再检查 JSON 语法多一个逗号或少一个引号都会导致整个文件解析失败可以用在线 JSON 校验工具过一遍。最后确认npx在 PATH 里npx --version能输出版本号。报错三浏览器启动了但页面空白或超时多半是网络问题目标站点加载慢。把headless保持false观察实际卡在哪一步。如果是 HTTPS 证书问题检查系统时间是否准确。动态页面可以要求模型「等待 networkidle 再截图」减少时序问题。报错四改了配置但行为没变Claude Code 只在启动时读一次settings.json改完必须完全退出再重开。setx设的变量同理不重开窗口不生效。这是最容易忽略的一点排查时先做这一步。报错五想用本地 Edge 却始终走 Chromium前面说过MCP Playwright 插件强制用它管理的 ChromiumexecutablePath覆盖不了。真要用 Edge只能绕开 MCP 自己写 Node 脚本用chromium.launch({ executablePath: C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe })手动启动再让 Claude 调用这个脚本。这条路灵活但失去了 MCP 的即插即用按需选择。6. 后续怎么用从跑通到日常跑通第一个截图任务后你可以把 Playwright MCP 用在更实际的场景让 Claude 打开本地开发服务器http://localhost:3000检查控制台报错、自动填登录表单验证流程、批量截图做视觉回归。这些任务的关键是把指令写具体告诉它打开哪个地址、操作哪个元素、期望什么结果。配置层面还有两个可调项。viewport按目标站点调整移动端页面设成375x812更贴近真实。headless在 CI 环境设true本地调试设false。如果项目多把PLAYWRIGHT_BROWSERS_PATH去掉让浏览器全局共享能省下重复下载的空间。最后提醒一句settings.json里不要塞密钥密钥走环境变量配置文件可以放心提交到版本库。Chromium 的安装是一次性的装好之后日常启动只是拉起进程速度很快。真正需要反复调的是指令措辞和页面等待策略这两点决定了自动化任务的稳定性。