阅读这份关于 Chrome 开发者工具 Recorder 面板的综合功能参考,了解分享用户流、修改用户流及其步骤的方法。
如需了解使用 Recorder 面板的基础知识,请参阅录制、重放和衡量用户流。
了解和自定义快捷方式
使用快捷方式可更快地浏览 Recorder。如需查看默认快捷键的列表,请参阅“录音机”面板的键盘快捷键。
如需打开列出 Recorder 中所有快捷键的提示,请点击右上角的 help Show shortcuts。
如需自定义 Recorder 快捷方式,请执行以下操作:
修改用户流
在 Recorder 面板顶部,您会看到以下选项:
- 添加新录音。点击 + 图标以添加新录音。
- 查看所有录制内容。下拉列表会显示已保存的录制内容的列表。选择 [number] recording(s) 选项可展开和管理已保存的录制内容的列表。
导出录制内容。若要进一步自定义脚本或分享脚本以用于错误报告,可以采用以下任一格式导出用户流:
- JSON 文件。
- @puppeteer/replay 脚本。
- Puppeteer 脚本。
- Puppeteer(包括 Lighthouse 分析)。
如需详细了解各种格式,请参阅导出用户流。
导入录音。仅采用 JSON 格式。
删除录音。删除所选录音。
您还可以修改录音的名称,只需点击录音旁边的修改按钮 即可。
共享用户流
您可以在“记录器”中导出和导入用户流。这对于 bug 报告非常有用,因为您可以准确记录重现 bug 的步骤。还可以导出它,并使用外部库重放。
导出用户流
要导出用户流,请执行以下操作:
- 打开您要导出的用户流。
- 点击 Recorder 面板顶部的 Export。
- 从下拉列表中选择以下格式之一:
- JSON 文件。以 JSON 文件格式下载录制内容。
- @puppeteer/replay。以 Puppeteer Replay 脚本的形式下载录制内容。
- Puppeteer:将录制内容下载为 Puppeteer 脚本。
- Puppeteer(包括 Lighthouse 分析)。将录制内容下载为 Puppeteer 脚本,其中包含嵌入式 Lighthouse 分析。
- 录音机的导出扩展程序提供的一个或多个选项。
- 保存文件。
您可以对每个默认导出选项执行以下操作:
- JSON。修改人类可读的 JSON 对象,然后将 JSON 文件import回 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 会尽可能快地重放用户流。如需了解录制过程中发生的情况,您可以放慢重放速度:
- 打开 Replay 下拉菜单。
- 选择一个重放速度选项:
- 正常(默认)
- 慢速
- 非常慢
- 极慢
检查代码
如需检查各种格式的用户流代码,请执行以下操作:
- 在 Recorder 面板中打开录音。
- 点击步骤列表右上角的显示代码。
- Recorder 并排显示了各个步骤及其代码。
- 当您将光标悬停在某个步骤上时,Recorder 会以任意格式突出显示其各自的代码,包括扩展程序提供的代码。
展开格式下拉列表,以选择用于导出用户流的格式。
它可以是三种默认格式(JSON、@puppeteer/replay、Puppeteer 脚本或由扩展程序提供的格式)之一。
接下来通过修改步骤参数和值来调试记录。代码视图不可修改,但它会随着您更改左侧步骤而相应更新。
设置断点并逐步执行
如需设置断点并逐步执行,请执行以下操作:
- 将鼠标悬停在记录中任意步骤旁边的 圆圈上。圆圈会变成 断点图标。
- 点击 断点图标,然后重放录制内容。执行会在断点处暂停。
- 如需逐步执行执行,请点击 Recorder 面板顶部的操作栏中的 执行一步按钮。
- 如需停止重放,请点击 取消重放。
修改步骤
对于录制中的任何步骤,您都可以在录制期间和之后点击该步骤旁边的 按钮进行修改。
添加步骤
有时,您可能需要手动添加步骤。例如,Recorder 不会自动捕获 hover
事件,因为这会污染录音,而且并非所有此类事件都有用。不过,下拉菜单等界面元素只能在 hover
上显示。您可以向依赖于此类元素的用户流手动添加 hover
步骤。
要手动添加步骤,请执行以下操作:
- 打开此演示页面并开始录制新内容。
- 将鼠标悬停在视口中的元素上。系统会弹出一个操作菜单。
- 从菜单中选择一项操作并结束录制。Recorder 仅捕获点击事件。
- 点击 重放,尝试重新播放录制内容。超时后,重放失败,因为 Recorder 无法访问菜单中的元素。
- 点击点击步骤旁边的 三点状按钮,然后选择在之前添加步骤。
- 展开新步骤。默认情况下,它具有
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 属性。点击添加属性,然后输入此页面上的元素所使用的属性名称和值。例如
继续录制余下的用户流,然后停止录制。
点击 Replay。如果断言失败,Recorder 会在超时后显示错误。
请观看以下视频,了解此工作流的实际应用。
复制步骤
您可以将单个步骤复制到剪贴板,而不是导出整个用户流:
- 右键点击要复制的步骤,或点击它旁边的 三点状图标。
- 在下拉菜单中,选择一个 Copy as ... 选项。
您可以采用各种格式复制步骤:JSON、Puppeteer、@puppeteer/replay 以及扩展程序提供的格式。
移除步骤
要移除意外记录的步骤,请右键点击该步骤,或点击它旁边的 三点状图标,然后选择移除步骤。
此外,Recorder 还会在每个录音的开头自动添加两个单独的步骤:
- 设置视口。让您能够控制视口的尺寸、缩放比例和其他属性。
- 导航。设置网址并在每次重放时自动刷新页面。
若要在不重新加载网页的情况下执行页内自动化操作,请按上文所述移除导航步骤。
配置步骤
如需配置步骤,请执行以下操作:
指定其类型:
click
、doubleClick
、hover
、(输入)change
、keyUp
、keyDown
、scroll
、close
、navigate
(指向页面)、waitForElement
、waitForExpression
或setViewport
。其他属性取决于
type
值。在
type
下方指定必需的属性。点击相应的按钮,添加特定于类型的可选属性并指定这些属性。
如需查看可用属性的列表,请参阅步骤属性。
若要移除某个可选属性,请点击它旁边的 移除按钮。
若要向数组属性中添加元素或从中移除元素,请点击相应元素旁边的 + 或 - 按钮。
步骤属性
每个步骤都可以具有以下可选属性:
target
- Chrome DevTools 协议 (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 |
JSON 中的 JavaScript 属性及其值 | |
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
匹配的元素少于 3 个。"type": "waitForElement", "selectors": [".my-class"], "operator": "<=", "count": 2,
waitForExpression
属性可让该步骤等待 JavaScript 表达式解析为 true。例如,以下步骤会暂停两秒钟,然后解析为 true,从而允许重放。"type": "waitForExpression", "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",
调整步骤的超时设置
如果您的网页包含缓慢的网络请求或动画过长,则超出默认超时时间(5000
毫秒)的步骤可能会失败。
为避免此问题,您可以一次性调整每个步骤的默认超时时间,或为特定步骤设置单独的超时时间。特定步骤的超时会覆盖默认值。
如需一次性调整每个步骤的默认超时时长,请执行以下操作:
点击重放设置,使超时框可修改。
在超时框中,设置超时值(以毫秒为单位)。
点击 Replay,查看调整后的默认超时设置的实际效果。
如需覆盖特定步骤的默认超时时间,请执行以下操作:
如需移除步骤的超时覆盖设置,请点击步骤旁边的删除 按钮。
了解选择器
开始新录制时,您可以进行以下配置:
- 在“选择器属性”文本框中,输入自定义测试属性。Recorder 会使用此属性来检测选择器,而不是常见测试属性的列表。
在要记录的选择器类型这组复选框中,选择要自动检测的选择器类型:
- CSS。语法选择器。
- ARIA。语义选择器。
- 文本。唯一文本最短的选择器(如果有)。
- 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”元素,并查看测试属性:
记录对“Cappuccino”的点击,展开录音中的相应步骤,然后检查检测到的选择器:
自定义录制内容的选择器
如果常用的测试选择器都不适合您,您可以自定义录音的选择器。
例如,此演示页面使用 data-automate
属性作为选择器。开始新录制并输入 data-automate
作为选择器属性。
填写电子邮件地址,并观察选择器值 ([data-automate=email-address]
)。
选择器优先级
Recorder 会按以下顺序查找选择器,具体取决于您是否指定了自定义 CSS 选择器属性:
- 如果指定:
- 包含自定义 CSS 属性的 CSS 选择器。
- XPath 选择器。
- ARIA 选择器(如果找到)。
- 包含最短唯一文本(如果找到)的选择器。
- 如果未指定,则:
- ARIA 选择器(如果找到)。
- 具有以下优先级的 CSS 选择器:
- 最常用的测试属性如下:
data-testid
data-test
data-qa
data-cy
data-test-id
data-qa-id
data-testing
- ID 属性,例如
<div id="some_ID">
。 - 常规 CSS 选择器。
- 最常用的测试属性如下:
- XPath 选择器。
- 穿刺选择器。
- 包含最短唯一文本(如果找到)的选择器。
可以有多个常规的 CSS、XPath 和 Pierce 选择器。Recorder 会捕获以下内容:
- 每个根级别的常规 CSS 和 XPath 选择器,即嵌套的影子主机(如果有)。
- 穿刺选择器在所有影子根内的所有元素中都是唯一的。