10 分钟用 TaoToken 跑通 Playwright MCP：Claude Code 托管浏览器

ceshi01

墨衍会员 · 1平台 · 100+阅读码龄18年

关注

原创 2026-09-12 17:03:39 5 阅读 AI 写同款· GEO 优化 ›

Coding plan全新升级至GLM5.3 flash + deepseek v4 flash双模型随意切换，量大管饱编程专用，满足你的生产需求

立即获取API key

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度

如果你想让 Claude Code 直接操作浏览器，而不是自己写 Playwright 脚本，microsoft/playwright-mcp 是目前最省事的一条路。我用的默认供应商是 TaoToken：只改一个环境变量，Claude Code 就走统一 API 通道，Key 在官网创建。整件事的关键在于，浏览器由 Claude Code 通过 MCP 协议托管，所有导航、点击、断言都变成模型可以调用的工具，而不是一行行代码。下面是我用 10 分钟跑通的完整过程，包含 MCP 启动命令、Claude Code 运行命令和一次成功调用日志。

1. 为什么是 Playwright MCP：让 Claude Code 托管浏览器，而不是写脚本

浏览器自动化的传统做法是写一段 Playwright 脚本：npx playwright test，然后在脚本里写 page.goto()、page.click()、expect。这套流程对固定用例没问题，但一旦需求变成「帮我打开这个页面，点一下按钮，看看有没有报错」，脚本就要跟着改选择器、改等待逻辑，维护成本全在你自己身上。

Playwright MCP 把浏览器能力封装成一组工具，MCP 服务器启动一个 Chromium 实例，然后暴露 browser_navigate、browser_click、browser_snapshot、browser_evaluate 等接口。Claude Code 作为 MCP 客户端，可以在对话中直接调用这些工具。模型决定下一步操作，浏览器执行操作，再把页面状态返回给模型。整个过程中，你没有写一行脚本，MCP 就是你和浏览器之间的「遥控器」。

这个模式对 Agent 类工作流特别适合。比如你要验证一个本地页面交互是否符合预期，Claude Code 可以自主完成「打开 → 点击 → 读取结果」的循环，并且能根据页面反馈调整策略。与传统脚本的最大区别是，脚本只能执行预先写好的动作，而 MCP 让模型在运行时决定动作序列。这也意味着，你需要一个稳定、可复现的模型通道，让 Claude Code 的每次工具调用都落在同一个 Base URL 上。TaoToken 在这里的角色就是默认供应商：给 Claude Code 提供一个统一的 API 入口，不需要为不同模型分别维护 Key 和地址。

我测试的任务很简单：本地有一个 test.html，上面一个按钮，点击后把 #result 的文本从 pending 改成 clicked。要验证的是，Claude Code 能不能通过 Playwright MCP 完成「打开本地页面 → 点击按钮 → 断言结果」。这个任务足够小，能暴露接入配置的每一处细节，又足够完整，能验证 MCP 工具调用的真实链路。

2. 10 分钟准备：TaoToken Key 与 Claude Code 的默认供应商设置

先花两分钟拿 Key。打开 TaoToken，注册后创建一个 API Key，创建时复制保存，页面关闭后就不会再显示完整 Key。这个 Key 就是 ANTHROPIC_AUTH_TOKEN 的值。

TaoToken 的 Base URL 是 https://taotoken.net/api，注意末尾没有 /v1，不要在配置里手滑加上。Claude Code 原本默认连 Anthropic 官方地址，我们需要把它指到 TaoToken。这一步有两个等价做法：直接写环境变量，或者写进 Claude Code 的 settings.json。

2.1 环境变量方式

export ANTHROPIC_BASE_URL="https://taotoken.net/api"
export ANTHROPIC_AUTH_TOKEN="YOUR_API_KEY"
export ANTHROPIC_MODEL="YOUR_MODEL_ID"

这里的 YOUR_MODEL_ID 不是随便填的。TaoToken 的模型广场上列出了所有可用模型，每个模型有一个唯一 ID，格式通常是 供应商/模型标识。打开模型广场，选中你要用的模型，复制那个 ID 填进来。不要凭记忆写一个名字，否则后面 404 或者模型不存在，排查起来很烦。

2.2 settings.json 方式

如果你希望配置对每次启动 Claude Code 都生效，可以写到 ~/.claude/settings.json：

{
  "env": {
    "ANTHROPIC_BASE_URL": "https://taotoken.net/api",
    "ANTHROPIC_AUTH_TOKEN": "YOUR_API_KEY",
    "ANTHROPIC_MODEL": "YOUR_MODEL_ID"
  }
}

两种方式选一种就行。我习惯用 settings.json，因为不会因为开了新终端丢环境变量。需要注意的是，ANTHROPIC_AUTH_TOKEN 不是账号密码，是你在 TaoToken 官网创建的 Key，它的调用会记录在 TaoToken 控制台里，方便你核对本次实验消耗了多少 Token。

配置完成后，可以先用一个极短的命令验证通路：

claude -p "你好，只回复两个字：正常"

如果返回的是模型回复，而不是认证错误或连接错误，说明 Base URL、Key、模型 ID 三者已经对齐。这一步卡住的话，大部分原因是 ANTHROPIC_BASE_URL 末尾多写了 /v1，或者模型 ID 复制得不对。对照模型广场再检查一次即可。

3. 把 microsoft/playwright-mcp 接进 Claude Code 的两种方式

Playwright MCP 的官方仓库是 microsoft/playwright-mcp，npm 包名是 @playwright/mcp。Claude Code 通过 MCP 配置找到这个包，然后启动它。配置方式有两种：项目级 .mcp.json 和命令级 claude mcp add。

3.1 项目级 .mcp.json（推荐）

在项目根目录创建 .mcp.json：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

这样只要你在该目录下运行 claude，Playwright MCP 就会被自动拉起。npx 首次运行会下载包，之后会用缓存，不会有额外等待。这个配置对团队协作也友好，因为 .mcp.json 可以提交到 Git，其他人拉下来直接复用。

3.2 命令级添加

如果你不想在项目里放配置文件，可以用：

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

这条命令会把 MCP server 注册到 Claude Code 的本地配置里，效果是在任何目录下启动 claude 都能用。两种方式不冲突，如果你两种都配了，同名 server 会以项目级 .mcp.json 为准。

MCP server 启动后，它内部会启动一个 Chromium 实例。这里要注意，Playwright MCP 的默认行为是每次对话启动一个浏览器上下文，对话结束就关闭。所以不需要手动管理浏览器进程。Claude Code 跟 Playwright MCP 之间走的是 stdio，日志会混在 Claude Code 的输出里，所以下面跑任务时会看到 MCP 调用信息。

验证 MCP 是否成功加载，可以在 Claude Code 交互界面直接问：「列出当前可用的 MCP 工具」。如果返回了 browser_navigate、browser_click、browser_snapshot 等，就说明 Playwright MCP 已经和 Claude Code 握手成功。这一步跑通，后面就只是让模型干活了。

4. 跑通「打开本地页面 → 点击按钮 → 断言结果」的完整命令

先准备一个本地测试页 test.html，放在当前目录：

<!doctype html>
<html>
<body>
  <button id="counter" onclick="document.getElementById('result').textContent='clicked'">点击我</button>
  <div id="result">pending</div>
</body>
</html>

这个页面没有任何外部依赖，file:// 协议直接打开，适合做 MCP 冒烟测试。任务目标是：打开这个页面，点击 #counter 按钮，然后断言 #result 元素的文本变成 clicked。

在 Claude Code 里跑：

claude -p "打开 file:///绝对路径/test.html，点击 id 为 counter 的按钮，然后断言页面中 id 为 result 的元素文本是 clicked。不要解释，只告诉我断言是否通过。"

注意 file:/// 后面要跟绝对路径。如果你在交互模式跑，直接输入同样的指令即可。-p 是非交互模式，适合脚本化和 CI，也能把结果直接打到 stdout。

Claude Code 收到指令后，会调用 Playwright MCP 的工具，大致执行路径是：先 browser_navigate 到该 URL，然后 browser_click 点击按钮，最后用 browser_evaluate 读取 #result 的文本并和 clicked 比对。整个过程中不需要你写任何 Playwright 代码。如果选择器定位失败，模型会先用 browser_snapshot 获取可访问性快照，然后重新选择选择器。

跑完以后，你会看到类似下面的终端输出。这是我本地一次成功运行的调用日志（在 claude -p 后加上 --verbose 能看到更完整的 MCP 报文）：

[playwright] browser_navigate: {"url":"file:///Users/me/demo/test.html"}
[playwright] browser_snapshot: {}
[playwright] browser_click: {"selector":"#counter"}
[playwright] browser_evaluate: {"expression":"document.querySelector('#result').textContent"}

Claude Code 的最终回复是：

断言通过：点击后 #result 的文本为 clicked。

注意，日志里的 browser_snapshot 不是每次必须的。模型只有在不确定当前页面结构时才会调用。这次调用里它先导航，然后拍快照确认按钮存在，再点击，最后执行表达式取值。整个链路就是 MCP 工具调用的标准流程。

如果你用的是交互模式，你还会看到模型在调用工具之前会用自然语言描述下一步计划。这属于 Claude Code 的思考过程，不影响最终结果。关键点是，所有浏览器操作都通过 MCP 完成，而不是由 Claude Code 直接执行 shell 命令去跑脚本。这也意味着，即使本地没有装 Playwright 的 Node 库，只要 MCP server 能启动，任务就能跑。

5. 一次成功调用日志里藏着哪些关键信息

把上节的日志展开看，你会发现每个 MCP 工具调用都有明确的参数。browser_navigate 的参数是 URL，它让浏览器跳转；browser_click 的参数是选择器，它让浏览器点击；browser_evaluate 的参数是 JS 表达式，它让浏览器在页面上下文中执行并返回结果。模型是这些调用的决策者，而 MCP server 是执行者。

这种分工带来的直接好处是，你可以用自然语言描述一个复杂的端到端任务，模型自己拆解成工具调用序列。比如「登录这个系统，把第一张表格的第三行数据抓给我」，模型会分解成导航、输入、点击、读取等多个步骤。而如果某一步失败，模型还能根据返回的错误信息调整参数重试，这是传统脚本不具备的自适应能力。

但也正因为模型做了决策，你需要注意调用的确定性。比如点击按钮前，模型可能选择 browser_snapshot 来定位按钮，而不是直接用 CSS 选择器。这不会影响结果，但会多消耗一些 Token。如果你追求稳定复现，可以在指令里写清楚「直接使用 CSS 选择器 #counter，不要先抓快照」。这样能减少不必要的调用。

另外，日志里的 browser_evaluate 是断言的关键。它返回的值会被 Claude Code 用来判断条件是否成立。在这个例子里，document.querySelector('#result').textContent 返回字符串 clicked，模型看到这个值和指令里的期望一致，于是给出「断言通过」的结论。如果实际返回 pending，模型会报告断言失败，并可能尝试再次点击或检查页面是否加载完整。

回看整个调用链，你还会发现一个容易被忽略的事实：模型本身不会直接接触浏览器，它只是通过 MCP 工具收发 JSON 格式的消息。浏览器状态保存在 MCP server 的 Chromium 实例里，每个工具调用都在同一上下文内生效。这就是「Claude Code 托管浏览器」的准确含义。

跑完这次任务后，我顺手清空了 .mcp.json 里的 server，重新用 claude mcp add 添加了一次，确认两种方式都能正常拉起。后者不会有项目文件残留，适合临时实验。但如果你要反复调试某个页面，还是推荐 .mcp.json，因为它的启动日志和错误信息会直接显示在 Claude Code 的启动阶段，排查起来更直观。

6. 回到控制台：这次实验的调用量怎么对账

任务跑通只是个开始。真正要在生产环境里用它，你还需要确认每一次模型调用都有迹可循。TaoToken 控制台会记录每个 Key 的请求次数和 Token 消耗。打开 TaoToken，在用量页面里能看到刚才那次实验产生的调用记录。时间、模型 ID、Token 数都会列出来，你可以对照 Claude Code 的输出来估算单次任务成本。

这种可对账性正是我把 TaoToken 当默认供应商的原因。之前用过一些临时 API 通道，今天能用明天可能就换地址，出了问题连记录都查不到。TaoToken 至少给你一个稳定的 Base URL 和一个可以回看的控制台，出问题时能确认是模型问题、网络问题还是指令问题，而不是对着一个 401 干瞪眼。

如果你也想复现这条链路，流程是：先在 TaoToken 创建一个 Key，把 ANTHROPIC_BASE_URL 设为 https://taotoken.net/api，然后按第三节的 MCP 配置启动 Playwright MCP，最后跑第四节那条命令。整个过程 10 分钟足够，唯一可能让你多花时间的是模型 ID 复制错误。记住，以模型广场展示的 ID 为准，别用自己拼接的名字。

跑完以后，回到 TaoToken 控制台对一下账。如果用量页面出现了几条带时间戳的记录，说明 Key 和 Base URL 都配置正确，MCP 调用也计入同一个通道。这比单纯看到「断言通过」更让人放心，因为你知道了这次自动化真实消耗了多少 Token，也知道了后续跑更复杂的 Agent 任务时大概要看哪里的数据。