录制、重放和衡量用户流

Jecelyn Yeen

Sofia Emelianova

请观看下方的视频，了解新的 Recorder 面板（预览版功能）。

请完成本教程，了解如何使用 Recorder 面板录制、重放和衡量用户流。

注意：这是 Chrome 97 中的预览版功能。我们的团队正在努力完善此功能，期待收到您的反馈，希望我们进一步改进此功能。

如需详细了解如何共享录制的用户流，修改这些流及其步骤，请参阅 Recorder 功能参考。

注意：此功能仅适用于 Chrome，而不适用于 Chromium。

打开“记录器”面板

1. 打开开发者工具。

2. 依次点击 More options（更多选项）   > More tools（更多工具）> Recorder（录音机）。

   

   或者，使用命令菜单打开 Recorder 面板。

   

简介

我们将使用以下咖啡订购演示页面。结账是购物网站中常见的用户流。

在接下来的部分中，我们将向您介绍如何使用 Recorder 面板录制、重放和审核以下结账流程：

1. 将一杯咖啡加入购物车。
2. 再将一杯咖啡加入购物车。
3. 前往购物车页面。
4. 从购物车中移除一杯咖啡。
5. 开始结账流程。
6. 填写付款信息。
7. 结账。

记录用户流

1. 打开此演示页面。点击 Start new recording 按钮以开始。
2. 在 Recording name 文本框中输入“coffee checkout”。
   注意：“选择器属性”文本框和“要录制的选择器类型”复选框是可选的。在本教程中，保留默认设置。

如需了解详情，请参阅了解选择器。 1. 点击 Start a new recording 按钮。录制已开始。面板中显示 Recording... 表示录制正在进行中。 1. 点击 Cappuccino 卡，将卡布奇诺添加到购物车。 1. 点击 Americano 将商品添加到购物车。请注意，Recorder 会显示您到目前为止已执行的步骤。 1. 前往购物车页面，从购物车中移除“Americano”。

注意：您也可以选择在菜单页面上移除“Americano”，方法是将鼠标悬停在总计按钮上，然后在弹出式菜单中点击 Americano 旁边的 -。

不过，在完成记录后，您必须手动添加悬停步骤，因为 Recorder 不会自动捕获悬停事件。

1. 点击 Total: $19.00 按钮开始结账流程。 1. 在付款明细表单中，填写姓名和电子邮件文本框，然后选中我希望接收订单动态和推广邮件复选框。 1. 点击提交按钮以完成结账流程。

注意：您甚至可以在结束录制之前手动修改步骤和添加断言。

1. 在 Recorder 面板中，点击 End recording 按钮以结束录制。

重放用户流

录制完用户流后，您可以点击 Replay 按钮重放用户流。

您可以在页面上看到用户流重放。重放进度也会显示在 Recorder 面板中。

如果您在录制过程中误点击或发生了功能异常，可以调试用户体验流程：减慢重放速度，设置断点，然后逐步执行。

要点：重放用户流记录时，Recorder 将等待，直到相应元素在视口中可见或可点击，或者尝试自动将元素滚动到视口后，再重放相应的步骤。

模拟慢速网络

您可以通过配置 Replay settings 来模拟慢速网络连接。例如，展开重放设置，然后在网络下拉菜单中选择慢速 3G。

我们日后可能会支持更多设置。请与我们分享您想要使用的重放设置！

衡量用户流

您可以通过点击 Measure performance 按钮来衡量用户流的性能。例如，结账是购物网站的关键用户流。借助 Recorder 面板，您可以记录结账流程一次并定期衡量。

点击 Measure performance 按钮会先触发用户流重放，然后在 Performance 面板中打开性能跟踪记录。

了解如何使用性能面板分析网页的运行时性能。您可以在性能面板中选中“网页指标”复选框，以便查看网页指标指标，发掘改善用户浏览体验的机会。

修改步骤

我们来了解一下用于修改录制工作流程中的步骤的基本选项。

有关修改选项的完整列表，请参阅功能参考中的修改步骤。

展开步骤

展开每个步骤即可查看相应操作的详细信息。例如，展开点击元素“Cappuccino”步骤。

上面的步骤显示了两个选择器。如需了解详情，请参阅了解录制内容的选择器。

重放用户流时，Recorder 会尝试按顺序使用其中一个选择器查询相应元素。 例如，如果 Recorder 使用第一个选择器成功查询了该元素，则会跳过第二个选择器，继续执行下一步。

在步骤中添加和移除选择器

您可以添加或移除任何选择器。例如，您可以移除选择器 2，因为在本例中，仅 aria/Cappuccino 就已足够。将鼠标悬停在选择器 2 上，然后点击 - 将其移除。

一步修改选择器

选择器也是可修改的。例如，如果您想选择“Mocha”而非“Cappuccino”，可以执行以下操作：

1. 请改为将选择器值修改为 aria/Mocha。

   

   或者，点击 Select 按钮，然后点击页面上的 Mocha。

2. 现在重放流程，应该选择 Mocha 而不是 Cappuccino。

3. 尝试修改其他步骤属性，如 type、target、value 等。

添加和移除步骤

我们还提供了用于添加和移除步骤的选项。如果您想添加额外步骤或移除意外添加的步骤，此方法非常有用。您无需重新录制用户体验流程，只需进行编辑即可：

1. 右键点击要修改的步骤，或点击它旁边的 三点状图标。

   

2. 您可以选择移除步骤将其移除。例如，Mocha 步骤之后的 Scroll 事件不是必要的。

3. 假设您想等到 9 杯咖啡显示在页面上，然后再执行任何步骤。在 Mocha 步骤菜单中，选择 Add step before。

4. 在 Assert Element 中，使用以下详细信息修改新步骤：

   • 类型：waitForElement
   • 选择器 1：.cup
   • 运算符：==（点击添加运算符按钮）
   • count：9（点击 Add count 按钮）

5. 立即重放流程以查看更改。

后续步骤

恭喜，您已学完教程！

如需了解与 Recorder 相关的更多功能和工作流（例如导入和导出），请参阅 Recorder 功能参考。