功能参考资料

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

在 Chrome DevTools Recorder 面板的此综合功能参考中，了解分享用户体验历程、修改用户体验历程及其步骤的方法。

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

了解和自定义快捷方式

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

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

“显示快捷键”按钮。

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

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

修改用户流

在开发者工具中，“Recorder”面板的顶栏中包含一个下拉菜单，供您用来选择要修改的用户流。

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

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

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

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

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

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

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

共享用户流

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

导出用户流

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

  1. 打开要导出的用户体验历程。

  2. 点击录制器面板顶部的 导出。

    “导出”菜单中的格式选项列表。

  3. 从下拉列表中选择下列格式之一：

    • JSON 文件。以 JSON 文件的形式下载录音。
    • @puppeteer/replay。将录制内容下载为 Puppeteer Replay 脚本。
    • Puppeteer。将录制内容下载为 Puppeteer 脚本。
    • Puppeteer（适用于 Firefox）。将录制内容下载为 Puppeteer for Firefox 脚本。
    • Puppeteer（包括 Lighthouse 分析）。将录制内容下载为 Puppeteer 脚本，其中包含嵌入的 Lighthouse 分析。
    • 录音机的导出扩展程序提供的一个或多个选项。

  4. 保存文件。

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

  • JSON。修改人类可读的 JSON 对象，然后将 JSON 文件导入回录制器。
  • @puppeteer/replay。使用 Puppeteer Replay 库重放脚本。导出为 @puppeteer/replay 脚本时，步骤仍会保留为 JSON 对象。如果您希望与 CI/CD 流水线集成，但仍能够灵活地修改 JSON 格式的步骤，然后将其转换并导入回 Recorder，则此选项是理想之选。
  • Puppeteer 脚本。使用 Puppeteer 重放脚本。由于步骤会转换为 JavaScript，因此您可以进行更精细的自定义，例如循环步骤。需要注意的是，您无法将此脚本重新导入 Recorder。
  • Puppeteer（适用于 Firefox）。在 WebDriver BiDi 支持范围内，您可以在 Chrome 和 Firefox 上运行此 Puppeteer 脚本。

  • Puppeteer（包括 Lighthouse 分析）。此导出选项与上一个导出选项相同，但包含用于生成 Lighthouse 分析的代码。

    运行脚本，然后查看 flow.report.html 文件中的输出：

    # npm i puppeteer lighthouse
node your_export.js

    在 Chrome 中打开的 Lighthouse 报告。

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

请参阅记录器扩展程序。

导入用户流

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

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

使用外部库进行重放

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

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

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

重放 JSON 用户流程：

调试用户流

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

为了帮助您调试，录制器面板可让您放慢重放速度、设置断点、逐步执行，并并行检查各种格式的代码。

放慢重放速度

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

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

缓慢重放。

检查代码

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

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

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

    “格式”下拉列表。

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

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

设置断点并逐步执行

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

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

修改步骤

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

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

添加步骤

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

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

  1. 打开此演示页面，然后开始录制新内容。 开始录制以捕获悬停事件。
  2. 将鼠标悬停在视口中的元素上。系统随即会弹出一个操作菜单。 将鼠标悬停在元素上。
  3. 从菜单中选择一项操作，然后结束录制。录制器仅捕获点击事件。 点击某个操作并结束记录。
  4. 点击 重放。 Replay（重放）尝试重放录音。重放会在超时后失败，因为录制器无法访问菜单中的元素。 重放失败。
  5. 点击点击步骤旁边的 三点状按钮。 三点状按钮，然后选择在前面添加步骤。 在“点击”之前添加步骤。
  6. 展开新步骤。默认情况下，它的类型为 waitForElement。点击 type 旁边的值，然后选择 hover。 选择“悬停”。
  7. 接下来，为新步骤设置适当的选择器。点击 选择 选择，然后点击 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. 点击 重放。 重放。如果断言失败，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. 点击相应的按钮，添加特定于类型的可选属性并指定这些属性。

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

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

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

步骤属性

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

适用于大多数步骤类型的其他常见属性包括：

  • 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。使用 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 选择器属性：

    • 如果指定：
      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. 穿刺选择器。
      5. 具有最短唯一文本（若找到）的选择器。

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

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