自定义并自动执行 Chrome 开发者工具记录器以外的用户流程

Ergün Erdogmus

Jecelyn Yeen

注意：有兴趣帮助改进开发者工具吗？点此报名即可参与 Google 用户调研。

我们承认，编写自动化测试并不是开发者生活中最有趣的事情。作为开发者，我们希望编写功能、修复 bug 并改善世界！然而，如果我们的工作流程中没有自动化测试，从长远来看，情况可能会非常“出错”。因此，我们也认为编写自动化测试非常重要。

借助 Chrome 开发者工具中的 Recorder 面板，您可以录制和重放用户流，通过不同的第三方扩展程序和库将其导出为各种格式（例如测试脚本），使用 Puppeteer Replay 库自定义用户流，以及将其与现有工作流集成。

在这篇博文中，我们将讨论以下内容：

• 如何以编程方式导出和重放用户流。
• 如何借助 Puppeteer Replay 自定义用户流。
• 如何与 CI/CD 工作流集成。

本博文假定您已了解录音机的基础知识。如果您刚开始接触录音机，请按照这个简短的入门教程和视频指南开始学习。

以程序化方式导出用户流和重放

默认情况下，您可以使用录音机以 Puppeteer 或 Puppeteer Replay 脚本或普通 JSON 文件的形式导出这些录制内容。

将用户流导出为 JSON 文件后，您可以选择将其导入回“Recorder”面板并重放，也可以使用外部库重放。Puppeteer Replay 库是可用的库之一。

重玩 Puppeteer

按照代码库中的说明安装 Puppeteer Replay。

假设您将 JSON 用户流保存在 recordings 文件夹中（例如 demo project），可以使用以下命令执行一个或多个用户流：

# replay one user flow
npx @puppeteer/replay ./recordings/order-a-coffee.json

# replay all user flows under recordings folder
npx @puppeteer/replay ./recordings/*.json

（可选）您可以添加 npm 脚本来运行录制内容；将下面这行代码添加到 package.json 中的 scripts 字段：

"replay-all": "replay recordings"

这样一来，您就可以在命令行中运行 npm run replay-all 以重放所有录制内容。

默认情况下，用户流在没有界面的情况下重放（也称为“无头模式”）。如果您想查看界面，请在运行命令之前将 PUPPETEER_HEADLESS 环境变量设为 false。

PUPPETEER_HEADLESS=false npm run replay-all

使用第三方库重放

您可以使用一些第三方库在 Chrome 浏览器之外重放。请参阅完整的库列表。

例如，TestCafe 就是一个端到端测试框架。它支持使用 Safari 及其他更多功能重放 JSON 用户流！

npm install -g testcafe

# replay with selected browsers
testcafe safari ./recordings/order-one-coffee.json
testcafe firefox ./recordings/order-one-coffee.json
testcafe chrome ./recordings/order-one-coffee.json

# replay with all browsers
testcafe all ./recordings/order-one-coffee.json

另一方面，Saucelabs 是一个基于云的测试平台。它支持在云端使用不同的浏览器和版本重放 JSON 用户流。

以下是 Saucelabs 中的配置文件示例。查看演示代码库。

apiVersion: v1alpha
kind: puppeteer-replay
suites:
  - name: "order a coffee"
    recordings: [ "recordings/order-a-coffee.json" ]
…

导出具有不同扩展程序的用户流

除了默认选项之外，您还可以安装扩展程序，将用户流导出为不同的格式。

例如，您可以记录用户流并将其导出为 WebPageTest 自定义脚本。借助此脚本，您可以测试多步用户流在您的应用中的性能。不过，编写这些脚本有时可能颇具挑战性。

此外，如果您已有测试工具，则可以使用扩展程序将用户流导出到不同的测试脚本，例如 Cypress、Nightwatch、WebdriverIO、测试库等。点击此处可查看完整列表。这有助于您和您的团队更快地开始编写测试。

以编程方式转换为不同的测试脚本

除了扩展程序之外，大多数测试服务提供商还会发布库，帮助您以编程方式转换多个 JSON 用户流。

例如，您可以使用 @cypress/chrome-recorder 库将用户流导出到 Cypress 测试。

npm install -g @cypress/chrome-recorder
npx @cypress/chrome-recorder ./recordings/*.json

使用扩展程序重放用户流

从 Chrome 112 开始，您现在可以使用扩展程序重放录制内容，从而提升体验。借助这些扩展程序，您无需离开开发者工具即可无缝集成第三方服务和基础架构，以便重放录制内容。

要开始使用，请浏览可用附加信息列表，或了解如何创建您自己的自定义附加信息。

构建您自己的扩展程序或库

在后台，所有扩展程序和库都是基于 Puppeteer Replay 库构建的。除了可让您重放用户流外，Puppeteer Replay 还提供可让您自定义或转换用户流重放的 API。

自定义用户流重放

我们来构建一个屏幕截图插件。对于每个用户流，我们希望：

• 如需在每个步骤结束时截取屏幕截图，并将其保存到 _screenshots 文件夹。
• 在用户流执行完成时输出消息。

以下是代码段。您可以下载此演示版并进行体验。

/* screenshot-plugin.mjs */

import { mkdirSync } from "fs";
import { PuppeteerRunnerExtension } from "@puppeteer/replay";

// create folder if not exist
let screenshotFolder = "_screenshots";
mkdirSync(screenshotFolder, { recursive: true });

export default class ScreenshotPlugin extends PuppeteerRunnerExtension {
  count = 0;

  async afterEachStep(step, flow) {
    await super.afterEachStep(step, flow);
    this.count = this.count + 1;

    const path = `${screenshotFolder}/${flow.title}-${this.count}.png`;
    await this.page.screenshot({ path });

    console.log(`Saved screenshot as ${path}`);
  }

  async afterAllSteps(step, flow) {
    await super.afterAllSteps(step, flow);
    console.log("Operation completed successfully.");
  }
}

代码本身就很富有表现力。我们扩展了 PuppeteerRunnerExtension API，以便在执行每个步骤后保存屏幕截图，并在所有步骤完成后记录消息。

保存文件，然后我们就可以使用以下命令使用此扩展程序运行用户流：

# replay one user flow with plugin 
npx @puppeteer/replay --extension ./screenshot-plugin.mjs  ./recordings/order-a-coffee.json

# replay all user flows with plugin under recordings folder
npx @puppeteer/replay --extension ./screenshot-plugin.mjs ./recordings/*.json

输出内容如下：

Saved screenshot as _screenshots/order-a-coffee-1.png
Saved screenshot as _screenshots/order-a-coffee-2.png
Saved screenshot as _screenshots/order-a-coffee-3.png
…

Operation completed successfully.

转变用户流

自定义用户流的另一种方法是将其转换为不同的格式（例如，Cypress 或 Nightwatch 测试脚本）。

例如，您的用户流中包含导航到某个网址的步骤。JSON 文件如下所示：

{
  "title": "order-a-coffee",
  "steps": [
    {
      "type": "navigate",
      "url": "https://coffee-cart.netlify.app/"
    },
    …
  ]
}

您可以创建一个 stringify 插件，以便将步骤转换为 JavaScript。您还可以查看其他现有库，了解其实现方式。

例如，以下代码段展示了 WebdriverIO 如何转换导航步骤：

export class StringifyPlugin extends PuppeteerStringifyExtension {

  #appendStepType(out: LineWriter, step: Step, flow: UserFlow) {
        switch (step.type) {
        case 'navigate':
    return out.appendLine(`await browser.url(${formatAsJSLiteral(step.url)})`)
        …
  }

当您针对用户流运行插件时，导航行会转换为 await browser.url(‘https://coffee-cart.netlify.app/’)。

自定义开发者工具重放体验

重放扩展程序提供了一种使用第三方服务和基础架构重放录音的方式，而无需离开开发者工具记录器。

如需创建您自己的重放扩展程序，请参阅重放扩展程序文档，并查看扩展程序示例以获取相关指导。

发布 Chrome 扩展程序

自定义和转换用户流后，您可将其打包为 Chrome 扩展程序并发布到 Chrome 应用商店。

查看此演示和说明，了解如何在本地进行调试和发布 Chrome 扩展程序。

与 CI/CD 流水线集成

实现这一目标的方法有很多，市面上也有许多工具。以下示例展示了如何使用 GitHub Actions 自动执行此流程：

# .github/node.js.yml

name: Replay recordings

on:
  push:
    branches: [ "main" ]
  schedule:
    - cron: '30 12 * * *' # daily 12:30pm

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js
      uses: actions/setup-node@v3
      with:
        node-version: 18.x
        cache: 'npm'
    - run: npm install puppeteer
    - run: npm run replay-all
    - run: npm run start

在此示例中，我们将在以下情况下重放用户流：

• 将新更改推送到 main 分支
• 每天中午 12:30

除了 GitHub Actions，您还可以与自己喜爱的云服务提供商集成。前往此演示，了解如何使用 Google Cloud Run 作业并行执行多达 1 万个用户流！

总结

在这篇博文中，我们讨论了用于将用户流导出为 JSON 文件、使用 PuppeteerReplayExtension 自定义重放内容、使用 PuppeteerStringifyExtension 转换用户流，以及将其集成到 CI 工作流中的不同选项。

希望这篇博文能为您提供一些想法，帮助您了解如何使用“记录器”面板以及提供的工具，从而更轻松地将测试工作流集成到您的项目中。期待尽快看到您的惊世之作！

下载预览渠道

请考虑将 Chrome Canary、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变更，或与开发者工具相关的任何其他内容。

• 请通过 crbug.com 提交建议或反馈。
• 在开发者工具中使用更多选项     > 帮助 > 报告开发者工具问题来报告开发者工具问题。
• 请发送电子邮件至 @ChromeDevTools。
• 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。