录制、重放和衡量用户流

Jecelyn Yeen

Sofia Emelianova

请观看下方视频，大致了解新的录音机面板（预览版功能）。

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

注意：这是 Chrome 97 中的预览功能。我们的团队正在努力完善此功能，期待您提供反馈，以便我们进一步改进。

如需详细了解如何分享已记录的用户体验历程、修改这些历程及其步骤，请参阅录制器功能参考。

注意：此功能仅适用于 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”。
   注意：选择器属性文本框和记录时要使用的选择器类型复选框为可选项。在本教程中，请将默认值保持不变。如需了解详情，请参阅了解选择器。
3. 点击 Start a new recording 按钮。录制随即开始。面板中会显示 Recording...，表示正在进行录制。
4. 点击 Cappuccino 即可将其添加到购物车。
5. 点击 Americano 将其添加到购物车。请注意，Recorder 会显示您到目前为止已执行的步骤。
6. 前往购物车页面，然后从购物车中移除“Americano”。
   注意：您可以选择在菜单页面上移除美式咖啡，方法是将鼠标悬停在总计按钮上，然后点击弹出式菜单中美式咖啡旁边的 -。不过，您必须在录制完成后手动添加悬停步骤，因为录制器不会自动捕获悬停事件。
7. 点击“Total: $19.00”按钮，开始结账流程。
8. 在付款明细表单中，填写名称和电子邮件地址文本框，然后选中我愿意接收订单动态和促销讯息复选框。
9. 点击提交按钮完成结账流程。
   注意：您可以手动修改步骤和添加断言，甚至在结束录制之前也可以。
10. 在 Recorder 面板中，点击 End recording 按钮结束录制。

重放用户流

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

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

如果您在录制期间误点击或某些内容无法正常运行，您可以调试用户流：减慢重放速度，设置断点，然后逐步执行。

要点：重放用户流录制内容时，记录器会等到相应元素在视口中可见或可点击，或者尝试自动将元素滚动到视口中，然后重新播放相应步骤。

模拟慢速网络

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

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

衡量用户流

您可以点击衡量性能按钮来衡量用户流的性能。例如，结账是购物网站的关键用户流。使用 Recorder 面板，您可以记录结账流程一次，然后定期进行衡量。

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

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

修改步骤

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

如需查看编辑选项的完整列表，请参阅功能参考中的编辑步骤。

展开步骤

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

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

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

向步骤添加和移除选择器

您可以添加或移除任何选择器。例如，您可以移除 selector #2，因为在本例中仅使用 aria/Cappuccino 就足够了。将光标悬停在“selector #2”上，然后点击 - 即可将其移除。

修改步骤中的选择器

选择器也是可修改的。例如，如果您想选择“摩卡咖啡”，而不是“卡布奇诺”，则可以：

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

   

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

2. 现在重放该流程，此时系统应选择“摩卡咖啡”，而不是“卡布奇诺”。

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

添加和移除步骤

系统还提供了用于添加和移除步骤的选项。如果您想添加额外步骤或移除意外添加的步骤，上述操作将十分有用。您无需重新录制用户流，只需修改它即可：

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

   

2. 您可以选择移除步骤将其移除。例如，Mocha 步骤之后的滚动事件就没有必要。

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

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

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

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

后续步骤

恭喜，您已学完教程！

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