使用 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,
    args: [
      `--disable-extensions-except=${EXTENSION_PATH}`,
      `--load-extension=${EXTENSION_PATH}`
    ]
  });
});

afterEach(async () => {
  await browser.close();
  browser = undefined;
});

步驟 5：新增別名

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

package.json:

{
  "name": "puppeteer-demo",
  "version": "1.0",
  "dependencies": {
    "puppeteer": "^21.3.6"
  },
  "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 參考資料包含更多可能的資訊，其中有許多功能未在此處說明。