在 Chrome 开发者工具 Recorder 面板的综合功能参考中,探索共享用户流、修改用户流及其步骤的方法。
如需了解使用 Recorder 面板的基础知识,请参阅录制、重放和测量用户流。
了解和自定义快捷方式
使用快捷方式可更快速地在 Recorder 中导航。如需查看默认快捷键的列表,请参阅“录音机”面板的键盘快捷键。
如需直接在 Recorder 中打开列出所有快捷键的提示,请点击右上角的帮助 Show shortcuts。
如需自定义录音机快捷方式,请执行以下操作:
修改用户流
Recorder 面板的顶部有以下选项:
- 添加新录音
。点击 + 图标以添加新录制内容。
- 查看所有录制内容
。下拉菜单会显示已保存的录音的列表。选择 [number] record(s) 选项,展开和管理已保存的录制内容的列表。
导出录制内容
。如需进一步自定义脚本或将其共享以用于 bug 报告,您可以采用以下任一格式导出用户流:
- JSON 文件。
- @puppeteer/replay 脚本。
- Puppeteer 脚本触发。
- Puppeteer(包括 Lighthouse 分析)。
如需详细了解格式,请参阅导出用户流。
导入录音
。仅支持 JSON 格式。
删除录音
。删除所选录音。
您还可以点击录制内容旁边的修改按钮 来修改其名称。
共享用户流
您可以在录音机中导出和导入用户流。这对于 bug 报告非常有用,因为您可以分享重现 bug 的步骤的准确记录。您还可以使用外部库导出和重放视频。
导出用户流
如需导出用户流,请执行以下操作:
- 打开要导出的用户流。
- 点击 Recorder 面板顶部的
Export。
- 从下拉列表中选择下列格式之一:
<ph type="x-smartling-placeholder">
- </ph>
- JSON 文件。将录制内容下载为 JSON 文件。
- @puppeteer/replay.将录制内容下载为 Puppeteer Replay 脚本。
- Puppeteer。将录制内容下载为 Puppeteer 脚本。
- Puppeteer(包括 Lighthouse 分析)。将录制内容下载为 Puppeteer 脚本,其中包含嵌入的 Lighthouse 分析。
- 录音机的导出扩展程序提供的一个或多个选项。
- 保存文件。
您可以对每个默认导出选项执行以下操作:
- JSON。修改人类可读的 JSON 对象,并将 JSON 文件导入回 Recorder。
- @puppeteer/replay.使用 Puppeteer Replay 库重放脚本。导出为 @puppeteer/replay 脚本时,步骤仍为 JSON 对象。如果您希望与 CI/CD 流水线集成,但仍能够灵活地修改 JSON 格式的步骤,然后将其转换并导入回 Recorder,则此选项是理想之选。
- Puppeteer 脚本。使用 Puppeteer 重放脚本。由于步骤会转换为 JavaScript,因此您可以进行更精细的自定义,例如循环步骤。需要注意的是,您无法将此脚本重新导入 Recorder。
Puppeteer(包括 Lighthouse 分析)。此导出选项与上一个导出选项相同,但包含用于生成 Lighthouse 分析的代码。
运行脚本并在
flow.report.html
文件中查看输出:# npm i puppeteer lighthouse node your_export.js
安装扩展程序,以自定义格式导出
请参阅录音机扩展程序。
导入用户流
如需导入用户流,请执行以下操作:
- 点击 Recorder 面板顶部的 Import
按钮。
- 选择包含所记录用户流的 JSON 文件。
- 点击
Replay 按钮以运行导入的用户流。
使用外部库重放
Puppeteer Replay 是由 Chrome 开发者工具团队维护的开源库。它基于 Puppeteer 构建而成。它是一个命令行工具,您可以使用该工具重放 JSON 文件。
除此之外,您还可以使用以下第三方库转换和重放 JSON 文件。
将 JSON 用户流转换为自定义脚本:
- Cypress Chrome 记录器。您可以使用它将用户流 JSON 文件转换为 Cypress 测试脚本。观看此演示,了解实际应用情况。
- 夜间手表 Chrome 录制器。您可以使用它将用户体验流 JSON 文件转换为 Nightwatch 测试脚本。
- CodeceptJS Chrome 记录器。您可以使用它将用户流 JSON 文件转换为 CodeceptJS 测试脚本。
重放 JSON 用户流:
- 使用 Testcafe 进行重放。您可以使用 TestCafe 来重放用户流 JSON 文件,并为这些记录生成测试报告。
- 利用 Sauce Labs 重放。您可以使用 saucectl 在 Sauce Labs 上重放 JSON 文件。
调试用户流
与任何代码一样,有时您必须调试记录的用户流程。
为了帮助您进行调试,您可以使用 Recorder 面板减慢重放速度、设置断点、逐步执行执行,以及按步骤并行检查各种格式的代码。
放慢重放速度
默认情况下,Recorder 会尽可能快速地重放用户流。如需了解录像中发生了什么,您可以放慢重放速度:
- 打开
重放下拉菜单。
- 选择一个重放速度选项:
<ph type="x-smartling-placeholder">
- </ph>
- 正常(默认)
- 慢速
- 非常慢
- 极慢
检查代码
如需检查各种格式的用户流代码,请执行以下操作:
- 在 Recorder 面板中打开录音。
- 点击步骤列表右上角的显示代码。
- Recorder 并排显示步骤及其代码。
- 当您将鼠标悬停在某个步骤上时,Recorder 会以任何格式突出显示其相应代码,包括由扩展程序提供的代码。
展开格式下拉列表,选择用于导出用户流的格式。
它可以是以下三种默认格式之一(JSON、@puppeteer/replay、Puppeteer 脚本或由扩展程序提供的格式)。
通过修改步骤参数和值继续调试录制。代码视图不可修改,但当您对左侧的步骤进行更改时,它会随之更新。
设置断点并逐步执行
如需设置断点并逐步执行,请执行以下操作:
- 将鼠标悬停在录音中任意步骤旁边的
圆圈上。圆圈会变成
断点图标。
- 点击
断点图标,然后重放录制内容。执行会在断点处暂停。
- 如需逐步完成执行,请点击 Recorder 面板顶部的操作栏中的
Execute one step 按钮。
- 如需停止重放,请点击
取消重放。
修改步骤
无论是录制期间还是之后,您都可以通过点击录制内容旁边的 按钮来修改录制的任何步骤。
添加步骤
有时,您可能需要手动添加步骤。例如,Recorder 不会自动捕获 hover
事件,因为这会污染录制,而且并非所有此类事件都有用。不过,下拉菜单等界面元素只能显示在 hover
上。您可以向依赖于此类元素的用户流程手动添加 hover
步骤。
要手动添加步骤,请执行以下操作:
- 打开此演示页面并开始录制新的视频。
- 在视口中将鼠标悬停在相应元素上。此时会弹出操作菜单。
- 从菜单中选择一项操作,然后结束录制。Recorder 仅捕获点击事件。
- 点击
重放以尝试重放录制内容。超时后重放失败,因为 Recorder 无法访问菜单中的相应元素。
- 点击 Click 步骤旁边的
三点状按钮,然后选择 Add step before。
- 展开新步骤。默认情况下,它的类型为
waitForElement
。点击type
旁边的值,然后选择hover
。 - 接下来,为新步骤设置适当的选择器。点击
选择,然后点击
Hover over me!
元素上弹出式菜单之外的一个区域。选择器设置为#clickable
。 - 尝试重新重放录制内容。添加悬停步骤后,Recorder 会成功重放该流程。
添加断言
在记录期间,您可以断言 HTML 属性和 JavaScript 属性等。如需添加断言,请执行以下操作:
- 开始录制,例如,在此演示页面中。
点击 Add assertion(添加断言)。
Recorder 会创建一个可配置的
waitForElement
步骤。为此步骤指定选择器。
配置步骤,但不更改其
waitForElement
类型。例如,您可以指定:- HTML 属性。点击添加属性,然后输入属性的名称和值,此页面上的元素将会用到。例如
data-test: <value>
。 - JavaScript 属性。点击添加属性,然后以 JSON 格式输入属性名称和值。例如
{".innerText":"<text>"}
。 - 其他步骤属性。例如
visible: true
。
- HTML 属性。点击添加属性,然后输入属性的名称和值,此页面上的元素将会用到。例如
继续录制用户流的剩余部分,然后停止录制。
点击
重放。如果断言失败,Recorder 会在超时后显示错误。
请观看以下视频,了解此工作流程的实际应用情况。
复制步骤
您可以将单个步骤复制到剪贴板,而不是导出整个用户流:
- 右键点击要复制的步骤,或点击该步骤旁边的
三点状图标。
- 在下拉菜单中,选择一个复制为...选项。
您可以复制各种格式的步骤:JSON、Puppeteer、@puppeteer/replay,以及由扩展程序提供的格式。
移除步骤
如需移除意外记录的步骤,请右键点击相应步骤或点击旁边的 三点状图标,然后选择移除步骤。
此外,Recorder 会自动在每个录制的开头添加两个单独的步骤:
- 设置视口。可让您控制视口的尺寸、缩放比例和其他属性。
- 导航。设置网址,并在每次重放时自动刷新页面。
要在不重新加载网页的情况下执行页内自动化操作,请移除上述导航步骤。
配置步骤
如需配置步骤,请执行以下操作:
指定其类型:
click
、doubleClick
、hover
、(输入)change
、keyUp
、keyDown
、scroll
、close
、navigate
(指向页面)、waitForElement
、waitForExpression
或setViewport
。其他属性取决于
type
值。在
type
下方指定必需的属性。点击相应的按钮,添加特定于类型的可选属性并指定这些属性。
如需查看可用属性的列表,请参阅步骤属性。
要移除可选属性,请点击它旁边的 移除按钮。
要在数组属性中添加或移除元素,请点击相应元素旁边的 + 或 - 按钮。
步骤属性
每个步骤都可以具有以下可选属性:
target
- Chrome 开发者工具协议 (CDP) 目标的网址,默认的main
关键字会引用当前页面。assertedEvents
(目前只能是一个navigation
事件)
大多数步骤类型可用的其他常见属性如下:
frame
- 一个从零开始的索引数组,用于标识可嵌套的 iframe。例如,您可以将主目标的第二个 (1) iframe 中的第一个 (0) iframe 标识为[1, 0]
。timeout
- 在执行某个步骤之前等待的毫秒数。如需了解详情,请参阅调整步骤的超时设置。selectors
- 选择器的数组。如需了解详情,请参阅了解选择器。
类型专用属性包括:
类型 | 属性 | 必需 | 说明 |
click doubleClick |
offsetX offsetY |
相对于元素内容框的左上角(以像素为单位) | |
click doubleClick |
button |
指针按钮:主 |辅助 |秒 |返回 |前进 | |
change |
value |
最终值 | |
keyDown keyUp |
key |
密钥名称 | |
scroll |
x y |
绝对滚动 x 和 y 位置(以像素为单位),默认值为 0 | |
navigate |
url |
目标网址 | |
waitForElement |
operator |
>= |==(默认值)|<= | |
waitForElement |
count |
选择器标识的元素数量 | |
waitForElement |
attributes |
HTML 属性及其值 | |
waitForElement |
properties |
JavaScript 属性及其 JSON 值 | |
waitForElement |
visible |
布尔值。如果该元素在 DOM 中且可见(没有 display: none 或 visibility: hidden ),则为 true |
|
waitForElement waitForExpression |
asserted events |
目前,只有 type: navigation ,但您可以指定标题和网址 |
|
waitForElement waitForExpression |
timeout |
最长等待时间(以毫秒为单位) | |
waitForExpression |
expression |
解析为 true 的 JavaScript 表达式 | |
setViewport |
width height |
视口的宽度和高度(以像素为单位) | |
setViewport |
deviceScaleFactor |
与设备像素比 (DPR) 类似,默认值为 1 | |
setViewport |
isMobile hasTouch isLandscape |
用于指定是否执行以下操作的布尔值标志: |
以下两类属性会导致重放暂停:
waitForElement
属性让该步骤等待由选择器标识的多个元素是否存在。例如,以下步骤会等待页面上与选择器.my-class
匹配的元素少于三个。"type": "waitForElement", "selectors": [".my-class"], "operator": "<=", "count": 2,
waitForExpression
属性可让该步骤等待 JavaScript 表达式解析为 true。例如,以下步骤会暂停两秒,然后解析为 true,以允许继续重放。"type": "waitForExpression", "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",
调整步骤的超时
如果您的网页包含缓慢的网络请求或较长的动画,那么在超过默认超时 5000
毫秒的步骤中重放失败。
为避免此问题,您可以一次性调整每个步骤的默认超时时间,或为特定步骤设置单独的超时时间。特定步骤的超时会覆盖默认值。
如需一次性调整每个步骤的默认超时,请执行以下操作:
点击重放设置,使超时框可修改。
在超时框中,设置超时值(以毫秒为单位)。
点击
重放,查看调整后的默认超时的实际效果。
如需覆盖特定步骤的默认超时,请执行以下操作:
如需移除步骤的超时覆盖,请点击步骤旁边的删除 按钮。
了解选择器
在开始新记录时,您可以配置以下内容:
- 在选择器属性文本框中,输入自定义测试属性。Recorder 将使用此属性检测选择器,而不是常见测试属性列表。
在要记录的选择器类型一组复选框中,选择要自动检测的选择器类型:
CSS。语法选择器。
ARIA。语义选择器。
文本。具有最短唯一文本(如果有)的选择器。
:XPath。XPath使用 XML 路径语言的选择器。
Pierce。选择器与 CSS 选择器类似,但可以穿透 shadow DOM。
常用测试选择器
对于简单的网页,id
属性和 CSS class
属性足以让 Recorder 检测到选择器。然而,可能并非总是这样,因为:
- 您的网页可能会使用会发生变化的动态类或 ID。
- 您的选择器可能会因代码或框架更改而损坏。
例如,对于使用现代 JavaScript 框架(例如 React、Angular、Vue)和 CSS 框架开发的应用,系统可能会自动生成 CSS class
值。
在这些情况下,您可以使用 data-*
属性来创建更具弹性的测试。开发者已经可以使用一些常见的 data-*
选择器来实现自动化。Recorder 也支持这些方法。
如果您在网站上定义了以下常见的测试选择器,则 Recorder 会自动检测并使用它们:
data-testid
data-test
data-qa
data-cy
data-test-id
data-qa-id
data-testing
点击“Cappuccino”按钮,展开录音中的相应步骤,然后检查检测到的选择器:
自定义录音的选择器
如果常用的测试选择器都不合适,您可以自定义记录的选择器。
例如,此演示页面使用 data-automate
属性作为选择器。开始新录制,然后输入 data-automate
作为选择器属性。
填写电子邮件地址并观察选择器值 ([data-automate=email-address]
)。
选择器优先级
Recorder 会按以下顺序查找选择器,具体取决于您是否指定了自定义 CSS 选择器属性:
- 如果指定:
<ph type="x-smartling-placeholder">
- </ph>
- 将 CSS 选择器与自定义 CSS 属性结合使用。
- XPath 选择器。
- ARIA 选择器(如果找到)。
- 具有最短唯一文本(若找到)的选择器。
- 如果未指定:
<ph type="x-smartling-placeholder">
- </ph>
- ARIA 选择器(如果找到)。
- 具有以下优先级的 CSS 选择器:
<ph type="x-smartling-placeholder">
- </ph>
- 最常用于测试的属性:
<ph type="x-smartling-placeholder">
- </ph>
data-testid
data-test
data-qa
data-cy
data-test-id
data-qa-id
data-testing
- ID 属性,例如
<div id="some_ID">
。 - 常规 CSS 选择器。
- 最常用于测试的属性:
<ph type="x-smartling-placeholder">
- XPath 选择器。
- 穿刺选择器。
- 具有最短唯一文本(若找到)的选择器。
可能会有多个常规 CSS、XPath 和 Pierce 选择器。Recorder 会捕获以下内容: