Chrome-Erweiterungen mit Puppeteer testen

Puppeteer bietet ein Framework zum Erstellen automatisierter Tests von Websites, mit dem auch Chrome-Erweiterungen getestet werden können. Das sind allgemeine End-to-End-Tests, bei denen die Funktionalität einer Website oder Erweiterung getestet wird, nachdem sie in das Endprodukt eingebunden wurde. In dieser Anleitung zeigen wir Ihnen, 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 Testerweiterung.

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:

pacakge.json:

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

Ähnlich wie die manifest.json-Datei 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 Ihrer package.json-Datei 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 verleihen.

Schritt 3: Einstiegspunkt erstellen

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

index.test.js:

const puppeteer = require('puppeteer');

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

let browser;

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. Dies wird jedoch im Allgemeinen nicht empfohlen, da die Isolation zwischen Ihren Tests dadurch verringert wird und ein Test sich auf das Ergebnis eines anderen auswirken kann.

index.test.js:

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    args: [
      `--disable-extensions-except=${EXTENSION_PATH}`,
      `--load-extension=${EXTENSION_PATH}`
    ]
  });
});

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

Schritt 5: Alias hinzufügen

Fügen Sie der package.json-Datei einen Alias hinzu, um die Ausführung der Tests zu vereinfachen:

package.json:

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

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

Schritt 6: Pop-up öffnen

Fügen wir einen einfachen Test hinzu, bei dem das Pop-up auf einer neuen Seite geöffnet wird. Das ist notwendig, da Puppeteer den Zugriff auf ein Pop-up-Fenster einer Erweiterung nicht unterstützt. Fügen Sie den folgenden Code hinzu:

index.test.js:

test('popup renders correctly', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);
});

Schritt 7: Aktuellen Status prüfen

Legen wir eine Behauptung fest, damit unser Test fehlschlägt, wenn sich die Erweiterung nicht wie erwartet verhält. Wir wissen, dass unser Pop-up die zuletzt besuchten Seiten anzeigen soll. Sehen wir uns an, ob das der Fall ist:

index.test.js:

test('popup renders correctly', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);

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

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

Schritt 8: Test ausführen

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

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

Nächste Schritte

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