Rapports Allure pour Playwright: Configuration de Rapports de Tests Enrichis

Allure Reports ajoute des rapports détaillés étape par étape, des captures d'écran et traces intégrées, des graphiques de tendance sur plusieurs lancements, et une catégorisation des échecs par type.

Ce qu'Allure apporte

Suites de tests organisées par fichier, bloc describe et nom de test
Timeline montrant l'exécution parallèle des tests
Détail étape par étape de ce qui s'est passé dans chaque test
Pièces jointes : captures d'écran, vidéos, logs console directement dans le rapport
Tendances : taux de réussite/échec sur plusieurs lancements
Informations d'environnement : navigateur, OS, version de l'application testée
Catégories : regrouper les échecs par type (bugs produit, bugs de test, flakiness)

Installation

# Installer l'adaptateur Allure Playwright
npm install -D allure-playwright

# Installer Allure CLI pour générer et ouvrir les rapports
npm install -D allure-commandline

Ou installer Allure CLI globalement :

npm install -g allure-commandline

Configuration

Ajouter Allure comme reporter dans playwright.config.ts :

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

export default defineConfig({
  reporter: [
    ['list'],               // Sortie console pendant le lancement
    ['allure-playwright'],  // Génération du rapport Allure
  ],
  
  // Optionnel : configurer Allure spécifiquement
  // reporter: [
  //   ['allure-playwright', {
  //     detail: true,
  //     outputFolder: 'allure-results',
  //     suiteTitle: false,
  //   }],
  // ],
});

Le reporter écrit les résultats bruts dans allure-results/ pendant l'exécution. Le rapport HTML est ensuite généré à partir de ces résultats.

Lancer et consulter les rapports

# Lancer les tests (écrit dans allure-results/)
npx playwright test

# Générer le rapport HTML
npx allure generate allure-results --clean -o allure-report

# Ouvrir dans le navigateur
npx allure open allure-report

Ou combiner génération et ouverture :

npx allure generate allure-results --clean && npx allure open allure-report

Ajouter dans package.json pour simplifier :

{
  "scripts": {
    "test": "npx playwright test",
    "report": "npx allure generate allure-results --clean -o allure-report && npx allure open allure-report"
  }
}

Puis : npm test && npm run report

Ajouter des étapes aux tests

Allure peut afficher un détail étape par étape si vous annotez votre code :

import { test, expect } from '@playwright/test';
import { allure } from 'allure-playwright';

test('connexion réussie', async ({ page }) => {
  await allure.step('Naviguer vers la page de connexion', async () => {
    await page.goto('/login');
  });
  
  await allure.step('Saisir les identifiants', async () => {
    await page.fill('[data-testid="email"]', 'user@test.com');
    await page.fill('[data-testid="password"]', 'ValidPass1');
  });
  
  await allure.step('Soumettre le formulaire de connexion', async () => {
    await page.click('[data-testid="submit"]');
  });
  
  await allure.step('Vérifier la redirection vers le tableau de bord', async () => {
    await expect(page).toHaveURL('/dashboard');
    await expect(page.getByTestId('welcome')).toBeVisible();
  });
});

Dans le rapport Allure, chaque étape s'affiche séparément avec son statut réussi/échoué.

Ajouter des métadonnées

Annotez les tests avec des métadonnées pour une meilleure organisation et filtrage :

test('paiement avec carte valide', async ({ page }) => {
  // Labels pour filtrer et regrouper
  allure.label('feature', 'Checkout');
  allure.label('story', 'Paiement par carte de crédit');
  allure.severity('critical');  // 'blocker' | 'critical' | 'normal' | 'minor' | 'trivial'
  allure.owner('qa-team');
  
  // Lien vers les tickets et cas de test
  allure.issue('PROJ-123', 'https://jira.mycompany.com/PROJ-123');
  allure.tmsLink('TC-456', 'https://testrail.mycompany.com/TC-456');
  
  // Description
  allure.description('Vérifier que la carte de test Stripe valide finalise l\'achat');
  
  // Tags
  allure.tag('smoke');
  allure.tag('payment');
  
  // ... code de test
});

Joindre des captures d'écran et fichiers

import { allure } from 'allure-playwright';
import * as fs from 'fs';

test('vérifie la mise en page', async ({ page }) => {
  await page.goto('/dashboard');
  
  // Joindre une capture d'écran manuellement
  const screenshot = await page.screenshot();
  await allure.attachment('Capture du tableau de bord', screenshot, 'image/png');
  
  // Joindre un fichier texte
  const logContent = 'Test démarré à : ' + new Date().toISOString();
  await allure.attachment('Log de test', Buffer.from(logContent), 'text/plain');
  
  // Joindre des données JSON
  const apiResponse = { status: 'ok', users: 42 };
  await allure.attachment(
    'Réponse API',
    Buffer.from(JSON.stringify(apiResponse, null, 2)),
    'application/json'
  );
});

Les captures d'écran en cas d'échec sont jointes automatiquement si vous les configurez dans playwright.config.ts :

use: {
  screenshot: 'only-on-failure',
  video: 'retain-on-failure',
}

Informations d'environnement

Ajoutez des détails d'environnement pour que le rapport documente ce qui a été testé :

// Dans playwright.config.ts ou global setup
// Crée un fichier allure-results/environment.properties

// global-setup.ts
import * as fs from 'fs';
import * as path from 'path';

export default async function globalSetup() {
  const envProps = [
    `BASE_URL=${process.env.BASE_URL || 'http://localhost:3000'}`,
    `ENV=${process.env.TEST_ENV || 'local'}`,
    `BROWSER=chromium`,
    `APP_VERSION=${process.env.APP_VERSION || 'unknown'}`,
  ].join('\n');
  
  fs.mkdirSync('allure-results', { recursive: true });
  fs.writeFileSync(path.join('allure-results', 'environment.properties'), envProps);
}

Ces informations apparaissent dans la section Environnement du rapport Allure.

Configuration des catégories

Les catégories regroupent les échecs de tests par type. Créez allure-results/categories.json :

[
  {
    "name": "Bugs produit",
    "messageRegex": ".*Expected.*",
    "matchedStatuses": ["failed"]
  },
  {
    "name": "Problèmes d'infrastructure de test",
    "messageRegex": ".*net::ERR.*|.*Navigation timeout.*|.*Connection refused.*",
    "matchedStatuses": ["failed", "broken"]
  },
  {
    "name": "Tests instables",
    "matchedStatuses": ["flaky"]
  }
]

Allure catégorise automatiquement les échecs selon les patterns de messages d'erreur.

Intégration CI/CD

GitHub Actions

- name: Lancer les tests Playwright
  run: npx playwright test

- name: Générer le rapport Allure
  if: always()
  run: npx allure generate allure-results --clean -o allure-report

- name: Publier le rapport Allure
  uses: actions/upload-artifact@v4
  if: always()
  with:
    name: allure-report
    path: allure-report/
    retention-days: 30

- name: Publier les résultats bruts (pour les tendances)
  uses: actions/upload-artifact@v4
  if: always()
  with:
    name: allure-results
    path: allure-results/

Allure TestOps (version cloud)

Pour un historique de tendances persistant sur plusieurs lancements CI, Allure TestOps (service payant) centralise les résultats. Alternative gratuite : télécharger les artefacts allure-results des lancements précédents et les inclure dans la commande allure generate suivante.

Rapport Playwright vs rapport Allure

| Fonctionnalité | Playwright HTML | Allure |

|----------------|----------------|--------|

| Configuration requise | Aucune | Installation + étape de génération |

| Détail des étapes | Non | Oui (avec annotations) |

| Historique des tendances | Non | Oui |

| Catégories | Non | Oui (configurable) |

| Liens vers outils externes | Non | Oui (Jira, TestRail) |

| Idéal pour | Utilisation quotidienne rapide | Rapports aux parties prenantes, historique CI |

Utilisez le rapport intégré de Playwright en local pour un feedback rapide. Utilisez Allure en CI pour l'historique persistant et les rapports aux parties prenantes.

Récapitulatif

# Installation
npm install -D allure-playwright allure-commandline

# Configuration dans playwright.config.ts
reporter: [['allure-playwright']]

# Lancer -> générer -> consulter
npx playwright test
npx allure generate allure-results --clean
npx allure open allure-report

Les fonctionnalités à utiliser en priorité :

allure.step() pour un détail de test lisible
allure.severity() et labels pour le filtrage
allure.issue() pour lier les échecs au bug tracker
Les propriétés d'environnement pour documenter ce qui a été testé

Allure prend tout son sens quand vous partagez les résultats avec des développeurs et des chefs de produit qui ont besoin de comprendre ce qui a échoué et pourquoi. Le format visuel communique bien plus qu'une liste de noms de tests.