Afficher les métadonnées dans le rapport HTML Playwright : un guide complet

Playwright est un framework de test puissant, mais ses rapports HTML peuvent sembler rudimentaires pour des projets complexes. Ne serait-il pas agréable d'afficher des métadonnées telles que des messages de validation, des détails sur l'auteur ou des liens vers des versions CI directement dans l'en-tête du rapport ? Voici comment y parvenir et quelques informations plus approfondies sur les capacités de Playwright.

Comprendre les métadonnées du dramaturge

La documentation Playwright mentionne un champ de métadonnées pour la configuration :

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

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

Au moment de la rédaction (Playwright v1.49), il est indiqué :

Métadonnées qui seront mises directement dans le rapport de test sérialisé au format JSON

Mais il y a un hic : l'ajout de cette configuration n'affichera aucune métadonnée dans le rapport. Si vous utilisez TypeScript, vous verrez également une erreur pour l'exemple fourni :

Le type « chaîne » n'est pas attribuable au type « Métadonnées ».

Clairement, la documentation est obsolète, mais les métadonnées dans les rapports sont bel et bien possibles.

La vraie configuration des métadonnées

Après avoir plongé dans le code source de Playwright, j'ai découvert les champs réels pris en charge par le rapport HTML :

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;
};

Seuls ces champs peuvent être affichés. Configurons-les dans 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(),
  },
});

Après l'exécution des tests, l'en-tête du rapport HTML affiche magnifiquement ces métadonnées.

Automatisation du remplissage des métadonnées

Remplir manuellement les champs de métadonnées n'est pas pratique, en particulier dans les environnements dynamiques tels que les pipelines CI/CD. L'automatisation de ce processus garantit des métadonnées précises et cohérentes sans effort manuel.

Forfaits tiers

Pour automatiser le processus, vous pouvez utiliser n'importe quel package tiers qui extrait les informations de validation Git. C'est une approche simple, passons à la deuxième option qui est plus intéressante.

Tirer parti du système de plugins cachés de Playwright

L'une des découvertes les plus intrigantes de Playwright est son système de plugins cachés. Bien qu'il ne soit pas officiellement documenté, il fournit un moyen d'étendre les capacités de Playwright grâce à des plugins personnalisés.

J'ai eu cette idée en regardant le test de Playwright lui-même. Playwright prend en charge un champ de configuration caché "@playwright/test", dans lequel vous pouvez définir des plugins.

Voici un exemple d'activation du plugin gitCommitInfo :

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

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

Que fait le plugin gitCommitInfo ?

Ce plugin extrait les détails du commit Git et remplit les champs de métadonnées dans le rapport HTML, notamment :

• Commettre le hachage
• Message de validation
• Nom et email de l'auteur
• Horodatage

De plus, lorsqu'il est exécuté dans des environnements CI/CD, le plugin peut remplir automatiquement les champs à l'aide de variables d'environnement standard telles que GITHUB_SHA ou CI_COMMIT_SHA.

Après avoir activé le plugin et exécuté les tests, j'ai le rapport suivant avec des métadonnées automatiquement remplies :

Autres plugins

J'étais curieux, existe-t-il d'autres plugins cachés dans Playwright ?
Dans le répertoire des plugins, il n'y a qu'un seul plugin supplémentaire - webServerPlugin. Il permet de démarrer et d'arrêter le serveur Web intégré lors de l'exécution de tests. En fait, lorsque vous définissez l'option config.webServer, ce plugin est utilisé sous le capot. Ainsi, le système de plugins est utilisé en interne dans Playwright, bien qu'il ne soit pas documenté pour un usage public.

Le système de plugins a été introduit dans les versions antérieures de Playwright, mais était caché à un moment donné. Malheureusement, il n'est pas prévu de l'exposer pour l'instant.

Utilisation d'une fonction personnalisée pour les métadonnées

Si vous préférez remplir automatiquement les métadonnées sans recourir à des plugins, vous pouvez le faire avec une fonction personnalisée. J'ai adapté la fonction gitStatusFromCLI() du plugin gitCommitInfo, la rendant utilisable indépendamment :

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

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

Utilisation de la fonction pour renseigner les métadonnées dans la config Playwright :

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;
};

Après avoir exécuté les tests, j'ai le même rapport HTML avec des métadonnées remplies :

Cette approche vous donne un contrôle total sur l'automatisation des métadonnées sans dépendre des fonctionnalités internes de Playwright.

Optimisation pour les tests parallèles

Tout semble bien, mais il y a un problème de performances avec le code ci-dessus. Pouvez-vous deviner quel est le problème ?

Playwright exécute des tests chez les travailleurs. Lorsque chaque travailleur démarre, il importe la configuration Playwright. Si la configuration de Playwright effectue une opération lourde (comme récupérer des données Git), cela ralentira le travailleur. De plus, cela n’a aucun sens d’exécuter la commande plusieurs fois, car elle renverra le même résultat.

Vous pouvez l'optimiser en exécutant la fonction de métadonnées uniquement dans le travailleur principal. Le travailleur principal peut être détecté par la variable d'environnement TEST_WORKER_INDEX vide :

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(),
  },
});

Cela garantit que les métadonnées sont remplies efficacement sans affecter les performances.

---

Conclusion

L'ajout de métadonnées aux rapports HTML Playwright est possible, mais pas bien documenté. Vous pouvez configurer manuellement les métadonnées, exploiter le système de plugins cachés ou mettre en œuvre une solution personnalisée.

Points clés à retenir :

• Les champs de métadonnées sont limités à des clés spécifiques (revision.id, ci.link, etc.).
• Automatisez les métadonnées avec les plugins cachés ou les scripts personnalisés de Playwright.
• Optimisez les tests parallèles en exécutant la logique des métadonnées uniquement dans le travailleur principal.

Sur la base de la recherche pour l'article, j'ai ouvert une pull-request vers le dépôt Playwright, proposant des améliorations de la documentation pour le champ de métadonnées.

Avez-vous essayé d'ajouter des métadonnées aux rapports Playwright ? Partagez votre expérience ou vos défis dans les commentaires !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!