使用 Puppeteer 測試 Chrome 擴充功能

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

事前準備

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

您也需要安裝 Node.JS，這是 Puppeteer 建構時使用的執行階段。

編寫測試

步驟 1：啟動 Node.JS 專案

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

package.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';

let browser;
let worker;

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：等待擴充功能服務工作人員

我們需要等待擴充功能服務工作人員啟動，才能在稍後使用該服務開啟彈出式視窗。使用下列程式碼更新 beforeEach 函式：

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

  const workerTarget = await browser.waitForTarget(
    // Assumes that there is only one service worker created by the extension
    // and its URL ends with service-worker.js.
    (target) =>
      target.type() === 'service_worker' &&
      target.url().endsWith('service-worker.js')
  );

  worker = await workerTarget.worker();
});

步驟 6：新增別名

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

package.json:

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

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

步驟 7：開啟彈出式視窗

新增基本測試。我們會先開啟新頁面，讓瀏覽器記錄中出現項目。接著，我們會開啟彈出式視窗，顯示記錄內容。加入下列程式碼：

index.test.js:

test('popup renders correctly', async () => {
  // Open a page to add a history item.
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Open the extension popup.
  await worker.evaluate('chrome.action.openPopup();');

  const popupTarget = await browser.waitForTarget(
    // Assumes that there is only one page with the URL ending with popup.html
    // and that is the popup created by the extension.
    (target) => target.type() === 'page' && target.url().endsWith('popup.html')
  );
});

步驟 8：判斷目前狀態

判斷某個項目，這樣一來，如果擴充功能未如預期運作，測試就會失敗。我們知道彈出式視窗應顯示最近造訪的網頁，因此請檢查是否看到彈出式視窗：

index.test.js:

test('popup renders correctly', async () => {
  // Open a page to add a history item.
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Open the extension popup.
  await worker.evaluate('chrome.action.openPopup();');

  const popupTarget = await browser.waitForTarget(
    // Assumes that there is only one page with the URL ending with popup.html
    // and that is the popup created by the extension.
    (target) => target.type() === 'page' && target.url().endsWith('popup.html')
  );

  const popup = await popupTarget.asPage();

  const list = await page.$('ul');
  const children = await list.$$('li');

  expect(children.length).toBe(1);
});

步驟 9：執行測試

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

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

後續步驟

掌握基本概念後，請嘗試為自己的擴充功能建構測試套件。如要進一步瞭解可執行的操作，請參閱 Puppeteer API 參考資料，其中包含許多未在此說明的功能。