端對端測試涉及建構擴充功能套件並載入至瀏覽器。測試工具會與瀏覽器通訊,自動執行互動動作,並測試使用者會經歷的相同流程。支援端對端測試的程式庫通常會提供控制瀏覽器、模擬使用者輸入內容,以及觀察任何已開啟網頁的目前狀態的方法。
如需教學課程,請參閱「使用 Puppeteer 測試 Chrome 擴充功能」教學課程;如需進一步瞭解如何為 Chrome 擴充功能編寫單元測試,請參閱單元測試。
使用瀏覽器測試程式庫
擴充功能可支援多種測試程式庫。
媒體庫 | 指引 |
---|---|
Puppeteer / Playwright | 請參閱 Chrome 擴充功能 (Puppeteer / Playwright)。 |
硒 | 使用 ChromeOptions 物件載入擴充功能。詳情請參閱這篇文章。 |
WebDriverIO | 請參閱「網路擴充功能測試」一文。 |
在無頭 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,將偵錯工具附加到所有服務工作站,以免系統停止執行這些工作。