从头学 Claude Code（十）—— 让机器人帮试吃：测试自动化

本系列适合零基础新手，手把手带你掌握 AI 编程助手

上节回顾

上一讲我们学了代码审查，相当于请”监理”。这一讲，我们来学自动化测试，就像请了个”检测机器人”帮餐厅试菜。

1. 为什么要自动化测试？

想象一下：

你开一家餐厅，每天端盘子之前要不要试吃？ - 手工试吃：每道菜端出去前，厨师自己尝一口 - 自动化试吃：就像有个美食机器人，每次都按标准流程检测一遍

手工测试的问题： - 🤚 重复操作浪费时间——每天试吃一百遍，厨师会累晕 - 🦅 容易遗漏测试点——忙起来可能忘了尝某道菜 - 🔄 难以回归验证——改了菜谱后，以前通过的菜还能不能吃？

自动化测试的优势： - 🤖 一次编写，多次运行——就像写好检测程序，每天自动跑 - ⚡ 快速验证功能——机器人一秒钟就能尝遍所有菜 - 🔔 及时发现回归问题——改完菜谱立即知道哪些菜变味了

2. Playwright 是什么？

Playwright 是微软开发的自动化测试框架——就像给餐厅请了一个超级检测机器人。

它能帮你： - 🤖 自动操作浏览器——就像机器人帮你端盘子 - 📸 截图和录制——就像有监控摄像头 - 🌐 支持多浏览器——Chrome、Firefox、Safari 都能测

3. 安装 Playwright

# 在项目中安装
npm init -y
npm install -D @playwright/test

# 安装浏览器——就像给机器人装上感官
npx playwright install chromium

4. 基础测试写法——机器人的检测脚本

示例：测试登录功能

// tests/login.spec.js
const { test, expect } = require('@playwright/test');

test('登录成功', async ({ page }) => {
  // 1. 打开登录页——把客人领到餐桌
  await page.goto('http://localhost:3000/login');

  // 2. 输入账号密码——端上菜
  await page.fill('#username', 'testuser');
  await page.fill('#password', 'password123');

  // 3. 点击登录——客人开吃
  await page.click('button[type="submit"]');

  // 4. 验证跳转——看看客人有没有反应
  await expect(page).toHaveURL('/dashboard');
  await expect(page.locator('.user-name')).toHaveText('testuser');
});

5. Playwright 常用 API

页面操作——机器人怎么端盘子？

操作	代码	比喻
打开页面	`page.goto(url)`	把客人领到座位
点击元素	`page.click(selector)`	让客人动筷子
输入文字	`page.fill(selector, text)`	把菜端到面前
获取文本	`page.textContent(selector)`	尝尝菜的味道

断言——机器人怎么判断好吃？

断言	用法	比喻
文本匹配	`expect(locator).toHaveText(text)`	尝尝味道对不对
URL 匹配	`expect(page).toHaveURL(url)`	看看去了哪个包间
元素可见	`expect(locator).toBeVisible()`	看看菜有没有端上来
元素存在	`expect(locator).toBeAttached()`	看看厨房有没有这道菜

6. Claude Code 集成

场景一：生成测试代码

1	帮我为登录功能编写 Playwright 测试

Claude 会： - 分析登录页面结构——看看这道菜怎么做 - 生成测试用例——写好检测脚本 - 添加必要的断言——加上”好吃”的判断标准

就像说：“帮我写一个检测脚本，检测这道菜做对了没有”

场景二：运行测试

# 运行所有检测
npx playwright test

# 运行特定检测
npx playwright test tests/login.spec.js

# 显示检测报告
npx playwright show-report

场景三：调试测试

1	登录测试失败了，帮我分析原因

Claude 会： - 运行测试查看错误——把失败的检测报告拿来看 - 分析失败原因——为什么这道菜没通过检测 - 给出修复建议——怎么改才能通过

就像检测失败后，厨师说：“我来看看哪里没做好”

7. 测试最佳实践

实践一：测试独立——每道菜单独检测

// ✅ 好的写法：独立检测
test('用户注册', async ({ page }) => {
  await page.goto('/register');
  // ... 测试逻辑
});

// ✅ 好的写法：检测完清理
test.afterEach(async ({ page }) => {
  await cleanupTestData();
});

就像：每道菜单独装盘，不要混在一起

实践二：选择器优先顺序

1. data-testid（推荐）——就像贴标签
2. 文本选择器——看名字
3. CSS 选择器——看样子
4. XPath（最后选择）——看门牌号

💡 最佳实践：给重要元素加上 data-testid，就像给每道菜贴上标签

实践三：等待策略——别急，等菜端上来

// ✅ 等待菜端上来
await expect(page.locator('.success')).toBeVisible();

// ✅ 等待厨房做好
await page.waitForResponse('/api/user');

就像：不要急着尝，等菜端上来再说

8. 常见测试场景

场景	检测要点
表单提交	输入验证（调料对不对）、提交成功（味道对不对）、错误提示（盐放多了有没有说）
导航	URL 变化（去哪个包间）、页面内容更新（菜有没有换）
列表	数据渲染（菜有没有上齐）、分页（十道菜分两批上）、排序（按什么顺序上）
弹窗	打开（盖子揭开）、关闭（盖子盖上）、点击确认（吃完打包）
权限	登录后/未登录的可见性（VIP 座位和普通座位）

本节小结

Playwright：微软的自动化测试框架——检测机器人
核心 API：page 操作（端盘子）、expect 断言（尝味道）
集成方式：Claude Code 生成代码 + 运行测试
最佳实践：测试独立（每道菜单独检）、选择器优先级（用标签）、正确等待（等菜端上来）

💡 记住：自动化测试就像餐厅的检测机器人——一次投入，长期受益！

下节预告

下一讲：最后一讲——总结与进阶，看看学到了什么，下一步往哪走

有问题？评论区见！如果觉得有帮助，点个赞再走~

标签: #Claude Code #AI编程 #测试自动化 #Playwright

Stone's Blog

从头学 Claude Code（十）让机器人帮试吃——测试自动化