用 Claude Code 驱动 Chrome 做 UI 测试：安装、连接、跑用例，以及和 Playwright 的对比

本文的浏览器操作、截图和大部分文字由 Claude Code 在我的 Mac 上实际执行后生成，我只做审阅。用例跑在我自己的博客上。

一、这是什么

Claude Code 是 Anthropic 的命令行 AI 编程工具。装上 Claude in Chrome 浏览器插件后，Claude Code 可以直接接管你正在用的 Chrome：打开页面、点按钮、输入、截图、读控制台和网络请求。

它的底层用的是 Chrome 的调试接口（插件权限里那条"访问页面调试程序后端"就是它），所以能做的事跟 Playwright、Puppeteer 是一个层级的。区别在于：不用写脚本，你用一句话描述用例，它自己去点。

二、安装与连接

1. 前置条件

• Claude 账号：Pro / Max / Team / Enterprise 任一付费套餐（免费版不支持）
• Chrome 或 Chromium 内核浏览器（Edge、Brave、Arc 都可以），不支持 WSL
• Claude Code 已安装并用 /login 登录（用 API Key 登录的话浏览器功能不可用）

2. 安装 Chrome 插件

Chrome 应用商店搜 "Claude"，或者直接打开：
https://chromewebstore.google.com/detail/claude/fcoeoabgfenejglbffodgkkbkcdhcgfn

装好后在 chrome://extensions 里可以看到它，注意权限列表，"访问页面调试程序后端"就是它能操作页面的原因：

装完点一下插件图标登录 Claude 账号即可，不需要别的配置。

3. 在 Claude Code 里连接浏览器

两种方式：

# 方式一：启动时带参数，只对本次会话生效
claude --chrome

# 方式二：会话里随时输入
/chrome

/chrome 会弹出一个菜单，可以看连接状态、重连、选择要控制的浏览器，以及勾选 Enabled by default 让以后每次会话都自动连上（代价是会多占一些上下文）。

连上后，Chrome 顶部会出现一条横幅，这是 Chrome 自带的提示，表示插件已经通过调试接口接管了浏览器：

4. 站点权限

第一次对某个网站操作时，Claude Code 会弹 "Claude in Chrome wants to…" 的确认，可以选"本次会话内允许该站点所有操作"。长期的站点白名单在插件自己的设置页里管，Claude Code 只是继承它。

三、它手里有哪些动作

连上后 Claude Code 多了一组 mcp__claude-in-chrome__* 工具。用 /mcp 选 claude-in-chrome 再点 View tools 能看到全部。常用的这几个，跟 Playwright 的 API 基本一一对应：

动作	作用	对应 Playwright
tabs_context / tabs_create / tabs_close	看当前有哪些 tab，新开、关闭 tab	browser.new_page()
navigate	打开 URL、前进、后退	page.goto()
find	用自然语言描述元素（"右侧边栏的搜索框"），返回元素引用 ref_xx	get_by_role() / get_by_label()
read_page	读整棵可访问性树	page.accessibility.snapshot()
computer	点击、输入、按键、滚动、截图、局部放大（zoom）	click() / fill() / screenshot()
get_page_text	拿页面纯文本，用来做断言	page.inner_text()
javascript_tool	在页面里执行 JS，取精确值	page.evaluate()
read_network_requests	抓这个 tab 的 HTTP 请求和状态码	page.on("response")
read_console_messages	抓 console 里的 error / warn	page.on("console")
gif_creator	把整个操作过程录成 GIF	record_video

四、实际跑一条用例

我给它的指令只有一句：

在我的博客 https://www.cnblogs.com/roselearn 上验证"站内搜索 Playwright"能搜到文章，每一步截图。

下面是它的执行过程。

第 1 步：先看环境，再动手

它第一件事不是打开网址，而是调 tabs_context 看我当前开着哪些 tab，然后新建一个 tab 去操作，不碰我正在用的页面。之后 navigate 到博客首页，截一张全屏图作为初始状态：

它从这张图里读到两个后面要用的信息：右侧有"搜索"框和"找找看"按钮；分类里写着 PlayWright(4)。这个 4 后面成了断言的预期值。

第 2 步：语义定位，不写选择器

find(query="右侧边栏的搜索输入框和'找找看'按钮")
→ ref_93: textbox        (搜索框)
→ ref_94: button "找找看"

一次调用拿到两个元素引用，然后 click(ref_93) 聚焦、type("Playwright") 输入。没有 css、没有 xpath。

输入完它没有直接点搜索，而是用 zoom 放大搜索框那一小块，确认文字确实进去了：

第 3 步：点击、截图、断言 —— 然后失败了

click(ref_94) 后页面跳到 zzk.cnblogs.com 的结果页。它截图并用 get_page_text 读出文字：

找到 0 篇博文
索引为空，正在重建索引，请稍后再试

预期 4 篇，实际 0 篇，断言失败。

它没有直接报"搜索坏了"，而是：

1. 记下页面提示原文"索引为空，正在重建索引"，判断这更像环境问题而不是功能 bug；
2. 调 read_console_messages：没有前端报错；
3. 调 read_network_requests：发现监听是在页面加载之后才开的，抓不到本次请求，于是决定刷新重抓。

第 4 步：复跑确认，区分偶发和必现

刷新同一 URL，这次网络请求抓全了，主请求 200，只有 Google Analytics 的统计请求 503，不影响功能。然后用 javascript_tool 直接从 DOM 取"找到 N 篇"里的数字，不靠肉眼看截图：

document.body.innerText.match(/找到\s*(\d+)\s*篇/)?.[1]
// → "4"

预期 4，实际 4，通过。

结论：搜索功能正常，第一次的 0 是博客园搜索服务重建索引时的瞬时状态。如果只跑一遍就下结论，会报一个假 bug。

五、和 Playwright 这类自动化比，好在哪

先说结论：它不是替代自动化脚本，而是替代"人手工点一遍"这个环节。

	手写 Playwright 脚本	Claude Code 驱动 Chrome
前置成本	装 Python/Node、装浏览器驱动、搭工程	装一个插件，一条命令连上
定位方式	css / xpath / get_by_role，自己写、自己维护	自然语言描述，它自己找；页面改了 class 名不影响
用例来源	先写代码再跑	一句话描述就能跑，适合还没写脚本的新功能
登录态	要自己处理 cookie / storage_state	直接用你浏览器里已经登录的会话
断言	代码里写死	它自己从页面/DOM 取值对比预期，并解释差异
失败处理	报错退出，人来翻日志	自己查 console、network，自己复跑，自己判断环境问题还是 bug
截图/录屏	要在代码里显式加	每个关键步骤主动截，看不清就 zoom，还能录 GIF
可重复性	脚本可反复跑、进 CI	每次都是"现场执行"，不进 CI
单次成本	一次编写，长期运行几乎免费	每次跑都消耗 token
稳定性	确定性高	同一句话两次执行路径可能不同

适合用它的场景

• 新功能第一次冒烟：脚本还没写，先让它点一遍，顺手把步骤和截图产出来。
• 偶发问题排查：需要边看边判断的场景，它能在失败点上自己去翻 console 和 network。
• 生成用例素材：它跑出来的步骤、元素、断言可以直接落成 Playwright 脚本，我后面的文章会写这个。
• 兼容性/回归的人工抽查：以前要人肉点的那部分。

不适合的场景

• 大批量回归、CI 流水线：成本和确定性都不占优。
• 需要登录、验证码的流程：它遇到登录页和验证码会停下来让你手动处理，不会绕。
• 页面有 alert / confirm 弹窗：会卡住调试通道，需要人工关掉。

六、几点注意

1. 它会主动避开不可逆操作。删除、提交、发送这类按钮它会先停下来问，不会自己点。
2. 网络和控制台监听要先开再操作。第一次就是因为监听开晚了没抓到请求，正确顺序是先调一次 read_network_requests，再做动作。
3. 不支持 headless。Chrome 必须是打开的、可见的。
4. 长时间不动会断连。插件的 service worker 会休眠，重新 /chrome 一下即可。

参考

• Claude Code 官方文档 · Claude in Chrome：https://code.claude.com/docs/en/chrome
• 插件商店页：https://chromewebstore.google.com/detail/claude/fcoeoabgfenejglbffodgkkbkcdhcgfn