10 分钟用 TaoToken 跑通 Playwright MCP 的浏览器自动化

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

1. 先跑通一个小闭环：Playwright MCP + Claude Code + TaoToken

在 Claude Code 里接 Playwright MCP 做浏览器自动化，模型供应商我选了 TaoToken。TaoToken 是一个统一 API 网关，它提供兼容 Anthropic 接口的 Base URL，配合你的 API Key，就能让 Claude Code 把模型请求统一发到这一个入口。这样 MCP 工具链和具体模型解耦：工具是 Playwright MCP，客户端是 Claude Code，模型由 TaoToken 按你的选择路由。整个过程不要求你写一行 Playwright 脚本，只要在对话里描述“打开某个页面、点击哪个元素、断言什么结果”，MCP 工具就会把动作翻译成浏览器操作。十分钟内就能跑通一次“打开页面 → 点击 → 断言”的浏览器自动化，而且每次调用的 token 消耗都可以在控制台回看。

这里有一个常见的误解：MCP server 本身不包含模型，它只是把浏览器能力包装成工具；模型负责决定“下一步调用哪个工具”。所以你在 Claude Code 里配置的模型供应商，决定了整个 Agent 的“判断力”。把模型供应商设成 TaoToken 后，你可以用同一个 Playwright MCP 环境，快速对比不同模型在浏览器自动化任务上的指令理解和工具调用能力。这对那些需要稳定操作网页的 AI 应用来说，等于多了一个可复现的对照基线。这次要做的，就是在这个基线上完成一次最简单的浏览器自动化：打开 example.com，点击页面里的 More information 链接，然后断言跳转后的页面包含 IANA。下面是完整步骤。

2. 拿到 TaoToken 的 Key：注册、建 Key、选模型

先去 TaoToken 注册。控制台首页能看到“API Key”和“模型广场”两个入口。创建一个 Key 后，把密钥字符串复制到临时文件里，注意它只显示一次。模型广场列出了所有可用的模型 ID，每个 ID 对应上游模型、上下文窗口和单价。这里有一个纪律：模型 ID 必须从模型广场复制，不要用网上教程里的版本号，因为同一个模型名在不同时期可能指向不同版本。TaoToken 的 Base URL 固定为 https://taotoken.net/api，末尾没有 /v1。这个地址在配置 Claude Code 时填到 ANTHROPIC_BASE_URL 里，API Key 填到 ANTHROPIC_AUTH_TOKEN 里。官网 URL 用于注册、查看调用量和发票信息，不能和 Base URL 混用，更不能在接口配置里带上 UTM 参数。

拿到 Key 后，建议先在控制台里确认账户状态是正常，而不是“未实名”或“欠费”。调用记录页面会按时间列出每次请求的模型、输入 token、输出 token、状态码和耗时。这个页面就是我们验证“Playwright MCP 是否真的通过统一网关运行”的依据。后续所有浏览器自动化动作产生的模型调用，都会出现在这里。理解这一点很重要：MCP 工具每执行一步，Claude Code 就会调一次模型来生成下一步指令，因此一次自动化任务往往对应多次模型调用。看到调用记录里有来自同一个会话的多条请求，说明这个网关确实在承载这次任务。

3. 在 Claude Code 里把模型供应商切到 TaoToken

打开终端，先确保本地已经安装 Claude Code 和 Node.js。Claude Code 的配置目录在 ~/.claude，我们在 ~/.claude/settings.json 的 env 字段里写入环境变量。这样写：

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

将 YOUR_API_KEY 换成你刚才复制的密钥，将 YOUR_MODEL_ID 和 YOUR_FAST_MODEL_ID 换成在模型广场上看到的两个模型 ID：主模型选一个性能好的，快速模型选一个便宜的。保存后，启动 claude。在对话框里随意说一句“请用中文回复”来验证连通性。如果配置正确，模型会正常回答；如果报 401，说明 Key 错误；报 404，说明 Base URL 或模型 ID 不对。这里的 Base URL 必须与官网地址区分：官网落地页用于注册和管理，不能出现在配置文件里，配置文件里只写上面的 API 地址。

Claude Code 会为不同的内置任务选择不同模型，例如标题生成、工具结果摘要这类轻量任务会走 ANTHROPIC_SMALL_FAST_MODEL。如果你只设置了 ANTHROPIC_MODEL，很多后台任务仍然会尝试连接默认模型，容易超时。所以建议把两个环境变量都填上。另外，settings.json 是全局配置，意味着所有项目都生效；如果你希望只在某个项目里使用，可以在项目根目录放一个 .claude/settings.local.json，写法相同。这样配置后，Claude Code 的所有模型请求都会发往 TaoToken 的 API 地址。验证通过后，下一步就可以接 Playwright MCP 了。

有一点要特别说明：ANTHROPIC_MODEL 的值不是 Anthropic 官方模型名，而是你在模型广场选中的 ID。这个 ID 可能是 anthropic/claude-sonnet-4，也可能是 deepseek/deepseek-v3，取决于上游渠道。统一网关只负责把请求路由到对应的上游，不会修改模型名称。所以你在日志里看到的模型 ID 会与广场上一致。如果你在配置后使用 /model 命令切换模型，Claude Code 可能会覆盖环境变量里的值，导致请求回到默认地址。遇到这种情况，重新启动 claude 或检查 /model 选择的状态即可。

4. 启动 Playwright MCP 并跑一次浏览器自动化

Playwright MCP 的官方包名是 @playwright/mcp，在 Claude Code 里用 claude mcp add 注册即可。执行：

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

这条命令会把名为 playwright 的 MCP server 写入 Claude Code 的本地配置。如果你更想用项目级配置，在项目根目录创建 .mcp.json，内容如下：

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

两种方式等价。保存后重启 claude，输入 /mcp，看到 playwright 的状态是 connected，并且工具列表里出现 browser_navigate、browser_click、browser_snapshot、browser_assert_text 等，就说明加载成功。注意：MCP server 是否加载成功，和模型供应商没有关系。即使你把模型配置指向自定义 Base URL，如果 MCP 没有连接，浏览器工具也不会出现。所以这一步要单独验证。

接下来开始任务。我给 Claude 的指令是：“打开 https://example.com，点击页面里的 More information 链接，然后断言跳转后的页面标题或内容包含 IANA。”这个任务覆盖了浏览器自动化三个基本动作：导航、点击、断言。为了让你能精确复现，我不会手工点击页面，而是让模型用 Playwright MCP 的工具逐步执行。为什么选 example.com 而不是本地构建的页面？因为 example.com 由 IANA 维护，结构固定，且不依赖登录态，适合作为自动化冒烟测试的目标。点击 More information 之后跳转到 iana.org 的保留域名页，这个行为十几年没变过，因此可以稳定断言结果。如果你在公司内网，可能访问不了外部站点，那就把 URL 换成本地 http://localhost:8080 或一个内网页面，步骤完全一样。下面是一次成功的运行日志（模型 ID 以你在模型广场的选择为准）。实际对话里，模型还会先调用 browser_snapshot 获取可点击元素，这里为了阅读方便只保留核心工具调用。

User > 打开 https://example.com，点击 More information 链接，断言页面包含 IANA。
Assistant > 我分三步执行。先导航到目标页面。
  [调用工具] browser_navigate(url="https://example.com")
  [工具返回] ok, title="Example Domain", url="https://example.com"
  [判断] 页面已就绪，找到 "More information" 链接。
  [调用工具] browser_click(selector="a")
  [工具返回] ok, url="https://www.iana.org/domains/reserved"
  [调用工具] browser_assert_text(text="IANA")
  [工具返回] ok, 断言通过。
Assistant > 完成。点击后跳转到 IANA 保留域名页面，页面包含 "IANA"。

日志里每一步都对应一次模型决策和工具调用。实际对话中，工具之间还会插入 browser_snapshot 来获取页面可访问元素，我这里做了简化。跑完这次任务后，打开控制台的调用记录，你会看到时段内有多条请求，状态码全是 200。每一条请求的模型 ID、token 数和耗时都可以展开查看。这样你就获得了一次可复现的“TaoToken + Playwright MCP + Claude Code”的基线运行证据。

为什么说这个任务验证了三层链路？第一层是 API 连通性，Claude Code 发出的所有模型请求都必须先到达 https://taotoken.net/api 才能拿到回复；第二层是 Playwright MCP 的工具执行链路，browser_navigate 和 browser_click 必须真实控制浏览器，任何一步失败都会让后续断言失去意义；第三层是模型决策链路，模型要能理解“点击 More information”这个指令，并把它映射到 browser_click(selector="a")。这三层缺一不可。有些教程只验证了第一层，比如用 curl 发一条消息，但那不能证明浏览器自动化能走通。我们把三层一起串起来，得到的才是一个完整的可复现基线。

5. Playwright MCP 配置没生效时，先查这三个位置

第一次配置容易遇到三个问题。第一个是环境变量残留。如果你之前配置过其他 Anthropic 兼容网关，ANTHROPIC_BASE_URL 可能还是旧地址。在启动 Claude Code 前，运行 env | grep ANTHROPIC 检查当前终端环境，如果有残留，用 unset ANTHROPIC_BASE_URL ANTHROPIC_AUTH_TOKEN ANTHROPIC_MODEL 清理后再启动。第二个是 MCP 服务器没有真正连接。claude mcp add 命令只负责写入配置，如果你是在旧终端里启动的，它不会自动生效。/mcp 面板显示失败时，先手动执行 npx -y @playwright/mcp@latest，确认本地能拉取包且没有依赖报错。第三个是模型 ID 失效。模型广场会不定期调整模型 ID，旧文章里抄来的 ID 可能已经 404。以控制台页面展示为准，不要相信任何截图里的模型名。

如果你按照上面的顺序检查完，通常十分钟内就能跑通。跑通后，立刻去 TaoToken 控制台的“调用记录”里确认刚才那几次浏览器自动化操作已经入账，画面上会列出每次请求的模型、token 数和费用。你也可以创建一把新的 Key，把本文的命令原样执行一遍，得到属于你自己的对照表。之后想换一个模型做同样的浏览器自动化，只需要修改 ANTHROPIC_MODEL 的值，重启 Claude Code，再跑一遍同一个指令，就能在控制台对比两个模型的工具调用序列和 token 开销。

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