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

Ergün Erdogmus
Ergün Erdogmus
X
Jecelyn Yeen

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

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

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

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

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

以编程方式导出用户体验历程并进行重放

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

导出选项。

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

使用 Puppeteer Replay 重放

按照代码库中的说明安装 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 开始，您现在可以使用扩展程序重放录音，从而提升体验。借助这些扩展程序，您无需离开开发者工具即可无缝集成第三方服务和基础架构，以便重放录制内容。

Replay 扩展程序允许扩展程序向开发者工具添加一个面板，以配置重放和显示重放结果。

首先，请浏览可用扩展程序列表，或了解如何创建自己的自定义扩展程序。

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

在后台，所有扩展程序和库都是基于 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/’)。

自定义 DevTools 重放体验

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

使用浏览器扩展程序提升重玩体验。

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

发布 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 版用作您的默认开发浏览器。通过这些预览渠道，您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API，并在用户发现问题之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

您可以使用以下选项讨论该帖子中介绍的新功能和变更，或与 DevTools 相关的任何其他内容。