承認，編寫自動化測試並不是開發人員生活中最有趣的事情。身為開發人員，我們致力編寫功能、修正錯誤，以及改善世界！不過，如果我們的工作流程未執行自動化測試，長遠來看，可能就會變得相當「錯誤」。因此，我們也認為編寫自動化測試很重要。
有了 Chrome 開發人員工具的「錄音工具」面板，您就能記錄和重播使用者流程、透過各種第三方擴充功能和程式庫將這些內容匯出為各種格式 (例如測試指令碼)、使用 Puppeteer Replay 程式庫自訂使用者流程，並與現有的工作流程整合。
我們將在這篇網誌文章中探討以下主題：
- 如何透過程式輔助方式匯出和重播使用者流程。
- 如何運用 Puppeteer Replay 自訂使用者流程。
- 如何整合 CI/CD 工作流程。
本網誌文章假設您已瞭解錄音工具的基本概念。如果您是第一次使用錄音工具，請按照這份簡介教學課程和影片指南開始操作。
以程式輔助方式匯出使用者流程及重播
根據預設，錄音工具可讓你將這些錄音檔匯出為 Puppeteer 或 Puppeteer Replay 指令碼，或匯出為純文字檔。
將使用者流程匯出為 JSON 檔案後，您可以選擇將結果匯入「錄音工具」面板並重新播放，或使用外部程式庫重播。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 來重播所有錄製內容。
預設情況下，使用者會在沒有 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、測試程式庫等。歡迎查看完整清單。這可讓您和您的團隊更快開始撰寫測試。
透過程式輔助方式轉換為不同的測試指令碼
除了擴充功能以外，大部分的測試供應器也都會發布程式庫，協助您透過程式輔助方式轉換多個 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 工作同時執行最多 10,000 個使用者流程。
結語
在本網誌文章中，我們討論了多種選項，包括將使用者流程匯出為 JSON 檔案、使用 PuppeteerReplayExtension 自訂重播、使用 PuppeteerStringifyExtension 轉換使用者流程，以及在持續整合工作流程中整合。
希望這篇網誌文章提供了一些資訊，讓您瞭解如何使用「錄製工具」面板和我們提供的工具，輕鬆將測試工作流程整合至專案中。迫不及待想看您的傑作！
下載預覽頻道
建議您使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。這些預覽管道可讓您使用最新的開發人員工具、測試最先進的網路平台 API，以及在使用者操作之前在網站上找出問題！
與 Chrome 開發人員工具團隊聯絡
使用下列選項，在文章中討論新功能和異動，或與開發人員工具相關的任何其他內容。
- 透過 crbug.com 提供建議或意見。
- 如要回報開發人員工具問題，請在開發人員工具中依序點選「更多選項」
>「說明」 >「回報開發人員工具的問題」。 - 在 @ChromeDevTools 張貼推文。
- 歡迎前往開發人員工具的 YouTube 影片或開發人員工具的 YouTube 影片提供新功能留言。