功能参考资料

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

在 Chrome 开发者工具 Recorder 面板的综合功能参考中，探索共享用户流、修改用户流及其步骤的方法。

如需了解如何使用 Recorder 面板，请参阅录制、重放和衡量用户流。

了解和自定义快捷方式

使用快捷方式可更快速地在 Recorder 中导航。如需查看默认快捷键的列表，请参阅录制器面板键盘快捷键。

如需在录音机中打开列出所有快捷键的提示，请点击右上角的 显示快捷键。

“显示快捷键”按钮。

如需自定义录音机快捷键，请执行以下操作：

  1. 打开 设置。 设置 >快捷方式。
  2. 向下滚动到 Recorder 部分。
  3. 按照自定义快捷方式中的步骤操作。

修改用户流

在开发者工具中，“Recorder”面板的顶栏中有一个下拉菜单，可用于选择要修改的用户流。

Recorder 面板的顶部有一些选项，可供您：

  1. 添加新的录制内容添加。点击 + 图标以添加新录制内容。
  2. 查看所有录制内容展开。。此下拉菜单会显示已保存的录制内容的列表。选择 [数字] recording(s) 选项可展开和管理已保存的录制内容的列表。 查看所有录制内容。

  3. 导出录制内容文件下载。。如需进一步自定义脚本或将其共享以用于 bug 报告，您可以采用以下任一格式导出用户流：

    如需详细了解格式，请参阅导出用户流。

  4. 导入录音上传文件。。仅限 JSON 格式。

  5. 删除录音删除。。删除所选的录音。

您还可以点击录制内容旁边的修改按钮 修改。 来修改其名称。

共享用户流

您可以在录制器中导出和导入用户体验历程。这对于 bug 报告非常有用，因为您可以分享重现 bug 的步骤的准确记录。您还可以使用外部库导出和重放它。

导出用户流

如需导出用户体验历程，请执行以下操作：

  1. 打开要导出的用户流。
  2. 点击录制器面板顶部的 文件下载。导出。 导出格式选项。
  3. 从下拉列表中选择下列格式之一：
    • JSON 文件。以 JSON 文件的形式下载录音。
    • @puppeteer/replay.将录制内容下载为 Puppeteer Replay 脚本。
    • Puppeteer。将录制内容下载为 Puppeteer 脚本。
    • Puppeteer（包括 Lighthouse 分析）。将录制内容作为包含嵌入式 Lighthouse 分析的 Puppeteer 脚本下载。
    • 录音机的导出扩展程序提供的一个或多个选项。
  4. 保存文件。

您可以对每个默认导出选项执行以下操作：

  • 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

    在 Chrome 中打开的 Lighthouse 报告。

通过安装扩展程序以自定义格式导出

请参阅记录器扩展程序。

导入用户流

如需导入用户流，请执行以下操作：

  1. 点击录音机面板顶部的导入上传文件。 按钮。 导入录音。
  2. 选择包含记录的用户体验历程的 JSON 文件。
  3. 点击 重放。Replay 按钮以运行导入的用户体验历程。

使用外部库重放

Puppeteer Replay 是由 Chrome 开发者工具团队维护的开源库。它基于 Puppeteer 构建而成。它是一个命令行工具，您可以使用该工具重放 JSON 文件。

此外，您还可以使用以下第三方库转换和重放 JSON 文件。

将 JSON 用户流转换为自定义脚本：

重放 JSON 用户流：

调试用户流

与任何代码一样，有时您必须调试记录的用户体验历程。

为了帮助您进行调试，您可以使用 Recorder 面板减慢重放速度、设置断点、逐步执行执行，以及按步骤并行检查各种格式的代码。

放慢重放速度

默认情况下，Recorder 会尽可能快速地重放用户流。如需了解录制内容中发生的情况，您可以放慢重放速度：

  1. 打开 重放。重玩下拉菜单。
  2. 选择一个重放速度选项：
    • 正常（默认）
    • 慢速
    • 非常慢
    • 极慢

缓慢重放。

检查代码

如需检查各种格式的用户流代码，请执行以下操作：

  1. 在 Recorder 面板中打开录音。
  2. 点击步骤列表右上角的显示代码。“显示代码”按钮。
  3. Recorder 并排显示步骤及其代码。 步骤及其代码的并排视图。
  4. 当您将鼠标悬停在某个步骤上时，录制器会以任何格式（包括扩展程序提供的格式）突出显示相应的代码。

  5. 展开格式下拉列表，选择用于导出用户体验历程的格式。

    “格式”下拉列表。

    它可以是以下三种默认格式之一（JSON、@puppeteer/replay、Puppeteer 脚本或由扩展程序提供的格式）。

  6. 继续修改步骤参数和值，以调试录制内容。代码视图不可修改，但当您对左侧的步骤进行更改时，它会随之更新。

设置断点并逐步执行

如需设置断点并逐步执行，请执行以下操作：

  1. 将鼠标悬停在录制内容中任意步骤旁边的 步数。 圆圈上。圆圈会变成 断点。 断点图标。
  2. 点击 断点。 断点图标，然后重放录制内容。执行会在断点处暂停。 执行暂停。
  3. 如需逐步完成执行，请点击 Recorder 面板顶部的操作栏中的 执行一步。 Execute one step 按钮。
  4. 如要停止重放，请点击 暂停一下。取消重放。

修改步骤

无论是录制期间还是之后，您都可以通过点击录制内容旁边的 展开。 按钮来修改录制的任何步骤。

您还可以添加缺失的步骤，以及移除意外记录的步骤。

添加步骤

有时，您可能需要手动添加步骤。例如，Recorder 不会自动捕获 hover 事件，因为这会污染录制，而且并非所有此类事件都有用。不过，下拉菜单等界面元素只能显示在 hover 上。您可以手动向依赖于此类元素的用户体验流程添加 hover 步骤。

要手动添加步骤，请执行以下操作：

  1. 打开此演示页面，然后开始录制新内容。 开始录制以捕获悬停事件。
  2. 在视口中将鼠标悬停在相应元素上。此时会弹出操作菜单。 将鼠标悬停在元素上。
  3. 从菜单中选择一项操作，然后结束录制。录制器仅捕获点击事件。 点击某个操作并结束录制。
  4. 点击 重放。 重放以尝试重放录制内容。超时后重放失败，因为 Recorder 无法访问菜单中的相应元素。 重放失败。
  5. 点击 Click 步骤旁边的 三点状按钮。 三点状按钮，然后选择 Add step before。 在“点击”之前添加一个步骤。
  6. 展开新步骤。默认情况下，它的类型为 waitForElement。点击 type 旁边的值，然后选择 hover。 选择“悬停”。
  7. 接下来，为新步骤设置适当的选择器。点击 选择 Select（选择），然后点击 Hover over me! 元素上弹出式菜单之外的区域。选择器设置为 #clickable。 设置选择器。
  8. 请尝试重新播放录音。添加悬停步骤后，录制器成功重放了流程。 重放成功。

添加断言

在录制期间，您可以断言 HTML 属性和 JavaScript 属性等。如需添加断言，请执行以下操作：

  1. 开始录制，例如，在此演示页面中。

  2. 点击 Add assertion（添加断言）。

    “Add assertion”（添加断言）按钮。

    录制器会创建一个可配置的 waitForElement 步骤。

  3. 为此步骤指定选择器。

  4. 配置步骤，但不要更改其 waitForElement 类型。例如，您可以指定：

    • HTML 属性。点击添加属性，然后输入属性的名称和值，此页面上的元素将会用到。例如 data-test: <value>。
    • JavaScript 属性。点击添加媒体资源，然后以 JSON 格式输入媒体资源的名称和值。例如 {".innerText":"<text>"}。
    • 其他步骤属性。例如 visible: true。

  5. 继续录制用户流的剩余部分，然后停止录制。

  6. 点击 重放。 重放。如果断言失败，录制器会在超时后显示错误。

请观看以下视频，了解此工作流程的实际应用情况。

复制步骤

您可以将单个步骤复制到剪贴板，而不是导出整个用户流：

  1. 右键点击要复制的步骤，或点击其旁边的 三点状菜单。 三点状图标。
  2. 在下拉菜单中，选择复制为...选项之一。

从下拉菜单中选择一个复制选项。

您可以复制各种格式的步骤：JSON、Puppeteer、@puppeteer/replay，以及扩展程序提供的步骤。

移除步骤

如需移除意外录制的步骤，请右键点击该步骤或点击旁边的 三点状菜单。 三点状图标，然后选择移除步骤。

移除步骤。

此外，录制器会自动在每次录制的开头添加两个单独的步骤：

设置了视口和导航步骤的记录。

  • 设置视口。可让您控制视口的尺寸、缩放和其他属性。
  • 导航。设置网址，并在每次重放时自动刷新页面。

要在不重新加载网页的情况下执行页内自动化操作，请移除上述导航步骤。

配置步骤

如需配置步骤，请执行以下操作：

  1. 指定其类型：click、doubleClick、hover、（输入）change、keyUp、keyDown、scroll、close、navigate（指向页面）、waitForElement、waitForExpression 或 setViewport。

    其他属性取决于 type 值。

  2. 在 type 下方指定必需的属性。

    配置步骤。

  3. 点击相应的按钮，添加特定于类型的可选属性并指定这些属性。

如需查看可用属性的列表，请参阅步骤属性。

要移除可选属性，请点击它旁边的 移除。 移除按钮。

要在数组属性中添加或移除元素，请点击相应元素旁边的 + 或 - 按钮。

步骤属性

每个步骤都可以具有以下可选属性：

  • 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 毫秒）的步骤时，重放可能会失败。

    为避免此问题，您可以一次性调整每个步骤的默认超时时间，或为特定步骤设置单独的超时时间。特定步骤的超时时间会覆盖默认超时时间。

    如需一次调整每个步骤的默认超时，请执行以下操作：

    1. 点击重放设置，即可修改超时框。

      重放设置。

    2. 在超时框中，设置超时值（以毫秒为单位）。

    3. 点击 重放。重放，查看调整后的默认超时设置的实际效果。

    如需替换特定步骤的默认超时时间，请执行以下操作：

    1. 展开步骤，然后点击添加超时设置。

      添加超时。

    2. 点击 timeout: <value> 并设置值（以毫秒为单位）。

      设置超时值。

    3. 点击 重放。重放，查看发生超时操作的步骤。

    如需移除步骤的超时替换项，请点击相应步骤旁边的删除图标 删除。。

    了解选择器

    在开始新记录时，您可以配置以下内容：

    配置新录制。

    • 在选择器属性文本框中，输入自定义测试属性。Recorder 将使用此属性检测选择器，而不是常见测试属性列表。

    • 在要记录的选择器类型一组复选框中，选择要自动检测的选择器类型：

      • 复选框。 CSS。语法选择器。
      • 复选框。 ARIA。语义选择器。
      • 复选框。 文本。具有最短唯一文本（如果有）的选择器。
      • 复选框。：XPath。XPath使用 XML 路径语言的选择器。
      • 复选框。 Pierce。选择器与 CSS 选择器类似，但可以穿透 shadow DOM。

    常见的测试选择器

    对于简单的网页，录制器只需 id 属性和 CSS class 属性即可检测选择器。然而，可能并非总是这样，因为：

    • 您的网页可能会使用会发生变化的动态类或 ID。
    • 由于代码或框架发生变化，选择器可能会损坏。

    例如，对于使用现代 JavaScript 框架（例如 React、Angular、Vue）和 CSS 框架开发的应用，系统可能会自动生成 CSS class 值。

    自动生成的 CSS 类，名称采用随机字符串。

    在这些情况下，您可以使用 data-* 属性创建更具弹性的测试。开发者已经可以使用一些常见的 data-* 选择器来实现自动化。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])。

    选择自定义选择器的结果。

    选择器优先级

    录制器会按以下顺序查找选择器，具体取决于您是否指定了自定义 CSS 选择器属性：

    • 如果指定：
      1. 将 CSS 选择器与自定义 CSS 属性结合使用。
      2. XPath 选择器。
      3. ARIA 选择器（如果有）。
      4. 具有最短唯一文本的选择器（如果有）。
    • 如果未指定：
      1. ARIA 选择器（如果找到）。
      2. 具有以下优先级的 CSS 选择器：
        1. 用于测试的最常见属性：
          • data-testid
          • data-test
          • data-qa
          • data-cy
          • data-test-id
          • data-qa-id
          • data-testing
        2. ID 属性，例如 <div id="some_ID">。
        3. 常规 CSS 选择器。
      3. XPath 选择器。
      4. Pierce 选择器。
      5. 具有最短唯一文本（若找到）的选择器。

    可以有多个常规 CSS、XPath 和 Pierce 选择器。录音机会捕获以下内容：

    • 每个根级别的常规 CSS 和 XPath 选择器，即嵌套的影子主机（如果有）。
    • 在所有影子根内的所有元素之间唯一的穿孔选择器。