Chrome 擴充功能的端對端測試

端對端測試包括建構擴充功能套件，並載入至瀏覽器。測試工具會與瀏覽器通訊，自動執行互動並測試使用者會經歷的相同流程。支援端對端測試的程式庫通常會提供控制瀏覽器、模擬使用者輸入內容，以及觀察任何開啟網頁目前狀態的方法。

如需教學課程，請參閱「使用 Puppeteer 測試 Chrome 擴充功能」一文；如要瞭解如何編寫 Chrome 擴充功能的單元測試，請參閱「單元測試」一文。

使用瀏覽器測試程式庫

多種測試程式庫都支援擴充功能。

在 Headless Chrome 中執行測試

在自動化工作流程中執行測試時，通常需要在沒有螢幕的機器上載入擴充功能。Chrome 的全新無頭模式可讓 Chrome 在這類無人環境中執行。使用 --headless=new 標記啟動 Chrome (無頭模式目前預設為「舊版」，不支援載入擴充功能)。視您選擇的自動化工具而定，系統可能會自動新增旗標。

設定擴充功能 ID

在測試中，通常會需要固定的擴充功能 ID。這樣就能輕鬆完成許多常見工作，例如在需要通訊的伺服器上將擴充功能來源加入允許清單，或在測試中開啟擴充功能頁面。請按照「維持一致的擴充功能 ID」一文中的步驟操作。

測試擴充功能頁面

您可以使用對應的網址存取擴充功能頁面，例如 chrome-extension://<id>/index.html。使用所選自動化工具提供的正常導覽方法，前往這些網址。

測試擴充功能彈出式視窗

使用部分程式庫時，您或許可以透過 action.openPopup() API 開啟彈出式視窗，然後取得新內容的參照。舉例來說，Puppeteer 的 Chrome 擴充功能指南就說明瞭如何執行這項操作。

如果無法在所選程式庫中執行這項操作，請在新分頁中開啟彈出式視窗的網址。如果彈出式視窗使用中的分頁，請考慮實作覆寫，將分頁 ID 明確傳遞至彈出式視窗。例如：

const URL_PARAMS = new URLSearchParams(window.location.search);

async function getActiveTab() {
  // Open popup.html?tab=5 to use tab ID 5, etc.
  if (URL_PARAMS.has("tab")) {
    return await chrome.tabs.get(parseInt(URL_PARAMS.get("tab")));
  }

  const tabs = await chrome.tabs.query({
    active: true,
    currentWindow: true
  });

  return tabs[0];
}

檢查擴充功能狀態

如要避免在變更擴充功能的內部行為時發生測試失敗情形，一般來說，最佳做法是在整合測試中避免存取內部狀態。請改為根據使用者可見的內容進行測試。不過，有時您可能希望直接從擴充功能存取資料。在這種情況下，請考慮在擴充功能頁面的環境中執行程式碼。

在 Puppeteer 中：

const workerTarget = await browser.waitForTarget(
  target => target.type() === 'service_worker'
);
const worker = await workerTarget.worker();

const value = await worker.evaluate(() => {
  chrome.storage.local.get('foo');
});

在 Selenium 中：

// Selenium doesn't allow us to access the service worker, so we need to open an extension page where we can execute the code
await driver.get('chrome-extension://<id>/popup.html');
await driver.executeAsyncScript(
  'const callback = arguments[arguments.length - 1];' +
  'chrome.storage.local.get(\'foo\').then(callback);'
);

測試服務工作人員終止作業

如要瞭解如何測試 Service Worker 終止作業，請參閱「使用 Puppeteer 測試 Service Worker 終止作業」。我們也提供 Puppeteer 和 Selenium 的範例。

請注意，使用某些測試架構時，服務工作人員可能不會像正常使用時一樣自動終止。Selenium 就是如此。這項功能會依附 ChromeDriver，將偵錯工具附加至所有服務工作人員，防止他們停止運作。