企业官网建设流程全解析

1. Windows 上 Claude Code 接 Playwright MCP 到底卡在哪

Claude Code 是 Anthropic 推出的命令行编程助手，它能通过 MCP（Model Context Protocol）挂载外部工具，其中 Playwright MCP 让它具备真实操作浏览器的能力：打开页面、点击元素、填表单、截图、抓取渲染后的 DOM。对做前端调试、自动化测试、爬虫验证的人来说，这等于给 AI 装了一双手。但 Windows 用户第一次接入时，十有八九会撞上同一个报错：Executable doesn't 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_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= 了解整体能力，实际调用走 API 地址 https://taotoken.net/api。先到控制台创建密钥，再把它写进环境变量，Claude Code 启动时会自动读取。

创建密钥的入口在 https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console&utm_campaign=rewrite ，生成后复制那串以sk-开头的字符串。密钥管理页面在 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite ，后续要轮换或吊销都在这里操作。如果你还没决定用哪个模型，可以先去模型对话页 https://taotoken.net/models?utm_source=taotoken_aicg_blog_end&utm_content=models&utm_campaign=rewrite 试一下响应风格，确认适合再做编码任务。

环境变量这样设置，PowerShell 里执行：

setx ANTHROPIC_BASE_URL "https://taotoken.net/api" setx ANTHROPIC_API_KEY "sk-你的密钥"

setx写入的是用户级持久变量，执行完必须重开一个 PowerShell 窗口才生效。想临时验证可以只在当前窗口用$env:ANTHROPIC_BASE_URL="https://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_HOST="https://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_source=taotoken_aicg_blog_end&utm_content=chat&utm_campaign=rewrite 对比一下对话效果，确认接入的模型符合预期。

如果你打算长期用 Claude Code 做编码和 Agent 任务，按量计费之外可以看看 Coding Plan，入口在 https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite ，适合高频调用场景。接入细节和协议说明在文档里 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite ，遇到字段对不上时优先查这里。

5. 本篇常见错排查

报错一：Executable doesn't 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 插件强制用它管理的 Chromium，executablePath覆盖不了。真要用 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 的安装是一次性的，装好之后日常启动只是拉起进程，速度很快。真正需要反复调的是指令措辞和页面等待策略，这两点决定了自动化任务的稳定性。