Chrome 擴充功能的端對端測試

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

如需為 Chrome 擴充功能撰寫單元測試的詳細資訊，請參閱使用 Puppeteer 測試 Chrome 擴充功能；如需進一步瞭解如何編寫 Chrome 擴充功能的單元測試，請參閱單元測試。

使用瀏覽器測試程式庫

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

媒體庫	指引
布偶模型 & 劇作家	請參閱 Chrome 擴充功能 (Puppeteer / Playwright)。
硒	使用 ChromeOptions 物件載入擴充功能。詳情請參閱這裡。
WebDriverIO	請參閱「網站擴充功能測試」一文。

在無頭 Chrome 中執行測試

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

設定擴充功能 ID

我們通常會希望在測試中採用固定的擴充功能 ID。這可以簡化許多常見工作，例如將擴充功能的來源加入許可清單在需要通訊的伺服器上，或是在測試中開啟擴充功能頁面。方法很簡單，只要按照「保持擴充功能 ID 保持一致」下方的步驟操作即可。

測試擴充功能頁面

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

測試擴充功能彈出式視窗

目前無法在在其他頁面的內容中開啟擴充功能彈出式視窗。請改為在新分頁中開啟彈出式視窗的網址。如果彈出式視窗使用使用中的分頁，建議您導入覆寫機制，將分頁 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 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 終止作業

如要進一步瞭解如何測試 Service Worker 終止作業，請參閱使用 Puppeteer 測試 Service Worker 終止情形。另外，我們也有 Puppeteer 和 Selenium 的範例。

請注意，使用部分測試架構時，Service Worker 可能不會自動終止，就像在正常使用一樣。這是 Selenium 中的做法。它需要使用 ChromeDriver，會將偵錯工具附加到所有服務工作站，防止服務工作站停止執行。