1. 为什么我要把浏览器交给 Claude Code 来开
做跨境电商运营的朋友大概率都经历过这种场景：想分析一个品类的竞品，得手动打开浏览器，一个关键词一个关键词地搜，把标题、价格、评分、评论数挨个复制到表格里。一个品类 20 个商品，光采集数据就要半小时，眼睛还容易看花。我试过用纯脚本爬，但亚马逊的页面结构三天两头变，选择器一失效就得重调，维护成本比手动还高。
后来我把目光投向了 Playwright MCP + Claude Code 这套组合。简单说，Playwright MCP 是微软基于 Model Context Protocol 做的一个浏览器自动化 Server，它让 Claude Code 这类 AI 编程助手能够直接操控真实的 Chromium 浏览器——打开网页、输入关键词、点击按钮、提取数据、截图保存，全程不用你动手。MCP 协议的核心思路很直白：让 AI 能调用外部工具，而 Playwright MCP 就是把浏览器变成 AI 的一个可调用工具。
这套方案适合谁？我总结了三类人：一是做电商运营、需要定期采集竞品数据的；二是做自动化测试、想让 AI 帮忙写和跑浏览器测试脚本的；三是单纯想体验 MCP 生态、看看 AI 操控浏览器到底能做到什么程度的开发者。不适合的场景也很明确：需要过验证码的页面、需要复杂登录态管理的站点、以及有严格反爬机制的平台——这些硬骨头 MCP 也啃不动。
这篇文章我会从零开始，把安装、配置、MCP 服务启动、任务编排到结果产出的完整链路走一遍，中间踩过的三个坑也会逐个复盘。为了让 API 调用更省心，我会用 TaoToken 的统一 Key 来接入 Claude Code，这样不用在多个平台之间来回切换配置。最终效果是：Claude Code 通过 Playwright MCP 操控 Chromium，访问亚马逊搜索 "reMarkable 2 case"，5 秒内提取 5 个产品的标题、价格、评分，并保存截图。
2. 前置准备：TaoToken 统一 Key 与 Claude Code 接入
在开始装 Playwright MCP 之前，得先把 Claude Code 的 API 通道配好。Claude Code 本身是个 CLI 工具，它需要连接一个大模型后端才能工作。我选择用 TaoToken 的统一 Key 来接入，原因是它把多个模型的 API 通道统一成一个 Key，配置一次就能在 Claude Code、Cline、Codex 这些工具里复用，省去了每个工具单独配 Key 的麻烦。
TaoToken 的官网是 https://taotoken.net，API 端点是 https://taotoken.net/api。注意 API 地址后面不加任何 UTM 参数，直接填这个就行。你需要先去控制台创建一个 API Key，地址是 https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console&utm_campaign=rewrite，创建好之后复制那串 Key，后面配置里要用。
Claude Code 的安装很简单，Node.js 环境准备好之后，一条命令搞定：
npm install -g @anthropic-ai/claude-code装完之后需要配置 API 通道。Claude Code 支持通过环境变量指定 Base URL 和 API Key，在 Windows 上可以这样设置：
set ANTHROPIC_BASE_URL=https://taotoken.net/api set ANTHROPIC_API_KEY=你的TaoToken_KeymacOS 或 Linux 用户用 export：
export ANTHROPIC_BASE_URL=https://taotoken.net/api export ANTHROPIC_API_KEY=你的TaoToken_Key如果你用的是 Claude Code 的 settings 文件方式，可以在项目根目录创建.claude/settings.json，写入：
{ "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_API_KEY": "你的TaoToken_Key" } }这里有个细节要注意：Base URL 填的是https://taotoken.net/api，不要在后面加/v1或者其他路径，Claude Code 会自己拼接。填错了会报 404 或者连接失败。配置好之后，运行claude命令，如果能看到交互界面并且能正常对话，说明 API 通道已经通了。
模型 ID 方面，Claude Code 默认会使用 Claude 系列模型，TaoToken 的通道支持这些模型。如果你需要指定模型，可以在启动时加--model参数，比如claude --model claude-sonnet-4-20250514。具体可用的模型 ID 可以在 TaoToken 的文档页 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite 查到。
这一步做完，Claude Code 就能正常工作了。接下来才是重头戏：把 Playwright MCP 接进来，让 Claude Code 拥有操控浏览器的能力。
3. 可复制配置：Playwright MCP 安装与 Claude Code 联调
这一节是整篇文章的核心，我会把每一步的命令和配置都写清楚，你直接复制就能用。整个流程分三步：装 Playwright MCP 包、装 Chromium 浏览器、把 MCP Server 注册到 Claude Code。
3.1 安装 @playwright/mcp 与 Chromium
第一步，安装 Playwright MCP 的 npm 包：
npm install @playwright/mcp这个包本身不大，几秒钟就装完了。但这里藏着第一个坑——装完包不等于能用。@playwright/mcp只是一个 JS 包，它依赖的 Chromium 浏览器二进制需要单独下载。我第一次装完就直接写测试脚本，结果报错：
browserType.launch: Executable doesn't exist at C:\Users\...\ms-playwright\chromium_headless_shell-1224\chrome-headless-shell.exe Looks like Playwright was just installed or updated. Please run the following command to download new browsers: npx playwright install所以第二步必须执行：
npx playwright install chromium这个命令会下载 Chrome for Testing 和 Chrome Headless Shell，加起来大概 300MB。下载速度取决于网络，我这边花了大概两分钟。装完之后，Chromium 的二进制文件会放在用户目录下的ms-playwright文件夹里。
3.2 把 MCP Server 注册到 Claude Code
浏览器装好之后，用 Claude Code 的 MCP 命令把 Playwright Server 加进去：
claude mcp add playwright -- npx @playwright/mcp@latest返回结果：
Added stdio MCP server playwright with command: npx @playwright/mcp@latest to local config验证一下连接状态：
claude mcp list看到playwright: npx @playwright/mcp@latest - ✓ Connected就说明通了。
如果你不想用命令行，也可以手动编辑配置文件。Claude Code 的 MCP 配置保存在.claude.json（项目级）或~/.claude.json（用户级）。手动配置的 JSON 片段如下：
{ "mcpServers": { "playwright": { "command": "npx", "args": ["@playwright/mcp@latest"] } } }这个 JSON 结构里，command是启动 MCP Server 的可执行命令，args是传给它的参数。注意@playwright/mcp@latest这个包名要写全，少写@latest在某些 npm 版本下会找不到包。
3.3 三件套参数确认
如果你用的是 Cline、CC Switch 或者 Codex 这类工具，配置 MCP 的时候需要确认三件套：Base URL、Key、Model ID。以 Cline 的 MCP 配置为例，在cline_mcp_settings.json里：
{ "mcpServers": { "playwright": { "command": "npx", "args": ["@playwright/mcp@latest"], "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_API_KEY": "你的TaoToken_Key", "ANTHROPIC_MODEL": "claude-sonnet-4-20250514" } } } }这三个参数缺一不可：Base URL 指向 TaoToken 的 API 端点，Key 是你在控制台创建的那串，Model ID 指定用哪个模型。Codex 的auth.json配置类似，把对应的字段填进去就行。
配置完成后，重启 Claude Code，MCP Server 就会自动加载。你可以用claude mcp list确认状态，看到 Connected 就说明整条链路通了。
4. 验证请求：跑通亚马逊竞品分析全流程
配置通了不代表能干活，得实际跑一个任务验证。我选的是亚马逊竞品分析这个场景，因为它的数据提取逻辑清晰，结果也容易验证。
4.1 直接调 Playwright API 的测试脚本
在让 Claude Code 通过 MCP 操控浏览器之前，我先写了一个直接调 Playwright API 的脚本，确认浏览器本身能正常工作：
const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch({ headless: true }); const context = await browser.newContext({ userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36' }); const page = await context.newPage(); await page.goto('https://www.amazon.com/s?k=reMarkable+2+case', { timeout: 30000, waitUntil: 'domcontentloaded' }); console.log('页面标题:', await page.title()); const products = await page.evaluate(() => { const items = document.querySelectorAll('[data-component-type="s-search-result"]'); return Array.from(items).slice(0, 5).map(item => { const title = item.querySelector('h2')?.textContent?.trim() || 'N/A'; const priceWhole = item.querySelector('.a-price-whole')?.textContent?.trim() || ''; const priceFraction = item.querySelector('.a-price-fraction')?.textContent?.trim() || ''; const price = priceWhole ? `$${priceWhole}${priceFraction ? '.' + priceFraction : ''}` : 'N/A'; const rating = item.querySelector('.a-icon-alt')?.textContent?.trim() || 'N/A'; return { title: title.substring(0, 100), price, rating }; }); }); console.log(JSON.stringify(products, null, 2)); await page.screenshot({ path: 'amazon_test.png' }); console.log('截图已保存'); await browser.close(); })();运行结果：
页面标题: Amazon.com : reMarkable 2 case [1] CoBak Case for Remarkable 2 Paper Tablet - Lightweight... 价格: $35.23 | 评分: 4.5 out of 5 stars [2] CoBak Case for Remarkable 2 Paper Tablet - Lightweight... 价格: $35.17 | 评分: 4.5 out of 5 stars [3] CoBak Premium PU Leather Case for 10.3" Remarkable 2... 价格: $113.90 | 评分: 4.5 out of 5 stars [4] MoKo Case for Remarkable 2 Tablet, Ultra-Thin Magnetic... 价格: $28.82 | 评分: 4.5 out of 5 stars [5] CoBak Case for Remarkable 2 Paper Tablet with Two Viewing... 价格: $47.99 | 评分: 4.5 out of 5 stars 截图已保存: amazon_test.png从安装到实际跑通亚马逊数据采集，核心代码只有 30 行。这说明浏览器自动化本身是通的，接下来就是让 Claude Code 通过 MCP 来驱动这套流程。
4.2 通过 MCP 让 Claude Code 执行任务
在 Claude Code 里，你只需要用自然语言描述任务，它会自动调用 MCP 工具。我用的提示词模板是这样的：
使用 Playwright MCP 帮我做竞品分析： 1. 打开 https://www.amazon.com 2. 搜索 "reMarkable 2 case" 3. 提取前 10 个搜索结果的：标题、价格、评分、评论数 4. 按价格从低到高排序 5. 截图保存 6. 总结价格区间和评分分布Claude Code 收到指令后，背后的流程是这样的：它先解析你的意图，然后调用 MCP 工具browser_navigate打开亚马逊首页，接着调用browser_type在搜索框输入关键词，再调用browser_click点击搜索按钮，最后调用browser_evaluate提取页面数据。每一步的结果都会以 accessibility tree（无障碍树）的形式返回给 Claude Code。
这里有个关键点值得展开：Playwright MCP 返回给 AI 的不是截图，而是页面的 accessibility tree。这是一种结构化的页面描述，比截图省 token，比原始 HTML 更干净，AI 理解起来更准。官方 README 里强调的 "No vision models needed" 就是这个意思——不需要多模态模型，纯文本模型就能"看懂"网页。
4.3 结果产出与验证
跑通之后，Claude Code 会输出一份结构化的分析结果，包括价格区间、评分分布、以及每个产品的详细信息。截图也会保存到当前目录。你可以用这份数据直接做竞品定价策略分析，或者导入到表格里做进一步处理。
验证成功的标志有三个：一是claude mcp list显示 Connected；二是 Claude Code 能正常调用 browser_navigate 等工具；三是截图文件确实生成在磁盘上。三个都满足，说明整条链路完全通了。
5. 本篇常见错排查：三个坑的定位与修复
这一节复盘我在联调过程中踩的三个坑，每个都附上真实报错和修复方式。如果你在配置过程中遇到类似问题，可以直接对照排查。
5.1 坑一：装了包不等于能用，Chromium 要单独装
报错原文：
browserType.launch: Executable doesn't exist at C:\Users\...\ms-playwright\chromium_headless_shell-1224\chrome-headless-shell.exe Looks like Playwright was just installed or updated. Please run the following command to download new browsers: npx playwright install原因定位：@playwright/mcp只是一个 JS 包，它依赖的 Chromium 浏览器二进制需要单独下载。官方 README 里提了一句 Requirements，但没有强调"装完包之后还要装浏览器"。对于第一次接触 Playwright 的人来说，这个很容易漏掉。
修复方式：执行npx playwright install chromium，下载约 300MB 的浏览器二进制。装完之后再跑测试脚本就正常了。这个坑耽误了我 10 分钟，教训是：npm install 之后，马上执行 npx playwright install chromium，不要跳过。
5.2 坑二：--headless 参数传不进去
报错原文：
error: unknown option '--headless' (Did you mean --header?)原因定位：我想让浏览器在后台跑（headless 模式），所以试了这个命令：
claude mcp add playwright -- npx @playwright/mcp@latest --headless结果 Claude Code 报错说--headless是未知选项。排查了半天才明白：claude mcp add会把--headless当成自己的参数，而不是传给 npx 的参数。每个 CLI 工具的参数解析器各管各的，参数不会自动穿透。
修复方式：不需要手动传--headless。Claude Code 调用 MCP 工具时，Playwright 默认在 headless 模式启动浏览器。如果你直接写 Playwright 脚本，在chromium.launch({ headless: true })里指定就行。以后遇到类似的 MCP Server 配置，记住：传给 MCP Server 的参数和传给 Claude Code 的参数是两回事。
5.3 坑三：中文路径导致 npm init 失败
报错原文：
npm error Invalid name: "验证_playwright_mcp"原因定位：我在一个中文命名的目录下执行npm init -y，npm 不支持中文目录名作为包名。
修复方式：做技术验证时用英文目录名，省掉不必要的麻烦。这个坑不影响功能——npm install在中文路径下仍然正常工作，只是不能npm init。但为了避免后续其他工具也出问题，建议统一用英文路径。
5.4 其他高频报错对照
除了上面三个坑，还有几个报错值得留意。401 错误通常是 API Key 没配对或者过期了，检查 TaoToken 控制台里的 Key 是否有效，以及环境变量是否设置正确。local proxy failed 一般是网络问题，确认 Base URL 填的是https://taotoken.net/api而不是其他地址。reading choices 报错通常是模型返回格式异常，换个 Model ID 试试。OAuth 相关报错在 Claude Code 里比较少见，如果遇到，检查一下是不是用了需要 OAuth 的通道，TaoToken 的 Key 方式是直接填 API Key，不需要走 OAuth 流程。
6. 把这条链路用起来：从验证到日常
跑通之后，这套方案能做的事情比想象中多。我目前用它做三件事：一是定期采集竞品价格和评分，做成趋势表；二是监控自己 listing 的页面状态，比如价格有没有被跟卖、库存显示是否正常；三是批量测试表单填写流程，比如新品上架时的属性填写。
不过有几个边界要清楚。需要验证码的页面，MCP 过不去，这是硬伤。需要复杂登录态的站点，Cookie 和 Session 管理比较麻烦，容易掉登录。有严格反爬机制的平台，高频访问可能被限 IP。需要人眼判断的页面，比如视觉设计类任务，Playwright 返回的是无障碍树而不是截图，也不适合。
安全方面提醒一句：不要把 MCP 浏览器自动化用在不符合平台服务条款的用途上。亚马逊等平台的 ToS 对自动化访问有明确限制，本文演示的是技术可行性，实际使用时请遵守目标网站的 robots.txt 和服务条款。
如果你想让 Claude Code 长期跑这类自动化任务，可以考虑用 TaoToken 的 Coding Plan，地址是 https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite，它针对编码和 Agent 场景做了额度优化，比按量计费更适合高频调用。想先体验模型对话能力的，可以去 https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=chat&utm_campaign=rewrite 试试。API Key 的创建入口在 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite，接入文档在 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite。
最后说一个实用技巧：第一次访问亚马逊可能会被反爬拦截，把 User-Agent 设成真实浏览器的，成功率会高很多。另外 Chromium 下载约 300MB，确保网络和磁盘空间充足。MCP Server 的配置保存在.claude.json里，换项目的时候记得检查一下配置有没有带过去。
