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

埃尔古恩·埃尔多姆斯

Twitter

Jecelyn Yeen

Twitter GitHub 首页

注意：希望帮助改进开发者工具？请点击此处报名参加 Google 用户调查。

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

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

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

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

本博文假定您已了解录音机的基础知识。如果您刚开始接触录音机，请按照此简短的介绍性教程和视频指南开始使用。

导出用户流并以编程方式重放

默认情况下，您可以通过录音机将这些录音导出为 Puppeteer 或 Puppeteer Replay 脚本，或导出为纯 JSON 文件。

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

通过 Puppeteer Replay 重放

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

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

# 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、Testing Library 等。这是完整列表。这有助于您和您的团队更快地开始编写测试。

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

除了扩展程序之外，大多数测试服务提供商还会发布库，以帮助您以编程方式转换多个 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 向我们提交建议或反馈。
• 使用开发者工具中的更多选项     > Help > Report a DevTools issues，报告开发者工具问题。
• 您可以前往 @ChromeDevTools 发 Twitter 微博。
• 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。