Metadaten im Playwright-HTML-Bericht anzeigen: Eine vollständige Anleitung

Playwright ist ein leistungsstarkes Test-Framework, aber seine HTML-Berichte können für komplexe Projekte einfach wirken. Wäre es nicht schön, Metadaten wie Commit-Nachrichten, Autorendetails oder Links zu CI-Builds direkt im Berichtskopf anzuzeigen? Hier erfahren Sie, wie Sie dies erreichen und einige tiefere Einblicke in die Fähigkeiten von Playwright.

Metadaten von Dramatikern verstehen

In der Playwright-Dokumentation wird ein Metadatenfeld für die Konfiguration erwähnt:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  metadata: 'acceptance tests',
});

Zum Zeitpunkt des Schreibens (Playwright v1.49) heißt es:

Metadaten, die direkt in den als JSON serialisierten Testbericht eingefügt werden

Aber es gibt einen Haken: Durch das Hinzufügen dieser Konfiguration werden im Bericht keine Metadaten angezeigt. Wenn Sie TypeScript verwenden, wird auch eine Fehlermeldung für das bereitgestellte Beispiel angezeigt:

Der Typ „String“ kann nicht dem Typ „Metadaten“ zugewiesen werden.

Natürlich ist die Dokumentation veraltet, aber Metadaten in Berichten sind durchaus möglich.

Die echte Metadatenkonfiguration

Nachdem ich mich mit dem Quellcode von Playwright befasst hatte, entdeckte ich die tatsächlichen Felder, die vom HTML-Bericht unterstützt werden:

export type Metainfo = {
  'revision.id'?: string;
  'revision.author'?: string;
  'revision.email'?: string;
  'revision.subject'?: string;
  'revision.timestamp'?: number | Date;
  'revision.link'?: string;
  'ci.link'?: string;
  'timestamp'?: number;
};

Nur ​​diese Felder können angezeigt werden. Konfigurieren wir sie in playwright.config.ts:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: 'html',
  metadata: {
    'revision.id': 'adcb0c51debdbe96a6a836e2ead9d40a859f6438',
    'revision.author': 'John Smith',
    'revision.email': 'john.smith@gmail.com',
    'revision.subject': 'Acceptance tests',
    'revision.timestamp': Date.now(),
    'revision.link': 'https://github.com/microsoft/playwright/pull/12734',
    'ci.link': 'https://github.com/microsoft/playwright/actions/workflows/tests_primary.yml',
    'timestamp': Date.now(),
  },
});

Nach der Durchführung von Tests werden diese Metadaten im HTML-Berichtsheader wunderschön angezeigt.

Automatisierung der Metadatenpopulation

Das manuelle Ausfüllen von Metadatenfeldern ist nicht praktikabel, insbesondere in dynamischen Umgebungen wie CI/CD-Pipelines. Die Automatisierung dieses Prozesses gewährleistet genaue und konsistente Metadaten ohne manuellen Aufwand.

Pakete von Drittanbietern

Um den Prozess zu automatisieren, können Sie jedes Paket eines Drittanbieters verwenden, das Git-Commit-Informationen extrahiert. Dies ist ein unkomplizierter Ansatz. Fahren wir mit der zweiten Option fort, die interessanter ist.

Nutzung des versteckten Plugin-Systems von Playwright

Eine der faszinierendsten Entdeckungen von Playwright ist sein verstecktes Plugin-System. Obwohl es nicht offiziell dokumentiert ist, bietet es eine Möglichkeit, die Funktionen von Playwright durch benutzerdefinierte Plugins zu erweitern.

Diese Erkenntnis habe ich gewonnen, als ich mir den Test des Dramatikers selbst angesehen habe. Playwright unterstützt ein verstecktes Konfigurationsfeld „@playwright/test“, in dem Sie Plugins definieren können.

Hier ist ein Beispiel für die Aktivierung des gitCommitInfo-Plugins:

import { defineConfig } from '@playwright/test';
import { gitCommitInfo } from 'playwright/lib/plugins';

export default defineConfig({
  reporter: 'html',
  // @ts-expect-error
  '@playwright/test': { 
    plugins: [gitCommitInfo()] 
  },
});

Was macht das gitCommitInfo-Plugin?

Dieses Plugin extrahiert Git-Commit-Details und füllt Metadatenfelder im HTML-Bericht, einschließlich:

• Hash festschreiben
• Commit-Nachricht
• Name und E-Mail des Autors
• Zeitstempel

Darüber hinaus kann das Plugin bei der Ausführung in CI/CD-Umgebungen automatisch Felder mithilfe von Standardumgebungsvariablen wie GITHUB_SHA oder CI_COMMIT_SHA füllen.

Nachdem ich das Plugin aktiviert und Tests ausgeführt habe, erhalte ich den folgenden Bericht mit automatisch ausgefüllten Metadaten:

Andere Plugins

Ich war neugierig, gibt es noch andere versteckte Plugins in Playwright?
Im Plugins-Verzeichnis gibt es nur noch ein Plugin – webServerPlugin. Es ermöglicht das Starten und Stoppen des integrierten Webservers beim Ausführen von Tests. Tatsächlich wird dieses Plugin unter der Haube verwendet, wenn Sie die Option config.webServer definieren. Daher wird das Plugin-System intern in Playwright verwendet, ist jedoch nicht für die öffentliche Nutzung dokumentiert.

Das Plugin-System wurde in früheren Versionen von Playwright eingeführt, aber irgendwann ausgeblendet. Leider gibt es derzeit keine Pläne, es zu veröffentlichen.

Verwenden einer benutzerdefinierten Funktion für Metadaten

Wenn Sie Metadaten lieber automatisch ausfüllen möchten, ohne auf Plugins angewiesen zu sein, können Sie dies mit einer benutzerdefinierten Funktion tun. Ich habe die Funktion gitStatusFromCLI() aus dem Plugin gitCommitInfo angepasst, sodass sie unabhängig nutzbar ist:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  metadata: 'acceptance tests',
});

Verwendung der Funktion zum Auffüllen von Metadaten in der Playwright-Konfiguration:

export type Metainfo = {
  'revision.id'?: string;
  'revision.author'?: string;
  'revision.email'?: string;
  'revision.subject'?: string;
  'revision.timestamp'?: number | Date;
  'revision.link'?: string;
  'ci.link'?: string;
  'timestamp'?: number;
};

Nachdem ich Tests durchgeführt habe, habe ich denselben HTML-Bericht mit ausgefüllten Metadaten erhalten:

Dieser Ansatz gibt Ihnen die volle Kontrolle über die Metadatenautomatisierung, ohne auf interne Playwright-Funktionen angewiesen zu sein.

Optimierung für parallele Tests

Alles sieht gut aus, aber es gibt ein Leistungsproblem mit dem obigen Code. Könnten Sie erraten, was das Problem ist?

Dramatiker führt Tests bei Arbeitern durch. Wenn jeder Worker startet, importiert er die Playwright-Konfiguration. Wenn die Playwright-Konfiguration einen schweren Vorgang ausführt (z. B. das Abrufen von Git-Daten), verlangsamt dies den Worker. Darüber hinaus macht es keinen Sinn, den Befehl mehrmals auszuführen, da er das gleiche Ergebnis zurückgibt.

Sie können es optimieren, indem Sie die Metadatenfunktion nur im Haupt-Worker ausführen. Der Hauptarbeiter kann durch die leere Umgebungsvariable TEST_WORKER_INDEX erkannt werden:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: 'html',
  metadata: {
    'revision.id': 'adcb0c51debdbe96a6a836e2ead9d40a859f6438',
    'revision.author': 'John Smith',
    'revision.email': 'john.smith@gmail.com',
    'revision.subject': 'Acceptance tests',
    'revision.timestamp': Date.now(),
    'revision.link': 'https://github.com/microsoft/playwright/pull/12734',
    'ci.link': 'https://github.com/microsoft/playwright/actions/workflows/tests_primary.yml',
    'timestamp': Date.now(),
  },
});

Dadurch wird sichergestellt, dass Metadaten effizient ausgefüllt werden, ohne die Leistung zu beeinträchtigen.

---

Abschluss

Das Hinzufügen von Metadaten zu Playwright-HTML-Berichten ist möglich, allerdings nicht gut dokumentiert. Sie können Metadaten manuell konfigurieren, das versteckte Plugin-System nutzen oder eine benutzerdefinierte Lösung implementieren.

Wichtige Erkenntnisse:

• Metadatenfelder sind auf bestimmte Schlüssel beschränkt (revision.id, ci.link usw.).
• Automatisieren Sie Metadaten mit den versteckten Plugins oder benutzerdefinierten Skripten von Playwright.
• Optimieren Sie für parallele Tests, indem Sie die Metadatenlogik nur im Haupt-Worker ausführen.

Basierend auf der Recherche für den Artikel habe ich eine Pull-Anfrage an das Playwright-Repo geöffnet und Dokumentationsverbesserungen für das Metadatenfeld vorgeschlagen.

Haben Sie versucht, Metadaten zu Playwright-Berichten hinzuzufügen? Teilen Sie Ihre Erfahrungen oder Herausforderungen in den Kommentaren!

Das obige ist der detaillierte Inhalt vonMetadaten im Playwright-HTML-Bericht anzeigen: Eine vollständige Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!