功能参考资料

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

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

如需了解使用 Recorder 面板的基础知识，请参阅录制、重放和测量用户流。

了解和自定义快捷方式

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

如需直接在 Recorder 中打开列出所有快捷键的提示，请点击右上角的帮助 Show shortcuts。

“显示快捷键”按钮。

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

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

修改用户流

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

Recorder 面板的顶部有以下选项：

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

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

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

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

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

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

共享用户流

您可以在录音机中导出和导入用户流。这对于 bug 报告非常有用，因为您可以分享重现 bug 的步骤的准确记录。您还可以使用外部库导出和重放视频。

导出用户流

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

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

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

  • 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

    Lighthouse 报告已在 Chrome 中打开。

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

请参阅录音机扩展程序。

导入用户流

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

  1. 点击 Recorder 面板顶部的 Import上传文件。 按钮。 导入录制内容。
  2. 选择包含所记录用户流的 JSON 文件。
  3. 点击 重放。Replay 按钮以运行导入的用户流。

使用外部库重放

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

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

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

重放 JSON 用户流：

。

调试用户流

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

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

放慢重放速度

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

  1. 打开 重放。重放下拉菜单。
  2. 选择一个重放速度选项： <ph type="x-smartling-placeholder">
      </ph>
    • 正常（默认）
    • 慢速
    • 非常慢
    • 极慢

缓慢重放。

检查代码

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

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

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

    “格式”下拉列表。

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

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

设置断点并逐步执行

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

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

修改步骤

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

您还可以添加缺少的步骤以及移除不小心记录的步骤。

添加步骤

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

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

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

添加断言

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

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

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

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

    Recorder 会创建一个可配置的 waitForElement 步骤。

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

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

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

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

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

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

复制步骤

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

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

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

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

移除步骤

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

移除步骤。

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

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

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

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

配置步骤

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

  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 >= |==（默认值）|&lt;=
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 属性足以让 Recorder 检测到选择器。然而，可能并非总是这样，因为：

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

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

    自动生成的 CSS 类，具有随机名称。

    在这些情况下，您可以使用 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 选择器属性：

    • 如果指定： <ph type="x-smartling-placeholder">
        </ph>
      1. 将 CSS 选择器与自定义 CSS 属性结合使用。
      2. XPath 选择器。
      3. ARIA 选择器（如果找到）。
      4. 具有最短唯一文本（若找到）的选择器。
    • 如果未指定： <ph type="x-smartling-placeholder">
        </ph>
      1. ARIA 选择器（如果找到）。
      2. 具有以下优先级的 CSS 选择器： <ph type="x-smartling-placeholder">
          </ph>
        1. 最常用于测试的属性： <ph type="x-smartling-placeholder">
            </ph>
          • 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. 穿刺选择器。
      5. 具有最短唯一文本（若找到）的选择器。

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

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