我做的项目中维护的后台系统里有一个「用户管理」模块。界面很典型：

• 一张用户列表，展示昵称、脱敏手机号、账号状态、所属学校、注册时间
• 每行有「评分」和「删除」两个操作按钮
• 顶部支持按昵称、手机号、学校、状态筛选
• 底部分页（每页 10 条，共 20 条记录）

功能不复杂，但每次发版前我都要手动验证一遍：
删除用户 → 确认弹窗 → 列表刷新 → 核对总数；
点评分弹窗 → 关闭 → 再点下一个；
切换不同筛选条件 → 翻页 → 再切回来……

这些重复劳动枯燥且容易遗漏。有一次我改了删除接口的返回结构，前端没正确处理，删除后列表刷新了但总数没变。我手动试了三个用户没发现，上线后被运营报了 bug。

直到我把 Chrome DevTools MCP 接入了 Claude Code，让 AI 直接操作我的 Chrome 浏览器。现在，这些机械验证全交给 AI 来做——我只需要写一段自然语言指令，然后去喝杯咖啡。

本文所有案例均基于我真实负责的后台模块（只有超级管理员角色），你可以直接复制指令思路到自己的项目里。

---

一、我的模块长什么样（快速对号入座）

• 列表字段：序号、用户昵称、手机号（脱敏）、账号状态（正常/已注销）、所属学校、注册时间
• 操作按钮：
  • 「评分」→ 打开评分详情弹窗
  • 「删除」→ 二次确认后删除用户
• 筛选区：用户昵称（模糊）、手机号（精确）、所属学校、账号状态
• 分页：每页 10 条，共 20 条记录（测试数据）

只有一个角色：超级管理员。所以不需要考虑权限差异，专注功能正确性。

---

二、实战一：删除功能的「暴力回归测试」

痛点

删除是高风险操作。每次修改删除相关代码（确认弹窗样式、接口调用、列表刷新逻辑）后，我必须验证：

• 正常删除：点删除 → 确认 → 该行消失，总记录数减 1
• 取消删除：点删除 → 取消 → 列表不变
• 删除最后一条记录：应正确显示上一页或空状态
• 网络异常时的错误提示

手动测一轮 5 分钟，改三次代码就要重复三遍。

AI 自动测试指令

使用 Chrome DevTools MCP 打开我的后台用户管理页面（http://localhost:3000/users）。
对“删除”功能执行以下测试用例：

1. 点击第一行用户（昵称“芝士少女”）的“删除”按钮 → 在弹出的确认框中点击“取消”
   → 验证用户行仍然存在，列表没有任何变化。

2. 再次点击同一行的“删除” → 点击“确认”
   → 等待列表刷新，验证“芝士少女”行消失，总记录数从 20 变为 19。

3. 筛选出“账号状态 = 已注销”的用户（如果有的话），删除其中第一条
   → 验证该状态下记录数减少 1。

4. 模拟网络异常：在删除请求发出前，通过 Chrome DevTools 设置 Network offline
   → 点击删除并确认 → 抓取页面出现的错误提示文案。

每个步骤后截图，最后输出一个 PASS/FAIL 表格。

实际效果

4 个场景不到 2 分钟 跑完。每次回归只需重新执行同一段指令。
有一次 AI 发现「取消删除」后列表会闪一下再恢复——虽然最终状态正确，但用户体验不好。这个细节我之前手动测试从未注意到。

---

三、实战二：批量验证「评分」弹窗的数据一致性

痛点

每个用户的「评分」点击后会弹出模态框，展示评分明细（如“学习态度：4.5，互动活跃：4.2，综合评分：4.35”）。我需要抽查不同学校、不同状态用户的评分数据是否正确。

手工做就是随机点几个，肉眼扫一眼，基本靠感觉。但可能存在：

• 某学校学生评分字段缺失 → 弹窗空白
• 已注销用户的评分弹窗不应再显示（业务规则），但可能还弹出来

AI 自动测试指令

使用 Chrome DevTools MCP 遍历用户列表当前页的所有用户（共 10 条）。对每一个用户：

1. 点击「评分」按钮。
2. 等待评分详情弹窗出现，抓取弹窗内的文本内容（至少包含“综合评分”字段的值）。
3. 检查弹窗内容是否非空，并记录该用户的账号状态（正常/已注销）。
4. 关闭弹窗。
5. 若账号状态为“已注销”但弹窗中显示了评分数据 → 标记为 FAIL（预期已注销用户不应看到评分或应提示“用户已注销”）。

最终输出汇总表：用户昵称 | 状态 | 综合评分值 | 弹窗是否正常打开 | 是否符合预期

实际效果

我手动点 10 个评分要 3 分钟，AI 跑完 40 秒。
有一次 AI 发现一个「已注销」用户的评分弹窗仍然正常显示数据——这违反了产品需求。要不是 AI 遍历，我根本不会去点那个已注销用户的评分。

---

四、实战三：筛选 + 分页的全排列回归

痛点

筛选条件有四个：用户昵称（模糊）、手机号（精确）、所属学校（下拉）、账号状态（正常/已注销/全部）。手工测试所有有意义的组合 + 分页几乎不可能。但每次修改筛选的后端接口或前端状态管理，我都不敢保证所有组合都正常。

AI 自动测试指令

使用 Chrome DevTools MCP 对用户管理页的筛选 + 分页功能执行以下回归场景：

1. 所属学校 = “北京大学” → 点查询
   → 等待列表刷新，记录当前显示的用户数 → 翻到第二页（如果有）
   → 检查第二页的用户学校是否仍然是北京大学。

2. 账号状态 = “已注销” → 点查询
   → 验证所有用户的账号状态列都显示“已注销”。

3. 组合条件：所属学校 = “清华大学” + 账号状态 = “正常” → 查询
   → 验证每条数据的学校和状态都符合。

4. 边界：昵称输入不存在的字符串 “xxxx” → 查询
   → 列表应显示“暂无数据”，分页组件消失或显示 0 条。

5. 连续切换筛选：先选北京大学 → 查询 → 再选复旦大学（点查询）
   → 验证数据正确。

每个场景结束后截图，并从 Network 中抓取查询接口的请求参数，以便我核对参数拼接是否正确。

实际效果

5 个核心场景 + 截图 + 请求参数汇总，一共 6 分钟。
有一次场景 3（清华+正常）查询后，第二页混进了一个“北京大学”的用户——是后端 SQL 的 join 条件写错了。如果没有自动化，这个 bug 很可能带着上线。

---

五、实战四：一键造 30 个测试用户

痛点

分页总共有 20 条记录，但我想测试「每页 20 条」以及「最后一页不足 10 条」的场景，需要至少 30 个用户。手动造太累：点新增 → 填昵称、手机号、学校、状态…… 30 次要 20 分钟。

AI 自动测试指令

使用 Chrome DevTools MCP 在我的用户管理后台自动创建 30 个测试用户。要求：

- 昵称：test_user_01 ～ test_user_30
- 手机号：18800000001 ～ 18800000030
- 所属学校：随机从 [北京大学, 清华大学, 复旦大学, 上海交通大学, 浙江大学] 中选择
- 账号状态：前 20 个为“正常”，后 10 个为“已注销”
- 注册时间：自动填充当前日期

每创建一个，等待列表刷新并截图确认新用户出现在第一页（或通过搜索验证）。
如果出现手机号或昵称重复导致失败，跳过并记录。

最后输出成功/失败统计。

实际效果

30 个用户创建完用了 8 分钟（主要是 UI 操作 + 等待后端）。
之后我就可以愉快地测试分页边界和筛选性能。测试用户有统一前缀 test_user_，事后一条 SQL 就能删干净。

---

六、我总结的 5 条实践经验

1. 从最痛的一个点开始
   先让 AI 只测“删除功能”，稳定后再加“评分遍历”和“筛选分页”。逐步扩大范围，容易控制。

2. 指令中给出明确的预期行为
   不要说“测试删除”，要说“删除后该行消失，总记录数减 1”。AI 有了预期才能判断 PASS/FAIL。

3. 利用截图作为“测试证据”
   要求每个关键步骤后截图。跑完后快速浏览截图就能确认大部分场景是否正常。

4. 用 wait_for 解决时序问题
   AI 操作太快，有时弹窗还没出现就去点击。在指令中加“等待评分弹窗出现（例如等待 class 为 modal 的元素可见）再抓取内容”。

5. 永远不在生产环境跑
   所有自动化都针对本地开发数据库。测试用户带 test_ 前缀，跑完即清理。

---

七、总结：让 AI 成为你的后台测试副驾驶

在只有超级管理员的用户管理模块上，我已经把以下工作交给了 AI：

任务	手工耗时	AI 耗时	发现过的问题
删除功能回归（4个场景）	5 分钟	1.5 分钟	取消删除时列表闪烁
遍历当前页 10 个用户的评分	3 分钟	40 秒	已注销用户仍显示评分
筛选 + 分页核心场景（5个）	15 分钟	6 分钟	组合筛选后端 SQL 漏条件
批量生成 30 个测试用户	20 分钟	8 分钟	无

每周发版前，我至少省下 1 小时。更重要的是，我不再担心“手工漏测”——AI 会一丝不苟地执行我交代的每一个用例，且每次回归都可以一模一样地重放。

如果你也维护着一个看似简单但点起来很烦的后台模块，不妨试试让 Chrome DevTools MCP 帮你“点按钮”。从一句 “帮我测一下删除功能” 开始，你会打开一扇新的大门。

---

附：Chrome DevTools MCP 安装命令（Claude Code 环境）

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

之后在 Claude Code 中输入 /mcp 确认工具已加载，就可以像本文一样用自然语言指挥浏览器了。