录制、重放和衡量用户流

Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

打开“录音机”面板

  1. 打开开发者工具。

  2. 依次点击 More options   更多。   > More tools > 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 会显示您到目前为止已执行的步骤。 “Recorder”面板中的步骤。
  6. 前往购物车页面，然后从购物车中移除“Americano”。
  7. 点击“Total: $19.00”按钮，开始结账流程。
  8. 在付款信息表单中，填写“Name”和“Email”文本框，然后选中“I would like to receive order updates and promotional messages.”复选框。付款信息表单。
  9. 点击“提交”按钮完成结账流程。
  10. 在 Recorder 面板中，点击 结束录制。 End recording 按钮结束录制。

重放用户流

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

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

如果您在录制过程中误点击了某个按钮，或者某项操作不起作用，则可以调试用户体验流程：放慢重放速度、设置断点，然后逐步执行。

模拟网络速度缓慢

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

重放设置。

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

衡量用户流

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

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

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

“性能”面板。

修改步骤

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

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

展开步骤

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

在“Recorder”面板中，“Cappuccino”元素已展开，显示了类型、目标、选择器、X 轴偏移和 Y 轴偏移。

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

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

向步骤添加和移除选择器

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

开发者工具的“Recorder”面板显示了一个用于移除选择器的选项。

修改步骤中的选择器

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

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

    修改选择器。

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

  2. 现在重放该流程，它应会选择“Mocha”而非“Cappuccino”。

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

添加和移除步骤

我们还提供了用于添加和移除步骤的选项。如果您想添加额外步骤或移除意外添加的步骤，这些选项会非常有用。您无需重新录制用户流，只需修改它即可：

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

    步骤的下拉菜单，其中包含用于移除和添加前后步骤的选项。

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

  3. 假设您想等到 9 杯咖啡全显示在页面上后，再执行任何步骤。在 Mocha 步骤的菜单中，选择 Add step before。 添加了一个名为“Assert Element”的新步骤，该步骤现在可供修改。

  4. 在 Assert Element 中，按照以下详细说明修改新添加的这个步骤：

    • type：waitForElement
    • 选择器 1：.cup
    • operator：==（点击 Add operator 按钮）
    • count：9（点击 add count 按钮） 已按照上述详细说明更新了咖啡结账用户流的新步骤。

  5. 重放。现在重放该流程，看看具体变化。

后续步骤

恭喜，您已完成本教程！

如需探索与录制器相关的更多功能和工作流（例如导入和导出），请参阅录制器功能参考文档。