请观看下方的视频,了解新的 Recorder 面板(预览版功能)。
请完成本教程,了解如何使用 Recorder 面板录制、重放和衡量用户流。
如需详细了解如何共享录制的用户流,修改这些流及其步骤,请参阅 Recorder 功能参考。
打开“记录器”面板
简介
我们将使用以下咖啡订购演示页面。结账是购物网站中常见的用户流。
在接下来的部分中,我们将向您介绍如何使用 Recorder 面板录制、重放和审核以下结账流程:
- 将一杯咖啡加入购物车。
- 再将一杯咖啡加入购物车。
- 前往购物车页面。
- 从购物车中移除一杯咖啡。
- 开始结账流程。
- 填写付款信息。
- 结账。
记录用户流
- 打开此演示页面。点击 Start new recording 按钮以开始。
- 在 Recording name 文本框中输入“coffee checkout”。
- 点击 Start a new recording 按钮。录制已开始。面板中显示 Recording... 表示录制正在进行中。
- 点击卡布奇诺将卡布奇诺添加到购物车。
- 点击 Americano 将商品添加到购物车。请注意,Recorder 会显示您到目前为止已执行的步骤。
- 前往购物车页面,从购物车中移除“Americano”。
不过,在完成记录后,您必须手动添加悬停步骤,因为 Recorder 不会自动捕获悬停事件。 1. 点击 Total: $19.00 按钮开始结账流程。 1. 在付款明细表单中,填写姓名和电子邮件文本框,然后选中我希望接收订单动态和推广邮件复选框。 1. 点击提交按钮以完成结账流程。
1. 在 Recorder 面板中,点击 End recording 按钮以结束录制。重放用户流
录制完用户流后,您可以点击 Replay 按钮重放用户流。
您可以在页面上看到用户流重放。重放进度也会显示在 Recorder 面板中。
如果您在录制过程中误点击或发生了功能异常,可以调试用户体验流程:减慢重放速度,设置断点,然后逐步执行。
模拟慢速网络
您可以通过配置 Replay settings 来模拟慢速网络连接。例如,展开重放设置,然后在网络下拉菜单中选择慢速 3G。
我们日后可能会支持更多设置。请与我们分享您想要使用的重放设置!
衡量用户流
您可以通过点击 Measure performance 按钮来衡量用户流的性能。例如,结账是购物网站的关键用户流。借助 Recorder 面板,您可以记录结账流程一次并定期衡量。
点击 Measure performance 按钮会先触发用户流重放,然后在 Performance 面板中打开性能跟踪记录。
了解如何使用性能面板分析网页的运行时性能。您可以在性能面板中选中“网页指标”复选框,以便查看网页指标指标,发掘改善用户浏览体验的机会。
修改步骤
我们来了解一下用于修改录制工作流程中的步骤的基本选项。
有关修改选项的完整列表,请参阅功能参考中的修改步骤。
展开步骤
展开每个步骤即可查看相应操作的详细信息。例如,展开点击元素“Cappuccino”步骤。
上面的步骤显示了两个选择器。如需了解详情,请参阅了解录制内容的选择器。
重放用户流时,Recorder 会尝试按顺序使用其中一个选择器查询相应元素。 例如,如果 Recorder 使用第一个选择器成功查询了该元素,则会跳过第二个选择器,继续执行下一步。
在步骤中添加和移除选择器
您可以添加或移除任何选择器。例如,您可以移除选择器 2,因为在本例中,仅 aria/Cappuccino
就已足够。将鼠标悬停在选择器 2 上,然后点击 -
将其移除。
一步修改选择器
选择器也是可修改的。例如,如果您想选择“Mocha”而非“Cappuccino”,可以执行以下操作:
请改为将选择器值修改为 aria/Mocha。
或者,点击 Select 按钮,然后点击页面上的 Mocha。
现在重放流程,应该选择 Mocha 而不是 Cappuccino。
尝试修改其他步骤属性,如 type、target、value 等。
添加和移除步骤
我们还提供了用于添加和移除步骤的选项。如果您想添加额外步骤或移除意外添加的步骤,此方法非常有用。您无需重新录制用户体验流程,只需进行编辑即可:
右键点击要修改的步骤,或点击它旁边的 三点状图标。
您可以选择移除步骤将其移除。例如,Mocha 步骤之后的 Scroll 事件不是必要的。
假设您想等到 9 杯咖啡显示在页面上,然后再执行任何步骤。在 Mocha 步骤菜单中,选择 Add step before。
在 Assert Element 中,使用以下详细信息修改新步骤:
- 类型:waitForElement
- 选择器 1:.cup
- 运算符:==(点击添加运算符按钮)
- count:9(点击 Add count 按钮)
立即重放流程以查看更改。
后续步骤
恭喜,您已学完教程!
如需了解与 Recorder 相关的更多功能和工作流(例如导入和导出),请参阅 Recorder 功能参考。