录制、重放和测量用户流程

可以先观看原文中的视频，了解新的 Recorder 面板（预览功能）。完成本教程后，你将学会使用 Recorder 面板录制、重放和测量用户流程。

原文说明：这是 Chrome 97 中的预览功能，团队仍在积极开发，并征集反馈。有关分享录制流程、编辑流程及步骤的更多信息，请参阅 Recorder 功能参考。此功能只在 Chrome 中提供，不在 Chromium 中提供。以上描述保留原文2021年版本范围。

打开 Recorder 面板

1. 打开 DevTools。
2. 点击 More options（更多选项）→ More tools（更多工具）→ Recorder。

也可以通过 Command Menu（命令菜单）打开 Recorder 面板。

简介

我们使用 咖啡下单演示页。“结账”是购物网站常见的用户流程。接下来会通过 Recorder 面板录制、重放和审查以下结账流程：

1. 将一杯咖啡加入购物车。
2. 再加入另一杯咖啡。
3. 进入购物车页面。
4. 移除一杯咖啡。
5. 开始结账。
6. 填写支付信息。
7. 提交结账。

录制用户流程

1. 打开演示页，点击 Start new recording，开始新录制。
2. 在 Recording name 文本框输入 coffee checkout。Selector attribute 文本框和 Selector types to record 复选框是可选设置；本教程保留默认值。详情见功能参考中的选择器说明。
3. 点击 Start a new recording。面板显示 Recording…，表示录制正在进行。
4. 点击 Cappuccino，将其加入购物车。
5. 点击 Americano，将其加入购物车。Recorder 会显示到目前为止执行的步骤。
6. 进入购物车页面，移除 Americano。也可以在菜单页悬停于 Total 按钮，在弹出的菜单里点击 Americano 旁的减号；但 Recorder 不会自动捕获悬停事件，因此录制结束后必须手动添加悬停步骤。
7. 点击 Total: $19.00，开始结账。
8. 在支付详情表单中填写 Name 和 Email，勾选 I would like to receive order updates and promotional messages.。
9. 点击 Submit，完成结账。即使尚未结束录制，也可以手动编辑步骤和添加断言。
10. 在 Recorder 面板点击 End recording，结束录制。

重放用户流程

录制完成后，点击 Replay 即可重放。你可以在页面上看到用户流程重放，Recorder 面板也会显示进度。

如果录制时点错了，或者流程无法正常工作，可以调试流程：降低重放速度、设置断点，然后逐步执行。

重放每个对应步骤之前，Recorder 会等待元素在视口中可见或可点击，或尝试自动滚动，让元素进入视口。

模拟慢速网络

通过 Replay settings 可以模拟慢速网络。例如，展开 Replay settings，在 Network 下拉列表中选择 Slow 3G。

原文指出，未来可能支持更多设置，并邀请用户反馈希望添加的重放配置。

测量用户流程

点击 Measure performance 可以测量用户流程性能。例如，结账是购物网站的重要流程；可以只录制一次，然后定期测量。

点击 Measure performance 后，会先触发流程重放，再在 Performance 面板打开性能跟踪记录。

可以使用 Performance 面板分析页面运行时性能。按原文界面描述，启用 Web Vitals 复选框后，可以查看 Web Vitals 指标，识别改善浏览体验的机会。

编辑步骤

下面介绍编辑录制流程步骤的基本选项。完整选项清单请参阅 Recorder 功能参考的 Edit steps。

展开步骤

展开每个步骤，查看动作细节。例如展开 Click Element “Cappuccino”。

原图中的步骤包含两个选择器。重放时，Recorder 会依次尝试使用选择器查询元素。如果第一个选择器查询成功，就跳过第二个并进入下一步。

添加和删除步骤中的选择器

选择器可以添加或删除。例如，本例中仅使用 aria/Cappuccino 已经足够，因此可以删除选择器 #2：将鼠标悬停在该选择器上，点击减号。

编辑步骤中的选择器

选择器也可以编辑。如果希望选择 Mocha 而不是 Cappuccino：

1. 将选择器值改为 aria/Mocha。也可以点击 Select，然后点击页面上的 Mocha。
2. 重放流程，此时应选择 Mocha。
3. 尝试编辑 type、target、value 等其他步骤属性。

添加和删除步骤

可以添加或删除步骤，用来补充动作或移除意外录入的动作，无需重新录制整个流程：

1. 右键点击待编辑步骤，或点击其旁的三点图标。
2. 选择 Remove step 删除该步骤。例如，Mocha 步骤之后的 Scroll 事件并不必要。
3. 假设你希望执行任何动作前，先等待页面显示9杯咖啡。在 Mocha 步骤菜单中选择 Add step before。
4. 在新建的 Assert Element 步骤中设置：
   • type: waitForElement
   • selector #1: .cup
   • operator: ==（点击 add operator）
   • count: 9（点击 add count）
5. 再次重放流程，观察变化。

下一步

教程到此完成。有关导入、导出等更多 Recorder 功能和工作流程，请阅读原文链接的 Recorder 功能参考。

原文：Record, replay, and measure user flows
作者：Jecelyn Yeen、Sofia Emelianova。原文最后更新：2021年11月2日 UTC。本文为中文译稿，界面名称保留原文以方便对应；当前 Chrome 界面尚未重新实测。除另有说明，页面内容采用 CC BY 4.0，代码示例采用 Apache 2.0。详情见 Google Developers 网站政策。Java 是 Oracle 和／或其关联公司的注册商标。本文进行了中文翻译；原截图和视频尚待资源核验。