使用 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 檔案類似，所有節點專案都需要這個檔案。

步驟 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 參考資料含有更多可能實現的資訊，目前有許多功能未在此說明。