VSCode+Claude Code+Playwright-MCP 配置实操|零踩坑,1分钟打通AI浏览器自动化 1. 为什么 VSCode 里 Claude Code 调不动 Playwright-MCP很多人第一次在 VSCode 里把 Claude Code 和 Playwright-MCP 凑到一起都会遇到同一个画面插件装好了依赖也 npm install 过了结果在对话框里发一句“帮我打开某网站截个图”Claude 回你一句“找不到可用的 MCP 服务”或者干脆沉默。这不是你环境有多脏而是这套组合的配置链路有几个“必须踩准”的点错一个字符就全盘失效。先把三个角色的关系理清楚后面配置就不会瞎猜。VSCode 是承载一切的操作台Claude Code 是 Anthropic 官方的编辑器插件负责把你的自然语言翻译成工具调用指令Playwright-MCP 是微软开源的 MCP 服务器它把 Playwright 的浏览器能力包装成 MCP 协议标准接口让 Claude 能通过统一协议去调用浏览器Playwright 本身才是真正驱动 Chromium、Firefox、WebKit 干活的执行层。MCPModel Context Protocol你可以理解成 AI 世界的 USB 接口标准它规定了“AI 怎么发现工具、怎么传参、怎么拿结果”Playwright-MCP 就是插在这个接口上的一个浏览器外设。那为什么总失败我实测下来90% 的报错集中在三类一是配置文件的名字或位置不对Claude Code 只认项目根目录下特定文件名的配置二是浏览器驱动没装或装到一半断了Playwright 找不到可执行文件三是改完配置没重启 VSCode插件还在用旧的内存状态。这三类问题在后面的排障章节我会逐个给对照报错和修复命令。还有一个容易被忽略的点Claude Code 调用外部模型和工具时需要一条稳定的 API 通道。如果你用的是官方直连网络抖动会让 MCP 握手超时表现也是“找不到服务”。这时候用 TaoToken 统一 Key 和 API 通道会省心很多它把模型调用和工具调用的入口收敛到一个 Base URL 上配置里少写一堆东西排障时变量也少。TaoToken 的接入文档在 https://taotoken.net/api API Key 在 https://taotoken.net/api-keys 生成后面第三节我会把 Key、Base URL、Model ID 三件套写进可复制的配置片段里。这一节你先记住结论这套组合不是“装完就能用”而是“配置对了才能用”。配置本身不复杂复杂的是网上教程各说各话文件名一会儿是 claude.config.json 一会儿是 .mcp.json路径一会儿相对一会儿绝对。下面我按官方标准流程走一遍每一步都告诉你为什么这么做、错了会报什么。2. TaoToken 前置准备Key、Base URL 与模型通道在动 Playwright 之前先把 Claude Code 的模型通道打通否则你连“找不到 MCP 服务”这句报错都看不到因为请求根本没发出去。Claude Code 作为编辑器插件底层还是要调 Anthropic 兼容的模型接口你需要准备三样东西API Key、Base URL、Model ID。这三件套在后面的 settings 和 MCP 配置里都会出现缺一个就连不上。先说 Key 怎么拿。打开 https://taotoken.net/api-keys 登录后创建一个新的 API Key复制出来先存到安全的地方这个 Key 只显示一次。注意不要把它硬编码进会提交到 Git 的文件里后面我会用环境变量的方式引用。如果你还没有账号从 https://taotoken.net/api 进去按引导走就行整个流程不涉及任何系统级网络设置就是普通的网页注册和 Key 生成。Base URL 是 https://taotoken.net/api 注意结尾不要多加斜杠也不要自己拼 /v1 之类的路径Claude Code 和 MCP 客户端会按协议自己补全。Model ID 按你实际要用的模型填比如 claude-sonnet 系列或 claude-opus 系列具体可用的模型名在控制台 https://taotoken.net/console 里能看到复制准确的字符串大小写和连字符都不能错。为什么强调这三件套要写全因为 Claude Code 的配置文件和 MCP 的配置文件是两套东西但都依赖同一个模型通道。很多人只配了 MCP 的 playwright 节点忘了在 Claude Code 的 settings 里指定 Base URL 和 Key结果 MCP 服务起来了模型请求却 401表现还是“调用失败”。所以顺序上先保证模型通道通再保证工具通道通排障时才能二分定位。这里给一个最小验证思路在配置 MCP 之前先单独确认 Claude Code 能正常对话。如果连普通对话都报 401 或超时那问题在 Key 或 Base URL跟 Playwright 无关。等对话正常了再往下配 MCP。这个顺序能帮你省掉大量“到底是模型问题还是工具问题”的纠结。另外提醒一句TaoToken 在这里的角色是统一的 API 通道不是让你去改系统代理或做任何网络层操作。你只需要在配置里填 Base URL 和 Key剩下的握手、鉴权、路由都由通道处理。这也是我推荐先把通道理顺的原因变量少了后面 Playwright 的报错就纯粹是 Playwright 的问题。3. 可复制配置settings.json 与 MCP 服务片段这一节是全文的核心所有片段都可以直接复制但路径和文件名必须和你本地一致。我按“先模型通道、再 MCP 服务”的顺序给两份配置你照着改就行。第一份是 Claude Code 在 VSCode 里的 settings。打开 VSCode 的设置Ctrl, 或 Cmd,搜索 Claude Code找到“在 settings.json 中编辑”的入口把下面这段合并进去。注意 JSON 不能有注释下面为了讲解我单独说明每个字段实际粘贴时去掉注释。{ claudeCode.apiKey: 你的_TaoToken_API_Key, claudeCode.baseUrl: https://taotoken.net/api, claudeCode.model: claude-sonnet-4-20250514, claudeCode.enableMcp: true }apiKey 填你在 https://taotoken.net/api-keys 生成的那串baseUrl 固定 https://taotoken.net/api 不要加尾斜杠model 填控制台里看到的准确 Model IDenableMcp 必须为 true否则插件不会去读 MCP 配置。如果你不想把 Key 写死在 settings 里可以用环境变量在系统里设 TAOTOKEN_API_KEY然后这里写 ${env:TAOTOKEN_API_KEY}VSCode 会做变量替换。第二份是 MCP 服务配置。这里有个关键点Claude Code 读取的 MCP 配置文件官方标准是项目根目录下的.mcp.json而不是网上流传的 claude.config.json。文件名错了插件就找不到。在项目根目录新建.mcp.json内容如下。{ mcpServers: { playwright: { command: npx, args: [-y, playwright/mcplatest], env: { PLAYWRIGHT_HEADLESS: true, PLAYWRIGHT_TIMEOUT: 30000 } } } }command 用 npx 的好处是不用手动定位 run.js 路径npx 会自动解析 playwright/mcp 的入口避免路径写错。args 里的 -y 表示自动确认安装latest 保证拿到最新兼容版本。env 里 PLAYWRIGHT_HEADLESS 为 true 是无头模式不弹浏览器窗口适合后台跑想看实时操作就改成 false。PLAYWRIGHT_TIMEOUT 设 30000 毫秒页面加载慢时不容易超时。如果你更喜欢用 node 直接跑本地安装的包把 command 和 args 换成下面这样前提是你已经在项目里 npm install playwright/mcp。{ mcpServers: { playwright: { command: node, args: [./node_modules/playwright/mcp/lib/run.js], env: { PLAYWRIGHT_HEADLESS: true } } } }两种写法效果一样npx 版更省心node 版更可控。新手我建议先用 npx 版等跑通了再换 node 版做精细控制。注意.mcp.json必须放在你当前打开的 VSCode 项目根目录放在子文件夹里 Claude Code 读不到。依赖安装这块在项目根目录的终端里执行三条命令。第一条初始化项目已有 package.json 就跳过第二条装 Playwright 和 MCP 包第三条装浏览器驱动这条最容易被漏漏了必报 Executable doesnt exist。npm init -y npm install playwright playwright/mcplatest npx playwright installnpx playwright install会下载 Chromium、Firefox、WebKit 三套驱动国内网络慢的话加镜像参数npx playwright install --with-deps或设置 PLAYWRIGHT_DOWNLOAD_HOST 指向镜像源。驱动默认存在系统缓存目录不用手动管。配置写完必须重启 VSCode。不是关掉标签页是整个软件退出再打开或者在命令面板执行 Developer: Reload Window。改完.mcp.json和 settings 不重启插件用的还是旧状态这是“配置明明对了却还报错”的头号原因。4. 端到端验证从 Claude Code 指令到 Playwright 操作配置就绪后验证要分两步走先确认 MCP 服务被识别再确认浏览器真的动了。这样出问题时你能立刻知道卡在哪一层。第一步在 VSCode 里打开 Claude Code 面板输入/mcp或查看 MCP 服务列表不同版本入口略有差异一般在面板的设置或状态区。正常情况下你应该看到 playwright 这个服务处于 connected 或 running 状态旁边会列出它暴露的工具比如 browser_navigate、browser_take_screenshot、browser_click 等。如果这里显示 disabled 或压根没有 playwright说明.mcp.json没被读到回到第三节检查文件名和位置。第二步发一条自然语言指令做端到端验证。我常用的测试指令是用 playwright 打开 https://example.com获取页面标题然后截一张图保存到项目根目录。发送后观察 Claude Code 的输出。正常流程是Claude 先调用 browser_navigate 打开页面再调用 browser_take_screenshot 截图最后把结果返回给你。你会看到工具调用的中间步骤以及一张生成的截图文件。如果页面标题返回了 “Example Domain”截图文件也出现在项目根目录那整条链路就通了。这一步能成功说明四件事同时成立Claude Code 的模型通道TaoToken 的 Base URL 和 Key是通的MCP 协议握手成功Playwright-MCP 服务正常启动浏览器驱动完整可用。任何一环断了你都会在中间步骤看到对应的报错而不是笼统的“失败”。再给一个稍微复杂点的验证确认交互能力用 playwright 导航到 https://example.com找到页面上的 More information 链接点击它然后截图。这条指令会触发 browser_navigate、browser_click、browser_take_screenshot 三个工具。如果点击后截图显示跳转到了 IANA 的页面说明 Playwright 的可访问性树解析和元素定位都正常工作。Playwright-MCP 靠可访问性树做精准交互不依赖视觉模型所以对元素定位的准确性比纯截图方案高很多。验证通过后你就可以把日常的浏览器自动化任务交给它了填表单、抓数据、跑回归测试、批量截图。我实测下来简单页面操作基本一次成功复杂页面偶尔需要把指令拆细一点比如先导航、再等待、再操作这样比一句话塞太多动作更稳。如果验证失败别急着重装先看下一节的报错对照表按报错信息定位比盲目重装快得多。5. 常见报错排查401、local proxy failed、reading choices、OAuth这一节我把实际踩过的坑按报错原文列出来每条给原因和修复命令。你对照自己的终端输出找就行。报错一401 Unauthorized或invalid api key。这是模型通道的问题跟 Playwright 无关。原因通常是 settings.json 里的 apiKey 填错、过期或者 baseUrl 写成了带尾斜杠的地址。修复回到 https://taotoken.net/api-keys 重新生成 Key确认 baseUrl 是 https://taotoken.net/api 不带尾斜杠model 字符串和控制台一致。改完重启 VSCode。如果用了环境变量确认变量名拼写和 VSCode 是否重启加载了新变量。报错二local proxy failed或connection refused。这通常出现在 MCP 服务启动阶段npx 拉包时网络中断或者本地端口被占用。修复先在终端手动执行npx -y playwright/mcplatest看能否正常启动。如果卡在下载换镜像源或重试如果报端口占用检查是否有残留的 node 进程杀掉后重试。注意这里说的是本地进程通信不涉及任何系统级网络设置。报错三Cannot read properties of undefined (reading choices)。这个报错一般出现在模型返回格式不符合预期时常见于 baseUrl 指向了不兼容的端点或者 model 名写错导致返回了错误结构。修复确认 baseUrl 是 https://taotoken.net/api model 用控制台里准确的 ID不要自己拼。如果刚改过配置重启 VSCode 让插件重新加载。报错四OAuth相关报错比如OAuth token expired或failed to refresh token。Claude Code 插件本身有登录态如果你同时用了插件登录和 API Key可能冲突。修复在插件里退出登录改用 API Key 模式或者在 settings 里明确只保留 apiKey 配置去掉 OAuth 相关字段。重启后确认插件状态显示已连接。报错五Cannot find module playwright/mcp。依赖没装或装坏了。修复npm uninstall playwright/mcp后重新npm install playwright/mcplatest确认 Node.js 版本不低于 16。装完重启 VSCode。报错六browserType.launch: Executable doesnt exist。浏览器驱动缺失。修复npx playwright install网络慢加镜像。装完确认驱动目录有文件重启 VSCode。报错七Claude 提示“找不到 MCP 服务”。按优先级排查文件名是不是.mcp.json、是不是在项目根目录、有没有重启 VSCode、/mcp列表里 playwright 是不是 disabled。如果是 disabled在 Claude Code 里执行启用命令或检查.mcp.json的 JSON 语法有没有多余逗号。排查时有个通用技巧先在终端手动跑npx -y playwright/mcplatest如果这个都起不来那问题在依赖或网络跟 Claude Code 配置无关如果能起来再回去查.mcp.json和 settings。二分定位能省很多时间。6. 长期编码与 Agent 场景的通道选择跑通一次验证只是开始如果你打算把 Claude Code Playwright-MCP 用在日常开发里比如让 AI 帮你跑端到端测试、自动填测试数据、批量截图做视觉回归那模型通道的稳定性就变成长期问题。这时候建议把 Coding Plan 用起来它在 https://taotoken.net/coding-plan 针对长时间、高频次的编码和 Agent 调用做了优化比按次调用更适合持续跑自动化的场景。具体到配置上长期使用我建议把 Key 放到环境变量而不是写死在 settings避免误提交。.mcp.json里的 playwright 节点可以加上restartOnError和更细的allowedTools只放开你实际用到的工具减少误操作。比如只做截图和导航就只允许 browser_navigate 和 browser_take_screenshot。另外Playwright-MCP 支持通过参数指定浏览器和用户数据目录需要保留登录态时加--user-data-dir需要指定 Chrome 时加--browser chrome。这些参数写在.mcp.json的 args 数组里即可。改完同样要重启 VSCode。如果你在团队里推广这套组合把.mcp.json和 settings 片段做成项目模板新人 clone 下来填自己的 Key 就能用省掉重复配置。Key 的获取入口统一走 https://taotoken.net/api-keys 接入文档在 https://taotoken.net/api 模型对话调试可以用 https://taotoken.net/chat 快速验证通道是否正常。最后说个实际经验这套组合最耗时的从来不是配置本身而是排错时不知道卡在哪一层。把模型通道和工具通道分开验证先保证 Claude Code 能对话再保证 MCP 服务能启动最后保证浏览器驱动完整三层都通了剩下的就是写指令的事。配置一次后面基本不用再动。