Chrome 擴充功能的端對端測試

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

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

使用瀏覽器測試程式庫

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

在無頭 Chrome 中執行測試

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

設定擴充功能 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);'
);

測試服務 worker 終止

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

請注意，使用某些測試架構時，服務工作者可能不會像在正常使用情況下一樣自動終止。在 Selenium 中就是這種情況。這項功能會利用 ChromeDriver，將偵錯工具附加到所有服務工作站，以免系統停止執行這些工作。