自訂及自動執行 Chrome 開發人員工具錄製工具以外的使用者流程

Ergün Erdogmus

Jecelyn Yeen

說過，編寫自動化測試對開發人員生活來說不是最有趣。身為開發人員，我們都希望編寫功能、修正錯誤並改善世界！不過，如果沒有在工作流程中進行自動化測試，長期下來可能會出現「錯誤」。因此，我們也認為編寫自動化測試是很重要的。

透過 Chrome 開發人員工具中的錄音工具面板，您可以錄製及重播使用者流程、透過不同的第三方擴充功能和程式庫將這些內容匯出為各種格式 (例如測試指令碼)、使用 Puppeteer Replay 程式庫自訂使用者流程，並與現有的工作流程整合。

我們將透過這篇網誌文章討論：

• 如何以程式輔助方式匯出及重播使用者流程。
• 如何透過 Puppeteer 重播功能自訂使用者流程。
• 如何與 CI/CD 工作流程整合。

本網誌文章假設您已經瞭解錄音工具的基本概念。如果您是第一次使用錄音工具，請按照這個簡短的入門教學課程和影片指南開始使用。

透過程式輔助方式匯出使用者流程和重播

根據預設，錄音工具可讓你將這些錄音檔匯出為 Puppeteer、Puppeteer Replay 指令碼或純文字檔案。

將使用者流程匯出為 JSON 檔案後，您可以選擇匯入「錄音工具」面板並重新播放，或是使用外部程式庫重播。Puppeteer Replay 程式庫是可用的程式庫之一。

再玩一次 Puppeteer 再玩一次

按照存放區中的操作說明安裝 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 來重播所有錄音。

根據預設，使用者流程會在沒有 UI 的情況下重播 (也稱為無頭模式)。如要查看 UI，請在執行指令前將 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/’)。

自訂開發人員工具重播體驗

有了重播擴充功能，只要使用第三方服務和基礎架構即可重播錄製內容，而且無須離開開發人員工具錄製工具。

如要自行建立重播擴充功能，請參閱 Replay 擴充功能說明文件及參閱擴充功能範例。

發布 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 工作同時執行多達 10,000 個使用者流程！

結論

我們在這篇網誌文章中介紹了各種將使用者流程匯出為 JSON 檔案的選項、使用 PuppeteerReplayExtension 自訂重播內容、透過 PuppeteerStringifyExtension 轉換使用者流程，並整合至持續整合工作流程中。

希望這篇網誌文章提供了一些靈感，讓您瞭解如何使用「錄音工具」面板和我們提供的工具，更輕鬆地在專案中整合測試工作流程。希望很快就能看到您的傑作！

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

與 Chrome 開發人員工具團隊聯絡

請使用下列選項，討論貼文中的新功能和異動，或與開發人員工具相關的其他事項。

• 歡迎透過 crbug.com 提出建議或意見。
• 在開發人員工具中，依序點選「更多選項」圖示   >「說明」 >「回報開發人員工具問題」，回報開發人員工具問題。
• 前往 @ChromeDevTools 張貼 Tweet。
• 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。