目录 (Outline)
- 一、 自动化测试的「难」：为什么手写脚本这么慢？
- 二、 Chrome Recorder：浏览器内置的录制器
- 三、 核心功能：录制、回放与性能剖析
- 四、 快速上手：录制一个复杂的用户登录流程
- 五、 进阶：一键导出为 Puppeteer/Cypress 脚本
- 六、 实战 1：在 CI/CD 中集成录制生成的测试脚本
- 七、 实战 2：利用录制器进行性能回测 (Performance Replay)
- 八、 总结：自动化测试进入「低代码」时代
一、 自动化测试的「难」：为什么手写脚本这么慢？
1. 历史局限
传统的自动化测试开发：
- 定位元素难：需要手动查找复杂的 CSS 选择器或 XPath。
- 维护成本高：页面稍微一改，脚本就失效。
- 调试耗时：脚本运行失败后，很难还原当时的现场。
2. 痛点
开发者往往因为手写脚本太麻烦而放弃编写 E2E（端到端）测试。
二、 Chrome Recorder：浏览器内置的录制器
Chrome 101+ 引入了原生的 Recorder 面板。
核心特性
- 零配置：无需安装任何插件，F12 即可开启。
- 多重定位方案：它会自动记录多种选择器（Selector），确保脚本的鲁棒性。
- 性能集成：录制过程中可以同步捕获性能指标。
三、 核心功能：录制、回放与性能剖析
1. 录制 (Recording)
它会捕捉你的每一次点击、输入、滚动和页面跳转。
2. 回放 (Replay)
你可以随时在浏览器中重现之前的操作，并支持设置不同的网络环境（如 3G/Offline）。
四、 快速上手：录制一个复杂的用户登录流程
实现步骤
- 打开 DevTools -> More tools -> Recorder。
- 点击「Start new recording」。
- 在页面上执行：输入账号 -> 输入密码 -> 点击登录 -> 跳转到个人中心。
- 点击「End recording」。
此时，你已经获得了一个完整的交互流。
五、 进阶：一键导出为 Puppeteer/Cypress 脚本
这是录制器最强大的地方。你可以将录制的流程直接导出为 Puppeteer 脚本：
// 导出的 Puppeteer 脚本示例
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com/login');
await page.type('#username', 'test_user');
await page.click('#submit-btn');
await browser.close();
})();
六、 实战 1：在 CI/CD 中集成录制生成的测试脚本
导出的脚本是标准的 Node.js 代码。
- 代码提交：将录制的脚本存入项目的
tests目录。 - GitHub Actions：在 CI 中运行
npm test。 - 自动报告：一旦页面逻辑变更导致录制流程走不通，CI 就会报错。
七、 实战 2：利用录制器进行性能回测 (Performance Replay)
在 Recorder 中，你可以点击「Replay with Performance insights」。
- 它会自动在后台开启 Performance 面板。
- 录制流程结束后，你会看到每一个交互动作对应的 LCP、CLS 和 INP 指标。
这种方式让「交互性能测试」变得前所未有的简单。
八、 总结：自动化测试进入「低代码」时代
Chrome Recorder + Puppeteer 的组合，彻底改变了 E2E 测试的生产方式。它让非技术人员（如 QA 或 PM）也能参与到自动化测试的构建中，真正实现了「测试驱动开发」。
