录制、重放和衡量用户流

叶杰林
Jecelyn Yeen
索菲亚·埃梅利安诺娃
Sofia Emelianova

请观看下方的视频,大致了解新的 Recorder 面板(预览版功能)。

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

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

打开“记录器”面板

  1. 打开开发者工具
  2. 依次点击 More options(更多选项) 更多。   > More tools > Recorder(录音机)。

    “Recorder”菜单。

    或者,使用命令菜单打开 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”。

1. 点击 Total: $19.00 按钮,开始结账流程。 1. 在“付款明细”表单中,填写名称电子邮件文本框,然后选中我希望接收订单更新和促销信息复选框。 付款明细表单。 1. 点击 Submit 按钮以完成结账流程。 1. 在 Recorder 面板中,点击 结束录制。 End recording 按钮以结束录制。

重放用户流

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

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

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

模拟慢速网络

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

重放设置。

未来我们可能会支持更多设置。根据需要与我们分享重放设置!

衡量用户流

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

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

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

性能面板。

修改步骤

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

有关修改选项的完整列表,请参阅地图项参考中的修改步骤

展开步骤

展开每个步骤即可查看操作的详细信息。例如,展开 Click Element“Cappuccino”步骤。

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

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

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

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

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

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

在步骤中修改选择器

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

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

    修改选择器。

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

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

  3. 尝试修改其他步骤属性,例如 typetargetvalue 等。

添加和移除步骤

还有用于添加和移除步骤的选项。如果您想添加额外步骤或移除意外添加的步骤,此功能会非常有用。您无需重新录制用户流,只需进行编辑即可:

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

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

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

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

  4. Assert Element 中,使用以下详细信息修改新步骤:

    • type:waitForElement
    • 选择器 1:.cup
    • 运算符:==(点击添加运算符按钮)
    • count:9(点击 Add count 按钮) 咖啡结账的新步骤已更新,包含上述详细信息。
  5. 重放。现在重放流程以查看更改。

后续步骤

恭喜,您已完成教程!

如需探索与 Recorder 相关的更多功能和工作流(例如导入和导出),请参阅录音机功能参考