End-to-End-Tests für Chrome-Erweiterungen

Beim End-to-End-Testing wird ein Erweiterungspaket erstellt und in einen Browser geladen. Ein Testtool kommuniziert mit dem Browser, um Interaktionen zu automatisieren und dieselben Abläufe zu testen, die ein Nutzer durchlaufen würde. Eine Bibliothek, die End-to-End-Tests unterstützt, bietet in der Regel Möglichkeiten, den Browser zu steuern, Nutzereingaben zu simulieren und den aktuellen Status aller geöffneten Seiten zu beobachten.

Ein Tutorial finden Sie unter Chrome-Erweiterungen mit Puppeteer testen. Weitere Informationen zum Schreiben von Einheitentests für Chrome-Erweiterungen finden Sie unter Einheitentests.

Browser-Testbibliotheken verwenden

Erweiterungen werden von einer Reihe von Testbibliotheken unterstützt.

Tests in monitorlosem Chrome ausführen

Wenn Sie Tests im Rahmen eines automatisierten Workflows ausführen, ist es oft erforderlich, Ihre Erweiterung auf einem Computer ohne Bildschirm zu laden. Der neue monitorlose Modus von Chrome ermöglicht es, Chrome in einer solchen unbeaufsichtigten Umgebung auszuführen. Starten Sie Chrome mit dem Flag --headless=new. Derzeit wird für „headless“ standardmäßig „old“ verwendet, wodurch das Laden von Erweiterungen nicht unterstützt wird. Je nach ausgewähltem Automatisierungstool gibt es möglicherweise eine Einstellung, mit der das Flag automatisch hinzugefügt wird.

Erweiterungs-ID festlegen

Bei Tests ist es oft wünschenswert, eine feste Erweiterungs-ID zu haben. Dies erleichtert viele gängige Aufgaben, z. B. das Zulassen des Ursprungs der Erweiterung auf einem Server, mit dem sie kommunizieren muss, oder das Öffnen von Erweiterungsseiten in Tests. Folgen Sie dazu der Anleitung unter Konsistente Erweiterungs-ID beibehalten.

Erweiterungsseiten testen

Auf Erweiterungsseiten kann über die entsprechende URL zugegriffen werden, z. B. chrome-extension://<id>/index.html. Verwenden Sie die normalen Navigationsmethoden, die in Ihrem Automatisierungstool verfügbar sind, um zu diesen URLs zu gelangen.

Pop-up einer Erweiterung testen

Bei einigen Bibliotheken können Sie das Pop-up-Fenster möglicherweise mit der action.openPopup() API öffnen und dann eine Referenz zum neuen Kontext abrufen. Puppeteer dokumentiert beispielsweise, wie das geht, im Leitfaden zu Chrome-Erweiterungen.

Wenn das in der ausgewählten Mediathek nicht möglich ist, öffnen Sie die URL des Pop-ups in einem neuen Tab. Wenn Ihr Pop-up den aktiven Tab verwendet, sollten Sie eine Überschreibung implementieren, bei der eine Tab-ID explizit an Ihr Pop-up übergeben werden kann. Beispiel:

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];
}

Erweiterungsstatus prüfen

Um Testfehler zu vermeiden, wenn Sie das interne Verhalten Ihrer Erweiterung ändern, sollten Sie in einem Integrationstest im Allgemeinen nicht auf den internen Status zugreifen. Stattdessen sollten Sie Ihre Tests auf dem basieren, was für den Nutzer sichtbar ist. Manchmal kann es jedoch wünschenswert sein, direkt auf Daten aus der Erweiterung zuzugreifen. In diesen Fällen sollten Sie Code im Kontext einer Erweiterungsseite ausführen.

In 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');
});

In 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);'
);

Beenden von Service Workern testen

Informationen zum Testen der Beendigung von Service Workern finden Sie unter Service Worker-Beendigung mit Puppeteer testen. Außerdem haben wir ein Beispiel für Puppeteer und Selenium.

Bei einigen Test-Frameworks werden Service Worker möglicherweise nicht automatisch beendet, wie es bei normaler Verwendung der Fall wäre. Das ist bei Selenium der Fall. Es basiert auf ChromeDriver, das einen Debugger an alle Service Worker anhängt, wodurch verhindert wird, dass sie beendet werden.