使用 Puppeteer 測試 Chrome 擴充功能

Puppeteer 提供架構，可用於建構網站的自動化測試，其中也包含測試 Chrome 擴充功能的功能。這些是高階端對端測試，可在網站或擴充功能建構至最終產品後，測試其功能。在本教學課程中，我們將示範如何為範例存放區中的擴充功能編寫基本測試。

事前準備

複製或下載 chrome-extensions-samples 存放區。我們會使用 api-samples/history/showHistory 中的 History API 示範做為測試擴充功能。

您也需要安裝 Node.JS，這是 Puppeteer 的執行階段所建構的程式。

編寫測試

步驟 1：開始 Node.JS 專案

我們需要設定基本 Node.JS 專案。在新資料夾中，建立 package.json 檔案，並加入以下內容：

pacakge.json:

{   "name": "puppeteer-demo",   "version": "1.0" }

與擴充功能的 manifest.json 檔案類似，所有 Node 專案都需要這個檔案。

步驟 2：安裝 Puppeteer 和 Jest

執行 npm install puppeteer jest 以新增 Puppeteer 和 Jest 做為依附元件。系統會自動將這些內容加入 package.json 檔案。

您可以編寫獨立的 Puppeteer 測試，但我們會使用 Jest 做為測試執行工具，為程式碼提供一些額外的結構。

步驟 3：建立進入點

建立名為 index.test.js 的新檔案，並加入以下程式碼：

index.test.js:

const puppeteer = require('puppeteer');  const EXTENSION_PATH = '../../api-samples/history/showHistory'; const EXTENSION_ID = 'jkomgjfbbjocikdmilgaehbfpllalmia';  let browser;  beforeEach(async () => {   // TODO: Launch the browser. });  afterEach(async () => {   // TODO: Close the browser. });

步驟 4：啟動瀏覽器

更新 beforeEach 和 afterEach，以啟動及關閉瀏覽器。執行多項測試時，建議您使用相同的瀏覽器。不過，我們通常不建議這麼做，因為這會降低測試之間的隔離性，並可能導致一項測試影響另一項測試的結果。

index.test.js:

beforeEach(async () => {   browser = await puppeteer.launch({     headless: false,     pipe: true,     enableExtensions: [EXTENSION_PATH]   }); });  afterEach(async () => {   await browser.close();   browser = undefined; });

步驟 5：新增別名

為簡化測試執行作業，請在 package.json 檔案中新增別名：

package.json:

{   "name": "puppeteer-demo",   "version": "1.0",   "dependencies": {     "puppeteer": "^24.8.1"   },   "scripts": {     "start": "jest ."   } }

這麼做會執行目前目錄中結尾為 .test.js 的所有檔案。

步驟 6：開啟彈出式視窗

讓我們新增基本測試，在新頁面中開啟彈出式視窗。我們需要執行這項操作，因為 Puppeteer 不支援從彈出式視窗存取擴充功能彈出式視窗。加入下列程式碼︰

index.test.js:

test('popup renders correctly', async () => {   const page = await browser.newPage();   await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`); });

步驟 7：斷言目前狀態

讓我們斷言，這樣如果擴充功能無法正常運作，測試就會失敗。我們知道彈出式視窗應顯示最近造訪的網頁，因此讓我們確認是否有看到一個：

index.test.js:

test('popup renders correctly', async () => {   const page = await browser.newPage();   await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);    const list = await page.$('ul');   const children = await list.$$('li');    expect(children.length).toBe(1); });

步驟 8：執行測試

如要執行測試，請使用 npm start。輸出內容應會顯示測試已通過。

您可以在 chrome-extensions-samples 存放區中查看完整專案。

後續步驟

掌握基礎知識後，請嘗試為自己的擴充功能建構測試套件。Puppeteer API 參考資料包含更多可能的資訊，其中有許多功能未在此處說明。