說過,編寫自動化測試對開發人員生活來說不是最有趣。身為開發人員,我們希望編寫功能、修正錯誤,並改善世界!不過,如果工作流程中沒有自動化測試,長期下來就會出現許多「錯誤」。因此,我們也認為編寫自動化測試相當重要。
您可以使用 Chrome 開發人員工具中的「錄製器」面板,記錄及重播使用者流程,並透過各種第三方擴充功能和程式庫,將這些流程匯出為各種格式 (例如測試指令碼),使用 Puppeteer Replay 程式庫自訂使用者流程,並將這些流程與現有的流程整合。
本篇文章將討論以下內容:
- 如何透過程式碼匯出及重播使用者流程。
- 如何利用 Puppeteer Replay 自訂使用者流程。
- 如何整合 CI/CD 工作流程。
本網誌文章假設您已經瞭解錄音工具的基本概念。如果您是錄音工具的新手,請參閱這份簡短的入門教學課程和影片指南,瞭解如何開始使用。
透過程式輔助方式匯出使用者流程和重播內容
根據預設,您可以使用錄製器將這些錄製內容匯出為 Puppeteer 或 Puppeteer Replay 指令碼,或匯出為一般 JSON 檔案。
將使用者流程匯出為 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/’)
。
自訂開發人員工具重播體驗
重播擴充功能可讓您使用第三方服務和基礎架構重播錄製內容,無須離開 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 工作同時執行多達 10,000 個使用者流程!
結論
在本篇文章中,我們討論了各種匯出使用者流程為 JSON 檔案的選項,以及如何使用 PuppeteerReplayExtension
自訂重播、使用 PuppeteerStringifyExtension
轉換使用者流程,並將這些流程整合至 CI 工作流程中。
希望這篇網誌文章能讓您瞭解如何使用錄製器面板和提供的工具,輕鬆將測試工作流程整合至專案。期待看到你打造的遊戲!
下載預覽頻道
建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能、測試最新的網頁平台 API,並在使用者發現問題前先行解決!
與 Chrome 開發人員工具團隊聯絡
請使用下列選項,討論文章中的新功能和變更,或任何與開發人員工具相關的內容。
- 透過 crbug.com 提交建議或意見回饋。
- 在開發人員工具中,依序按一下「更多選項」「說明」>「回報開發人員工具的問題」,即可回報開發人員工具的問題。
- 請在 Twitter 上傳送訊息給 @ChromeDevTools。
- 歡迎分享開發人員工具 YouTube 新功能或開發人員工具秘訣 YouTube 影片留言。