Claude Code + Chrome MCP：让浏览器自动化测试更简单

一、前言

日常开发中，前端回归测试、表单验证、页面交互检查都比较繁琐。

传统方式通常需要编写 Puppeteer、Playwright 脚本，不仅上手有一定成本，后续维护和调试也比较麻烦。

如果只是想快速验证本次代码修改，专门写一套自动化脚本又显得过重。

方案特点

能力	说明
自然语言操作	直接告诉 Claude Code 要做什么，不需要编写测试脚本
Chrome 原生控制	基于 Chrome DevTools Protocol（CDP）进行浏览器操作
测试流程完整	支持打开页面、填写内容、点击元素、查看日志、检查 DOM、截图等

---

二、环境准备

1. 安装 Chrome

Google Chrome

2. 检查 Node.js

Node.js 版本需要 v18 及以上。

npm -v

3. 安装 Claude Code

npm install -g @anthropic-ai/claude-code

---

三、配置 Chrome MCP

这是整个配置中最关键的一步。

直接执行下面的命令，将 Chrome DevTools MCP 添加到 Claude Code：

claude mcp add chrome-devtools -s user -- npx chrome-devtools-mcp@latest

配置完成后即可让 Claude Code 控制 Chrome。

---

四、验证浏览器自动化

启动 Claude Code：

claude

然后输入测试指令：

测试指令：打开 Chrome 浏览器，访问 bing.com，等待页面加载完成后截取全屏截图

如果 Chrome 能够被自动打开并完成页面访问、截图操作，说明 Chrome MCP 已经配置成功。

后续就可以直接通过自然语言，让 Claude Code 完成页面操作和简单的回归测试。