GStack 实战指南 | 第4期 - 自动化 QA：让 AI 亲自操控网页做端到端测试
🤖 Vibe Coding 最难的挑战是全链路跑通。当你用 AI 写完前端页面和后端接口，如何验证整个产品流程没有中断？GStack 的
/qa和/browse给出了终极答案：让模型亲自打开浏览器点点看。
为什么传统 AI 无法做端到端测试？
普通的 Claude 只能帮你 写 测试脚本（比如 .test.ts），它 自己是看不见页面的。
即使页面按钮错位了、弹窗不出来，它依旧认为自己的代码"完美无瑕"。
普通 AI 的视角：
┌─────────────────────────────────┐
│ 我写了正确的 JSX 语法 │
│ 所以页面一定是正确的 │ ← 盲区！
│ 我没有眼睛，但我很自信 │
└─────────────────────────────────┘
GStack QA 的视角：
┌─────────────────────────────────┐
│ 我打开了浏览器 │
│ 我看到登录按钮在左下角 │ ← 这不对
│ 我点了它——没反应 │ ← 发现 Bug
│ 控制台报了 TypeError │ ← 定位原因
└─────────────────────────────────┘GStack 引入了 Computer Use 概念的变体：内置基于 Playwright 无头浏览器的控制能力，让 AI 真正"看见"并"操作"你的页面。
认识 /browse 与 /qa
这两个命令是一对组合拳，分别负责 观察 和 操作：
| 命令 | 角色 | 能力 | 典型用途 |
|---|---|---|---|
/browse | 观察者 | 打开页面、截图、读取 DOM 结构 | 查看页面状态、研究竞品 |
/qa | 测试员 | 输入文字、点击按钮、填表单、验证跳转 | 全流程端到端测试 |
/browse：给 AI 装上眼睛
基本用法
bash
/browse 访问 http://localhost:3000，告诉我你看到了什么。当这条指令下达，Claude 会：
- 启动一个 Chromium 浏览器进程（带 Cookie 持久化）
- 导航到目标 URL
- 等待页面加载完成
- 捕获页面截图和 DOM 结构
- 用自然语言描述所见内容
AI 的回复示例：
markdown
我已经打开了 http://localhost:3000，看到以下内容：
📸 页面截图已保存。
**页面结构描述：**
- 顶部有一个深色导航栏，包含 Logo（文字："MyBlog"）和三个导航链接：首页、文章、关于
- 右上角有一个蓝色的"登录"按钮
- 主区域是一个 Hero Banner，白色大标题："欢迎来到我的博客"
- 下方有 3 张文章卡片，每张包含标题、摘要和"阅读更多"链接
- 底部 Footer 显示 "© 2025 MyBlog"
**潜在问题：**
- ⚠️ 第二张卡片的标题文字被截断，可能是 CSS `overflow: hidden` 导致
- ⚠️ Footer 的版权年份是 2025，当前已是 2026进阶用法：竞品研究
/browse 不只能看本地页面，还能浏览公开网站：
bash
/browse 打开 https://linear.app 的首页，
分析它的导航栏设计和 CTA 按钮的布局策略。/qa：让 AI 变身测试工程师
基本用法
bash
/qa 前往 http://localhost:3000/login。
请按以下步骤测试登录流程：
1. 在用户名框输入 "test_user"
2. 在密码框输入 "123456"
3. 点击登录按钮
4. 检查是否成功跳转到 /dashboard
5. 检查控制台是否有报错AI 执行过程（你能看到的实时日志）
🤖 [QA] 正在启动 Playwright 浏览器...
🤖 [QA] 导航到 http://localhost:3000/login
🤖 [QA] 页面加载完成（耗时 1.2s）
🤖 [QA] 定位到用户名输入框 [data-testid="username"]
🤖 [QA] 输入文字："test_user"
🤖 [QA] 定位到密码输入框 [data-testid="password"]
🤖 [QA] 输入文字："123456"
🤖 [QA] 点击登录按钮 [data-testid="login-btn"]
🤖 [QA] 等待页面跳转...（3s 超时）
🤖 [QA] ❌ 页面未发生跳转，URL 仍为 /login
🤖 [QA] 检查控制台日志...
🤖 [QA] 🔴 发现错误：TypeError: Cannot read property 'token' of undefinedQA 测试报告
markdown
# 🧪 QA 测试报告
**测试场景**：用户登录流程
**测试时间**：2025-04-16 14:30
**测试结果**：❌ 失败
---
## 执行步骤与结果
| 步骤 | 操作 | 预期 | 实际 | 状态 |
|:---:|:---|:---|:---|:---:|
| 1 | 输入用户名 "test_user" | 输入框显示文字 | ✅ 正常 | ✅ |
| 2 | 输入密码 "123456" | 输入框显示掩码 | ✅ 正常 | ✅ |
| 3 | 点击登录按钮 | 发送 POST 请求 | ✅ 请求已发送 | ✅ |
| 4 | 验证页面跳转 | 跳转到 /dashboard | ❌ 停留在 /login | ❌ |
| 5 | 检查控制台 | 无错误 | 🔴 TypeError | ❌ |
## 根因分析
**问题定位**：`src/api/auth.ts:28`
接口返回格式为 `{ data: { token: "xxx" } }`，
但前端代码直接读取 `res.token`，缺少一层嵌套访问。
**修复建议**：
```ts
// ❌ 当前代码
const token = res.token;
// ✅ 修复
const token = res.data.token;是否需要我直接修复并重新测试？
---
## 高级玩法：组合测试场景
### 表单校验测试
```bash
/qa 前往 http://localhost:3000/register，测试以下边界情况：
1. 不填任何字段，直接点注册——应该有错误提示
2. 只填邮箱（格式错误：abc），点注册——邮箱格式校验
3. 密码填 "123"（少于 6 位），点注册——密码长度校验
4. 全部正确填写后提交——应该成功并跳转到 /welcome响应式测试
bash
/qa 将浏览器窗口设置为 375x667（iPhone SE 尺寸），
然后访问首页。检查：
1. 导航栏是否折叠为汉堡菜单
2. 文章卡片是否变成单列布局
3. 所有按钮是否足够大可以点击（最小 44x44px）多步骤业务流程测试
bash
/qa 帮我跑通完整的文章发布流程：
1. 先登录（用户 admin / admin123）
2. 跳转到 /dashboard
3. 点击"新建文章"按钮
4. 在标题框输入"测试文章"
5. 在内容编辑器输入"这是一篇测试文章的内容"
6. 点击"发布"按钮
7. 验证是否跳转到文章详情页
8. 验证文章标题是否正确显示
9. 返回首页检查文章是否出现在列表中给你的组件加 data-testid
为了让 /qa 更准确地定位页面元素，建议在关键交互元素上添加 data-testid 属性：
tsx
// ✅ 推荐：为关键元素添加 testid
<input
data-testid="login-username"
placeholder="请输入用户名"
/>
<button data-testid="login-submit">
登录
</button>
// ⚠️ 不推荐：依赖 className 或文字内容定位
// AI 可以通过文字定位，但 testid 更稳定可靠常用的 data-testid 命名规范：
登录按钮 → data-testid="login-submit"
搜索输入框 → data-testid="search-input"
文章标题 → data-testid="article-title"
导航菜单 → data-testid="nav-menu"
错误提示 → data-testid="error-message"/browse + /qa 组合工作流
最佳的使用流程是先 观察 再 操作：
Step 1: /browse 打开目标页面，观察当前状态
↓
Step 2: /qa 执行交互操作，验证功能流程
↓
Step 3: 如果发现 Bug → /review 审查相关代码
↓
Step 4: 修复代码 → /qa 重新测试
↓
Step 5: 所有测试通过 → /ship 发版小结
▪️ /browse 让 AI "看见"页面——启动真实浏览器，截图 + 描述 DOM 结构 ▪️ /qa 让 AI "操作"页面——输入、点击、提交、验证跳转和控制台 ▪️ 支持多种高级场景：表单校验、响应式测试、多步骤业务流程 ▪️ 给关键元素加 data-testid 能大幅提升 QA 的定位准确率 ▪️ 这是一套 用自然语言下达命令 的全自动端到端测试方案
在下一篇文章中，我们将完成 GStack 流水线的最后一环：/ship 一键发版，从提交到 PR 全自动化。
好了，本期的内容到这里就结束了，如果你觉得对你有帮助的话，欢迎点赞、在看、转发，我们下期见！Bye~
📝 作者：NIHoa ｜ 系列：GStack实战指南系列 ｜ 更新日期：2025-04-16