Day 03 - Recording Scripts with Codegen

今日目标

使用 Playwright Test Generator 快速生成脚本。
理解录制代码不是最终代码，需要重构。

学习时间安排（60–120 分钟）

时间	模块	做什么
0-20 分钟	核心概念与词汇	读概念表，重点理解 codegen 生成的东西哪些可信、哪些不可信。
20-45 分钟	官方文档阅读	读 Codegen 文档，了解它还能做哪些事（生成断言、hover、语言选项）。
45-75 分钟	实操练习	完成录制任务，得到一份原始录制脚本。
75-105 分钟	示例代码改写	重构录制脚本：删冗余、补意图、换 locator。
105-120 分钟	复盘与作业	对比重构前后差异，完成今日问题。

核心概念与词汇

English	中文	场景用法
codegen	代码生成器	Use it when you describe the CLI that records browser actions into test code.
Test Generator	测试生成器	Use it when you explain the interactive tool opened by `npx playwright codegen`.
record	录制	Use it when you describe capturing clicks, inputs, and navigation as code.
generated locator	生成的定位器	Use it when you review locators codegen picked, usually text-based or CSS-based.
refactor	重构	Use it when you clean up recorded code without changing its behavior.
assertion generation	断言生成	Use it when you let codegen add `expect` statements via the toolbar.
pick locator	拾取定位器	Use it when you hover an element to inspect candidate locators.
brittle selector	脆弱选择器	Use it when you explain why a recorded CSS path breaks after a UI change.
test intent	测试意图	Use it when you rewrite generated steps into business-meaningful names.
exploration	页面探索	Use it when you use codegen to learn a page's DOM and roles.

学习材料

必读：[Codegen](https://playwright.dev/docs/codegen-intro)
必读：[Locators](https://playwright.dev/docs/locators) 的开头部分（明天会深入）
选读：[Picking a locator](https://playwright.dev/docs/locators#picking-a-locator)

重点理解

学习命令：

npx playwright codegen https://playwright.dev/

Codegen 能做：

打开浏览器。
录制用户操作。
自动生成 locator。
生成断言。
辅助探索页面元素。

但要注意：

录制脚本通常需要清理。
不能完全依赖录制。
要检查 locator 是否稳定。
要补充断言和测试意图。

实操步骤

使用 codegen 录制：

打开 Playwright 官网。
点击 Docs。
搜索某个关键词，例如 “locators”。
打开搜索结果。
复制生成代码。
重构成更清晰的测试。

示例代码

录制出来的原始脚本（节选）：

await page.getByRole('button', { name: 'Search' }).click();
await page.locator('input.DocSearch-Input').fill('locators');
await page.getByRole('link', { name: 'Locators Playwright' }).click();

重构后的脚本：

test('search locators in docs', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getByRole('button', { name: 'Search' }).click();
  await page.getByPlaceholder('Search docs').fill('locators');
  await page.getByRole('link', { name: /Locators/ }).first().click();
  await expect(page).toHaveURL(/docs\/locators/);
});

重构说明：

补上了 goto 和测试意图（测试名）。
用 getByPlaceholder 替换录制出的 input.DocSearch-Input。
补上了 URL 断言，验证搜索结果真的打开了。

常见坑

把录制脚本直接提交进项目，locator 全是脆弱的 CSS/XPath。
录制时网络慢，生成大量无意义步骤（重复点击、等待）。
不补断言，录制脚本只操作不验证。
用 codegen 录制“随机探索”，产出的脚本没有业务主线。
在 hover/拖拽等复杂交互上盲目信任录制结果。

今日产出

一份 codegen 原始脚本。
一份你重构后的脚本。
写出你修改了哪些地方。

今日问题

Codegen 适合用在什么阶段？
为什么不能直接把录制脚本作为长期维护脚本？
如何判断生成的 locator 是否稳定？
录制脚本中哪些代码最容易冗余？
Codegen 对新手最大的帮助是什么？

复盘要点

Codegen 是“探索工具 + 草稿生成器”，不是“测试写完器”。
重构的每一步都应该有理由：换 locator 是因为更稳定，补断言是因为有业务结果。
从今天起建立习惯：录制 → 删除冗余 → 换语义化 locator → 补断言 → 改测试名。

AI 时代扩展：AI 辅助 Playwright 测试

新增概念

English	中文
AI test generation	AI 测试生成
draft test	测试草稿
locator quality	定位器质量
manual cleanup	人工清理

适用场景

AI 生成测试和 codegen 录制有同样的定位：帮你出草稿。可以把录制的原始脚本丢给 AI 重构，再人工核对 AI 换的 locator 是否真的更稳定。

可复用表达 / 提示词

这是 codegen 录制的脚本，请把它重构为可维护的测试：删除冗余步骤、改用推荐的语义化 locator、补充断言，并逐条说明修改理由。

追问加练

AI 重构后的 locator 你如何验证它仍然指向同一个元素？
AI 删掉了一个你认为是关键步骤的操作，你会怎么处理？
录制和 AI 生成，哪个草稿更接近真实用户路径？为什么？

今日作业

保存原始录制脚本和重构脚本两个文件，写清楚 5 处以上修改理由。
用 codegen 再录制一个表单填写场景（如登录页），练习快速清理。
让 AI 重构你的录制脚本，对比它和你的重构思路差在哪里。

自检清单

我能独立启动 codegen 并录制一段流程。
我能说出录制脚本至少 3 类需要清理的代码。
我的重构脚本使用了语义化 locator 而不是长 CSS。
我的重构脚本有明确的测试名和断言。
我知道明天 CLI 命令里哪些用于调试。