Chrome-Erweiterungen mit Puppeteer testen

Puppeteer bietet ein Framework zum Erstellen automatisierter Tests von Websites, das auch die Möglichkeit umfasst, Chrome-Erweiterungen zu testen. Dies sind allgemeine End-to-End-Tests, mit denen die Funktionalität einer Website oder Erweiterung getestet wird, nachdem sie in das Endprodukt integriert wurde. In dieser Anleitung wird gezeigt, wie Sie einen einfachen Test für eine Erweiterung aus unserem Beispiel-Repository schreiben.

Vorbereitung

Klonen Sie das Repository chrome-extensions-samples oder laden Sie es herunter. Wir verwenden die History API-Demo in api-samples/history/showHistory als Test-Erweiterung.

Außerdem müssen Sie Node.JS installieren, die Laufzeit, auf der Puppeteer basiert.

Test schreiben

Schritt 1: Node.JS-Projekt starten

Wir müssen ein einfaches Node.JS-Projekt einrichten. Erstellen Sie in einem neuen Ordner eine package.json-Datei mit folgendem Inhalt:

package.json:

{
  "name": "puppeteer-demo",
  "version": "1.0"
}

Ähnlich wie bei der Datei manifest.json einer Erweiterung ist diese Datei für alle Node-Projekte erforderlich.

Schritt 2: Puppeteer und Jest installieren

Führen Sie npm install puppeteer jest aus, um Puppeteer und Jest als Abhängigkeiten hinzuzufügen. Sie werden automatisch der Datei package.json hinzugefügt.

Es ist möglich, eigenständige Puppeteer-Tests zu schreiben. Wir verwenden jedoch Jest als Test-Runner, um unserem Code eine zusätzliche Struktur zu geben.

Schritt 3: Einstiegspunkt erstellen

Erstellen Sie eine neue Datei mit dem Namen index.test.js und fügen Sie den folgenden Code ein:

index.test.js:

const puppeteer = require('puppeteer');

const EXTENSION_PATH = '../../api-samples/history/showHistory';

let browser;
let worker;

beforeEach(async () => {
  // TODO: Launch the browser.
});

afterEach(async () => {
  // TODO: Close the browser.
});

Schritt 4: Browser starten

Aktualisieren Sie beforeEach und afterEach, um den Browser zu starten und zu schließen. Wenn Sie viele Tests ausführen, sollten Sie denselben Browser verwenden. Davon wird jedoch im Allgemeinen abgeraten, da dadurch die Isolation zwischen den Tests verringert wird und ein Test das Ergebnis eines anderen beeinflussen kann.

index.test.js:

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    pipe: true,
    enableExtensions: [EXTENSION_PATH]
  });
});

afterEach(async () => {
  await browser.close();
  browser = undefined;
});

Schritt 5: Auf den Service Worker der Erweiterung warten

Wir müssen warten, bis der Service Worker der Erweiterung gestartet wurde, damit wir ihn später zum Öffnen des Pop‑ups verwenden können. Aktualisieren Sie die Funktion beforeEach mit dem folgenden Code:

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    pipe: true,
    enableExtensions: [EXTENSION_PATH]
  });

  const workerTarget = await browser.waitForTarget(
    // Assumes that there is only one service worker created by the extension
    // and its URL ends with service-worker.js.
    (target) =>
      target.type() === 'service_worker' &&
      target.url().endsWith('service-worker.js')
  );

  worker = await workerTarget.worker();
});

Schritt 6: Alias hinzufügen

Um das Ausführen der Tests zu vereinfachen, fügen Sie Ihrer package.json-Datei einen Alias hinzu:

package.json:

{
  "name": "puppeteer-demo",
  "version": "1.0",
  "dependencies": {
    "puppeteer": "^24.8.1"
  },
  "scripts": {
    "start": "jest ."
  }
}

Dadurch werden alle Dateien, die im aktuellen Verzeichnis auf .test.js enden, ausgeführt.

Schritt 7: Pop-up öffnen

Fügen Sie einen einfachen Test hinzu. Wir öffnen zuerst eine neue Seite, damit ein Eintrag im Browserverlauf vorhanden ist. Anschließend wird das Pop‑up mit dem Verlauf geöffnet. Fügen Sie den folgenden Code hinzu:

index.test.js:

test('popup renders correctly', async () => {
  // Open a page to add a history item.
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Open the extension popup.
  await worker.evaluate('chrome.action.openPopup();');

  const popupTarget = await browser.waitForTarget(
    // Assumes that there is only one page with the URL ending with popup.html
    // and that is the popup created by the extension.
    (target) => target.type() === 'page' && target.url().endsWith('popup.html')
  );
});

Schritt 8: Aktuellen Status bestätigen

Stellen Sie etwas fest, damit unser Test fehlschlagen kann, wenn sich die Erweiterung nicht wie erwartet verhält. Wir wissen, dass in unserem Pop-up zuletzt besuchte Seiten angezeigt werden sollten. Prüfen Sie daher, ob eine angezeigt wird:

index.test.js:

test('popup renders correctly', async () => {
  // Open a page to add a history item.
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Open the extension popup.
  await worker.evaluate('chrome.action.openPopup();');

  const popupTarget = await browser.waitForTarget(
    // Assumes that there is only one page with the URL ending with popup.html
    // and that is the popup created by the extension.
    (target) => target.type() === 'page' && target.url().endsWith('popup.html')
  );

  const popup = await popupTarget.asPage();

  const list = await page.$('ul');
  const children = await list.$$('li');

  expect(children.length).toBe(1);
});

Schritt 9: Test ausführen

Verwenden Sie npm start, um den Test auszuführen. Sie sollten eine Ausgabe sehen, die darauf hinweist, dass Ihr Test bestanden wurde.

Das vollständige Projekt finden Sie in unserem Repository „chrome-extensions-samples“.

Nächste Schritte

Nachdem Sie die Grundlagen verstanden haben, können Sie versuchen, eine Testsuite für Ihre eigene Erweiterung zu erstellen. Die Puppeteer-API-Referenz enthält weitere Informationen zu den Möglichkeiten. Es gibt viele Funktionen, die hier nicht beschrieben werden.