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

Beim End-to-End-Test 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.

Eine Anleitung finden Sie unter Chrome-Erweiterungen mit Puppeteer testen. Weitere Informationen zum Schreiben von Unittests für Chrome-Erweiterungen finden Sie unter Unittests.

Browsertestbibliotheken verwenden

Erweiterungen werden von einer Reihe von Testbibliotheken unterstützt.

Mediathek	Anleitung
Puppenspieler / Dramatiker	Siehe Chrome-Erweiterungen (Puppeteer / Playwright).
Selenium	Verwenden Sie das Objekt ChromeOptions, um Erweiterungen zu laden. Weitere Informationen
WebDriverIO	Siehe Testen von Weberweiterungen.

Tests in der monitorlosen Chrome-Version ausführen

Wenn Tests im Rahmen eines automatisierten Workflows ausgeführt werden, ist es häufig erforderlich, die Erweiterung auf einem Computer ohne Bildschirm zu laden. Dank des neuen monitorlosen Modus von Chrome kann Chrome auch in einer unbeaufsichtigten Umgebung wie dieser ausgeführt werden. Starten Sie Chrome mit dem Flag --headless=new. Die monitorlose Version ist derzeit standardmäßig auf „alt“ eingestellt, da das Laden von Erweiterungen nicht unterstützt wird. Je nach ausgewähltem Automatisierungstool gibt es möglicherweise eine Einstellung, durch die das Flag automatisch für Sie hinzugefügt wird.

Erweiterungs-ID festlegen

Häufig ist eine feste Erweiterungs-ID in Tests sinnvoll. Dadurch werden viele gängige Aufgaben wie das Festlegen des Ursprungs der Erweiterung auf einem Server, mit dem sie kommunizieren muss, auf die Zulassungsliste gesetzt oder Erweiterungsseiten in Tests geöffnet. Folgen Sie dazu der Anleitung unter Einheitliche 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 zur Verfügung stehen, um zu diesen URLs zu gelangen.

Pop-up einer Erweiterung testen

Derzeit können Erweiterungs-Pop-ups nicht im Kontext einer anderen Seite geöffnet werden. Öffnen Sie stattdessen die URL des Pop-ups in einem neuen Tab. Wenn in Ihrem Pop-up der aktive Tab verwendet wird, sollten Sie eine Überschreibung implementieren, mit der eine Tab-ID explizit an das 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 parseInt(URL_PARAMS.get("tab"));
  }

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

  return tabs[0];
}

Erweiterungsstatus prüfen

Im Allgemeinen empfiehlt es sich, den Zugriff auf den internen Status in einem Integrationstest zu vermeiden, um Testfehler beim Ändern des internen Verhaltens der Erweiterung zu vermeiden. Stattdessen sollten Sie Ihre Tests auf dem aufbauen, 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 die Codeausführung im Kontext einer Erweiterungsseite in Betracht ziehen.

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 Selen:

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

Beendigung von Service Worker testen

Weitere Informationen zum Testen der Service-Worker-Beendigung finden Sie unter Service-Worker-Beendigung mit Puppeteer testen. Wir haben auch ein Beispiel für Puppeteer und Selenium.

Beachten Sie, dass Service Worker bei der Verwendung einiger Test-Frameworks möglicherweise nicht wie bei normaler Verwendung automatisch beendet werden. Dies ist der Fall bei Selenium. Dazu wird ChromeDriver benötigt, der allen Service Workern einen Debugger hinzufügt, damit sie nicht beendet werden können.