Chrome-Erweiterungen mit Puppeteer testen

Puppeteer bietet ein Framework zum Erstellen automatisierter Tests von Websites, einschließlich der Möglichkeit, Chrome-Erweiterungen zu testen. Dies sind umfassende End-to-End-Tests, mit denen die Funktionalität einer Website oder Erweiterung getestet wird, nachdem sie in das Endprodukt eingebunden 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-sample oder laden Sie es herunter. Wir verwenden die Demoversion der History API 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, die Folgendes enthält:

pacakge.json:

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

Ähnlich wie die manifest.json-Datei einer Erweiterung wird diese Datei von allen Knotenprojekten benötigt.

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 der Datei package.json automatisch hinzugefügt.

Es ist möglich, eigenständige Puppeteer-Tests zu schreiben, aber wir verwenden Jest als Test-Runner, um unserem Code 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 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

Aktualisiere beforeEach und afterEach, um den Browser zu starten und zu schließen. Wenn Sie viele Tests ausführen, kann es sinnvoll sein, denselben Browser zu verwenden. Davon wird jedoch generell abgeraten, da dadurch die Isolation zwischen den Tests reduziert wird und ein Test sich möglicherweise auf das Ergebnis eines anderen Tests auswirkt.

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

Um die Durchführung der Tests zu vereinfachen, fügen Sie der Datei package.json einen Alias hinzu:

package.json:

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

Dadurch werden alle Dateien mit der Endung .test.js im aktuellen Verzeichnis ausgeführt.

Schritt 6: Pop-up öffnen

Lassen Sie uns einen einfachen Test hinzufügen, mit dem das Pop-up auf einer neuen Seite geöffnet wird. Dies ist erforderlich, da Puppeteer den Zugriff auf Erweiterungs-Pop-ups aus dem Pop-up-Fenster 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 bestätigen

Lassen Sie uns etwas behaupten, sodass unser Test fehlschlagen kann, falls die Erweiterung nicht wie erwartet funktioniert. Unser Pop-up sollte kürzlich besuchte Seiten anzeigen. Prüfen Sie also, ob eine angezeigt wird:

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 zum Ausführen des Tests npm start. Die Ausgabe sollte anzeigen, dass der Test bestanden wurde.

Das vollständige Projekt finden Sie in unserem Repository "chrome-extensions-Beispiele".

Nächste Schritte

Nachdem Sie sich mit den Grundlagen vertraut gemacht haben, können Sie eine Testsuite für Ihre Erweiterung erstellen. Die API-Referenz von Puppeteer enthält weitere Informationen darüber, was möglich ist. Es gibt viele Funktionen, die hier nicht beschrieben werden.