功能参考资料

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

阅读这份关于 Chrome 开发者工具 Recorder 面板的综合功能参考，了解分享用户流、修改用户流及其步骤的方法。

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

了解和自定义快捷方式

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

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

“显示快捷键”按钮。

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

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

修改用户流

开发者工具的 Recorder 面板在标题中有一个下拉菜单，可让您选择要修改的用户流。

在 Recorder 面板顶部，您会看到以下选项：

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

  3. 导出录制内容文件下载。。若要进一步自定义脚本或分享脚本以用于错误报告，可以采用以下任一格式导出用户流：

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

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

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

您还可以修改录音的名称，只需点击录音旁边的修改按钮 修改。 即可。

共享用户流

您可以在“记录器”中导出和导入用户流。这对于 bug 报告非常有用，因为您可以准确记录重现 bug 的步骤。还可以导出它，并使用外部库重放。

导出用户流

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

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

    Lighthouse 报告已在 Chrome 中打开。

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

请参阅录音机扩展程序。

导入用户流

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

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

使用外部库重放

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

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

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

重放 JSON 用户流：

调试用户流

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

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

放慢重放速度

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

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

慢速重放。

检查代码

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

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

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

    “格式”下拉列表。

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

  6. 接下来通过修改步骤参数和值来调试记录。代码视图不可修改，但它会随着您更改左侧步骤而相应更新。

设置断点并逐步执行

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

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

修改步骤

对于录制中的任何步骤，您都可以在录制期间和之后点击该步骤旁边的 展开。 按钮进行修改。

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

添加步骤

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

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

  1. 打开此演示页面并开始录制新内容。 开始记录以捕获悬停事件。
  2. 将鼠标悬停在视口中的元素上。系统会弹出一个操作菜单。 将鼠标悬停在相应元素上。
  3. 从菜单中选择一项操作并结束录制。Recorder 仅捕获点击事件。 点击某项操作并结束记录。
  4. 点击 重放。 重放，尝试重新播放录制内容。超时后，重放失败，因为 Recorder 无法访问菜单中的元素。 重放失败。
  5. 点击点击步骤旁边的 三点状按钮。 三点状按钮，然后选择在之前添加步骤。 在“点击”前添加步骤。
  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. 点击 重放。 Replay。如果断言失败，Recorder 会在超时后显示错误。

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

复制步骤

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

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

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

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

移除步骤

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

移除步骤。

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

包含已设置视口和导航步骤的记录。

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

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

配置步骤

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

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

    其他属性取决于 type 值。

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

    配置步骤。

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

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

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

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

步骤属性

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

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

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

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

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

      重放设置。

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

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

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

    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 选择器。Recorder 会捕获以下内容：

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