1. 从一堆 Key 到一把钥匙Claude 驱动浏览器的真实痛点如果你正在做网页抓取、表单自动填写或者端到端测试大概率已经试过让 Claude 通过 Tool Use 去操控 Playwright。Claude 的 Tool Use 能力确实能把「自然语言指令」翻译成「浏览器动作」但真正动手时第一个卡住大多数人的不是模型能力而是 Key 管理。我见过太多项目里同时躺着 Anthropic、OpenAI、以及各种兼容端点的 Key散落在.env、settings.json、config.toml、CI 变量里。每换一个模型就要改一次配置每加一个 Agent 就要复制一遍鉴权逻辑。更麻烦的是Claude 的 Tool Use 循环需要频繁调用模型接口一旦 Key 分散在不同供应商超时、限流、计费口径全都不一样排查起来非常痛苦。这篇要解决的就是这件事用 TaoToken 统一 API 接入把多模型 Key 收敛成一把然后让 Claude 的 Tool Use 稳定驱动 Playwright 完成浏览器自动化。适合三类人需要网页抓取的开发者、要做表单批量填写的运营工具作者、以及写端到端测试的 QA 工程师。读完之后你能拿到一份可复制的settings.json与config.toml骨架、一段能跑的 Playwright Claude 脚本以及一次可复现的浏览器操作验证。2. TaoToken 前置统一 Key 与接入地址TaoToken 在这里扮演的角色是「统一入口」。你不需要在代码里区分 Anthropic 原生端点和兼容端点只需要把 base_url 指向 TaoToken 的 API 地址用一把 Key 就能调用 Claude 系列模型。对于 Tool Use 这种需要多轮往返的场景统一入口最大的好处是重试策略、超时配置、日志埋点只需要写一份。先明确两个地址后面配置里会反复用到官网入口https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentAPI 基地址https://taotoken.net/api 这个不加 UTM直接用于代码里的 base_url你需要先拿到 API Key。进入控制台创建即可路径是 console控制台https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentAPI Keys 管理https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content创建 Key 的时候建议按用途命名比如playwright-agent-dev、playwright-agent-ci这样后面看用量时能直接对应到具体项目。Key 只在创建时完整显示一次记得立刻存进密码管理器或 CI 的 secret 里。注意不要把 Key 硬编码进脚本再提交到 Git。下面所有配置示例都用环境变量占位你本地替换成真实值即可。如果你还想先确认模型是否可用可以打开模型对话页面手动发一条消息测试模型对话https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content3. 可复制配置settings.json 与 config.toml 骨架这一节给出两份可直接抄的配置骨架。一份给 Node/前端工具链settings.json一份给 Python/CLI 工具链config.toml。核心思路都是base_url 指向 TaoTokenKey 从环境变量读取模型名统一写在一个地方。3.1 settings.json 骨架Node / Claude Code 类工具{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: ${TAOTOKEN_API_KEY}, ANTHROPIC_MODEL: claude-sonnet-4-5 }, permissions: { allow: [ Bash(playwright:*), Bash(node:*) ] }, timeout: 120000, retry: { maxAttempts: 3, backoffMs: 1000 } }这里ANTHROPIC_BASE_URL是关键它让所有走 Anthropic SDK 的请求都打到 TaoToken。ANTHROPIC_API_KEY用${TAOTOKEN_API_KEY}占位运行时从环境变量注入。timeout给到 120 秒因为 Tool Use 多轮循环加上浏览器截图返回单次请求可能偏慢。3.2 config.toml 骨架Python / CLI 工具链[api] base_url https://taotoken.net/api api_key_env TAOTOKEN_API_KEY model claude-sonnet-4-5 max_tokens 4096 [retry] max_attempts 3 backoff_ms 1000 [browser] headless false viewport_width 1280 viewport_height 800 navigation_timeout_ms 30000api_key_env表示从环境变量名读取而不是把 Key 写进文件。browser段是给 Playwright 用的把视口和超时集中管理避免脚本里到处散落魔法数字。3.3 环境变量注入Linux/macOSexport TAOTOKEN_API_KEYsk-你的真实KeyWindows PowerShell$env:TAOTOKEN_API_KEYsk-你的真实KeyCI 里则把TAOTOKEN_API_KEY配成 secret运行时注入。这样本地和 CI 用的是同一套配置骨架只是 Key 来源不同。4. 用 Claude Tool Use 驱动 Playwright完整脚本配置就绪后进入核心实现。整体闭环是Claude 规划步骤 → 调用浏览器工具 → Playwright 执行 → 结果回传 → Claude 决定下一步。下面用 Python 写一个最小可跑版本。4.1 安装依赖pip install anthropic playwright playwright install chromium4.2 定义浏览器工具工具描述要写清楚Claude 才能正确选择。这里保留最常用的五个导航、截图、点击、输入、取文本。import base64 import os import time import anthropic from playwright.sync_api import sync_playwright client anthropic.Anthropic( api_keyos.environ[TAOTOKEN_API_KEY], base_urlhttps://taotoken.net/api, ) tools [ { name: navigate, description: 在浏览器中导航到指定 URL, input_schema: { type: object, properties: {url: {type: string}}, required: [url], }, }, { name: screenshot, description: 截取当前页面截图返回 base64 图片, input_schema: {type: object, properties: {}}, }, { name: left_click, description: 在页面指定坐标点击, input_schema: { type: object, properties: {x: {type: number}, y: {type: number}}, required: [x, y], }, }, { name: type_text, description: 在当前焦点位置输入文本, input_schema: { type: object, properties: {text: {type: string}}, required: [text], }, }, { name: get_page_content, description: 获取当前页面纯文本内容, input_schema: {type: object, properties: {}}, }, ]注意base_url直接写 TaoToken 的 API 地址SDK 其余用法和原生一致。4.3 工具执行函数与重试浏览器操作天然不稳定加一层重试能显著降低失败率。def execute_tool(tool_name, tool_input, page): if tool_name navigate: page.goto(tool_input[url], wait_untilnetworkidle) return f已导航到 {tool_input[url]} if tool_name screenshot: img page.screenshot() b64 base64.b64encode(img).decode() return { type: image, source: {type: base64, media_type: image/png, data: b64}, } if tool_name left_click: page.mouse.click(tool_input[x], tool_input[y]) return f已点击 ({tool_input[x]}, {tool_input[y]}) if tool_name type_text: page.keyboard.type(tool_input[text]) return f已输入 {tool_input[text]} if tool_name get_page_content: return page.inner_text(body) return 未知工具 def execute_with_retry(tool_name, tool_input, page, max_retries3): for attempt in range(max_retries): try: return execute_tool(tool_name, tool_input, page) except Exception as exc: if attempt max_retries - 1: return f执行失败: {exc} time.sleep(1)4.4 主控制循环def claude_browser_agent(task: str): with sync_playwright() as p: browser p.chromium.launch(headlessFalse) page browser.new_page(viewport{width: 1280, height: 800}) messages [{role: user, content: task}] while True: response client.messages.create( modelclaude-sonnet-4-5, max_tokens4096, toolstools, messagesmessages, ) messages.append({role: assistant, content: response.content}) if response.stop_reason end_turn: for block in response.content: if hasattr(block, text): print(Claude:, block.text) break tool_results [] for block in response.content: if block.type tool_use: print(f执行工具 {block.name} 参数 {block.input}) result execute_with_retry(block.name, block.input, page) tool_results.append({ type: tool_result, tool_use_id: block.id, content: result if isinstance(result, str) else [result], }) messages.append({role: user, content: tool_results}) browser.close()4.5 系统提示词给 Claude 一段清晰的系统提示能明显减少乱点乱输。SYSTEM_PROMPT 你是浏览器自动化助手。 操作规范 - 每次点击前先调用 screenshot 确认页面状态 - 优先使用 get_page_content 获取文本减少截图以节省 token - 遇到验证码或登录墙停止并说明原因 - 操作完成后截图确认结果 安全规范 - 不执行涉及支付的操作 - 不泄露页面上的隐私信息 把这段作为system参数传入messages.create即可。5. 验证请求一次可复现的浏览器操作配置和脚本都齐了现在做一次可复现验证。任务设计得简单但完整打开一个公开表单页填写两个字段提交后读取结果。if __name__ __main__: claude_browser_agent( 1. 访问 https://httpbin.org/forms/post 2. 在 Customer name 填写 张三 3. 在 Telephone 填写 13800138000 4. 点击 Submit 按钮 5. 用 get_page_content 读取返回内容并告诉我结果 )运行后你会看到终端依次打印 Claude 的工具调用决策浏览器窗口同步执行动作。预期结果是页面跳转到 httpbin 的返回页Claude 读取到包含custname: 张三的 JSON 文本并在最后用自然语言总结。如果这一步成功说明整条链路是通的TaoToken 统一 Key → Claude Tool Use → Playwright 执行 → 结果回传。接下来你可以把任务换成抓取新闻标题、批量填表、或者跑端到端测试用例。对于需要长期跑编码类 Agent 的场景比如让 Claude 持续修改测试脚本并自动验证可以考虑 Coding Plan用量和并发更可控Coding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content6. 本篇常见错排查6.1 401 鉴权失败最常见的原因是环境变量没生效。先确认echo $TAOTOKEN_API_KEY如果为空说明 export 没执行或没写进 shell 配置。另一个原因是 Key 复制时带了空格或换行重新从 API Keys 页面复制一次。6.2 模型名报错model字段必须和 TaoToken 支持的模型名一致。如果报「model not found」去模型对话页面确认当前可用模型名再回填到settings.json或脚本里。6.3 工具调用死循环Claude 反复调用同一个工具通常是工具描述不够明确或者页面状态没变化导致它以为没执行成功。解决办法在execute_tool里对navigate加wait_untilnetworkidle并在系统提示里要求「每次操作后确认页面已变化」。6.4 截图导致 token 暴涨截图返回 base64 图片会消耗大量 token。排查时先看日志里screenshot的调用次数如果每步都截图改成优先get_page_content只在关键节点截图。6.5 点击坐标偏移page.mouse.click用的是视口坐标如果页面有滚动或缩放坐标会偏。建议在点击前先page.evaluate拿到元素位置或者改用page.click(selector)配合 Claude 返回选择器。更稳的做法是让 Claude 先截图再根据截图里的元素位置给坐标。6.6 超时中断Tool Use 多轮循环容易触发默认超时。把客户端超时调到 120 秒以上并在重试逻辑里对超时单独处理。如果频繁超时检查是不是单次任务步骤太多拆成多个子任务。7. 下一步把统一 Key 接进你的工作流到这里你已经有了统一 Key 的配置骨架、可跑的 Playwright Claude 脚本、以及一套排障清单。接下来最值得做的是把 Key 管理从脚本里彻底抽离本地用环境变量CI 用 secret团队协作时把settings.json和config.toml提交到仓库Key 永远不进版本库。如果你要接入更多模型做对比测试统一入口的价值会更明显——换模型只改一个model字段不用动鉴权代码。接入文档里有各语言 SDK 的 base_url 配置示例接入文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content如果你用的是 Claude Code 这类编码 Agent想让它在浏览器自动化项目里持续工作可以看 Anthropic 兼容接入的说明ClaudeCodeAnthropichttps://taotoken.net/claudecode-anthropic?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content最后留一个实用技巧把每次任务的工具调用日志写进本地文件格式就用时间戳 | 工具名 | 参数 | 结果摘要。跑上几十次之后你会很清楚哪些步骤最容易失败然后针对性地加等待或改提示词。这比盲目调参有效得多。