环境配置

安装 Node.js 18 及以上版本，确保环境变量配置正确，终端可调用 npx 和 npm。

安装 Google Chrome 浏览器，记录安装路径，非默认路径后续需手动配置。

全局安装 Claude Code 命令行工具：

npm install -g @anthropic-ai/claude

登录并配置 Anthropic API Key：

claude login

按提示输入 API Key 完成认证。

Chrome MCP 配置

方法 1：CLI 一键配置

在 CMD 或 PowerShell 中执行：

claude mcp add chrome-devtools -s user -- cmd /c npx chrome-devtools-mcp@latest

校验配置是否成功：

claude mcp list

正常输出应显示 chrome-devtools: Connected。

方法 2：手动编辑配置文件

若 CLI 配置失败，手动编辑 %USERPROFILE%\.claude.json 文件：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "cmd",
      "args": ["/c", "npx", "chrome-devtools-mcp@latest"]
    }
  }
}

保存后重启终端校验。

非默认 Chrome 路径适配

在配置文件中添加 env 字段指定路径：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "cmd",
      "args": ["/c", "npx", "chrome-devtools-mcp@latest"],
      "env": {
        "CHROME_PATH": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe"
      }
    }
  }
}

路径分隔符使用双反斜杠 \\。

基础测试验证

关闭所有 Chrome 窗口，启动 Claude 交互模式：

claude

发送测试指令：

打开 Chrome 浏览器，访问 https://www.baidu.com，等待页面加载完成后截取全屏截图

预期结果：自动打开 Chrome 访问百度首页并截图，终端输出执行日志。

E2E 自动化测试实战

测试本地前端登录页：

请执行前端登录页端到端自动化测试，步骤如下：
1. 启动 Chrome 浏览器，访问本地项目地址 http://localhost:3000
2. 等待页面 DOM 完全加载完毕，定位用户名输入框、密码输入框、提交按钮
3. 用户名输入框填写无效测试账号：test123，密码输入框留空
4. 点击提交按钮，触发表单校验
5. 读取浏览器控制台全部日志，检查是否存在 JS 报错或接口报错
6. 校验页面错误提示 DOM 元素，确认错误文案可见且内容匹配预期（例如“请输入密码”）
7. 对当前页面进行全屏截图并保存
8. 生成结构化 E2E 测试报告，包含：测试环境、步骤、实际结果、是否通过、问题汇总

Windows 常见问题排错

• Chrome 启动失败：检查是否有残留进程占用端口，结束所有 Chrome 进程后重试。
• MCP 未连接：确保配置中包含 cmd /c 前缀，或手动修改 .claude.json。
• 元素定位失败：在指令中添加显式等待（如等待选择器出现或强制等待 2 秒）。
• 路径识别错误：JSON 中使用双反斜杠 \\ 分隔路径。

CI/CD 集成

流水线需预装 Node.js 18+ 和 Chrome，全局安装 Claude Code。注入 ANTHROPIC_API_KEY 环境变量，执行测试指令：

type test-spec.txt | claude

收集截图和测试报告作为流水线产物。

最佳实践

• Windows 配置 MCP 必须包含 cmd /c。
• 测试前关闭所有 Chrome 窗口避免冲突。
• 异步操作添加显式等待。
• 结合截图、控制台日志和 DOM 断言定位问题。
• 保存常用指令为 Markdown 文件以便复用。