Informes Allure para Playwright: Configuración de Reportes Enriquecidos

El reporter HTML integrado de Playwright no tiene desglose paso a paso, no tiene historial de tendencias entre ejecuciones de CI, y no tiene forma de vincular fallos a un rastreador de bugs. Allure agrega las tres cosas a través del adaptador allure-playwright, que escribe resultados en bruto que luego compilas en un reporte interactivo con gráficos de tendencias y categorías de fallos. Esta guía cubre la instalación, la configuración en playwright.config.ts, la generación local de reportes y la integración con GitHub Actions.

Qué te da Allure

Suites de tests organizadas por archivo, bloque describe y nombre del test
Línea de tiempo que muestra la ejecución paralela de tests
Desglose paso a paso de lo que ocurrió en cada test
Adjuntos: capturas de pantalla, videos, logs de consola integrados en el reporte
Tendencias: tasas de aprobado/fallido a través de múltiples ejecuciones de tests
Información del entorno: qué navegador, OS y versión de la app se testeó
Categorías: agrupar fallos por tipo (bugs del producto, bugs del test, inestables)

Instalación

# Instalar el adaptador Allure para Playwright
npm install -D allure-playwright

# Instalar Allure CLI para generar y abrir reportes
npm install -D allure-commandline

O instalar Allure CLI globalmente:

npm install -g allure-commandline

Configuración

Agrega Allure como reporter en playwright.config.ts:

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

export default defineConfig({
  reporter: [
    ['list'],              // Output en consola durante la ejecución
    ['allure-playwright'], // Generación del reporte Allure
  ],

  // Opcional: configurar Allure específicamente
  // reporter: [
  //   ['allure-playwright', {
  //     detail: true,
  //     outputFolder: 'allure-results',
  //     suiteTitle: false,
  //   }],
  // ],
});

El reporter escribe los resultados en bruto en allure-results/ durante la ejecución de los tests. Luego generas el reporte HTML a partir de esos resultados.

Ejecutar y ver reportes

# Ejecutar tests (escribe en allure-results/)
npx playwright test

# Generar reporte HTML
npx allure generate allure-results --clean -o allure-report

# Abrir en el navegador
npx allure open allure-report

O combinar generar y abrir:

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

Agrega a package.json para mayor comodidad:

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

Luego: npm test && npm run report

Agregar pasos a los tests

Allure puede mostrar desglose paso a paso si anotas tu código:

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

test('login exitoso', async ({ page }) => {
  await allure.step('Navegar a la página de login', async () => {
    await page.goto('/login');
  });

  await allure.step('Ingresar credenciales', async () => {
    await page.fill('[data-testid="email"]', 'user@test.com');
    await page.fill('[data-testid="password"]', 'ValidPass1');
  });

  await allure.step('Enviar el formulario de login', async () => {
    await page.click('[data-testid="submit"]');
  });

  await allure.step('Verificar redirección al dashboard', async () => {
    await expect(page).toHaveURL('/dashboard');
    await expect(page.getByTestId('welcome')).toBeVisible();
  });
});

En el reporte Allure, cada paso se muestra por separado con su estado de aprobado/fallido.

Agregar metadatos

Anota los tests con metadatos para mejor organización y filtrado:

test('pago con tarjeta válida', async ({ page }) => {
  // Etiquetas para filtrar y agrupar
  allure.label('feature', 'Checkout');
  allure.label('story', 'Pago con tarjeta de crédito');
  allure.severity('critical');  // 'blocker' | 'critical' | 'normal' | 'minor' | 'trivial'
  allure.owner('qa-team');

  // Vincular a issues y casos de prueba
  allure.issue('PROJ-123', 'https://jira.miempresa.com/PROJ-123');
  allure.tmsLink('TC-456', 'https://testrail.miempresa.com/TC-456');

  // Descripción
  allure.description('Verificar que la tarjeta de prueba válida de Stripe completa la compra');

  // Tags
  allure.tag('smoke');
  allure.tag('payment');

  // ... código del test
});

Adjuntar capturas de pantalla y archivos

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

test('verifica el layout de la página', async ({ page }) => {
  await page.goto('/dashboard');

  // Adjuntar una captura de pantalla manualmente
  const screenshot = await page.screenshot();
  await allure.attachment('Captura del dashboard', screenshot, 'image/png');

  // Adjuntar un archivo de texto
  const logContent = 'Test iniciado en: ' + new Date().toISOString();
  await allure.attachment('Log del test', Buffer.from(logContent), 'text/plain');

  // Adjuntar datos JSON
  const apiResponse = { status: 'ok', users: 42 };
  await allure.attachment(
    'Respuesta de la API',
    Buffer.from(JSON.stringify(apiResponse, null, 2)),
    'application/json'
  );
});

Las capturas de pantalla al fallar se adjuntan automáticamente si las configuras en playwright.config.ts:

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

Información del entorno

Agrega detalles del entorno para que el reporte muestre qué se testeó:

// En playwright.config.ts o en el setup global
// Crear un archivo 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);
}

Esto aparece en la sección de Entorno del reporte Allure.

Configuración de categorías

Las categorías agrupan los fallos de tests por tipo. Crea allure-results/categories.json:

[
  {
    "name": "Bugs del producto",
    "messageRegex": ".*Expected.*",
    "matchedStatuses": ["failed"]
  },
  {
    "name": "Problemas de infraestructura de tests",
    "messageRegex": ".*net::ERR.*|.*Navigation timeout.*|.*Connection refused.*",
    "matchedStatuses": ["failed", "broken"]
  },
  {
    "name": "Tests inestables",
    "matchedStatuses": ["flaky"]
  }
]

Allure categoriza automáticamente los fallos según los patrones de mensajes de error.

Integración con CI/CD

GitHub Actions

- name: Ejecutar tests de Playwright
  run: npx playwright test

- name: Generar reporte Allure
  if: always()
  run: npx allure generate allure-results --clean -o allure-report

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

- name: Subir resultados en bruto (para datos de tendencias)
  uses: actions/upload-artifact@v4
  if: always()
  with:
    name: allure-results
    path: allure-results/

Allure TestOps (versión cloud)

Para historial de tendencias persistente entre ejecuciones de CI, Allure TestOps (servicio de pago) almacena los resultados de forma centralizada. Alternativa gratuita: descarga los artefactos de allure-results de ejecuciones anteriores e inclúyelos en el próximo comando allure generate.

Reporte de Playwright vs reporte Allure

| Funcionalidad | HTML de Playwright | Allure |

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

| Configuración requerida | Ninguna | Instalación + paso de generación |

| Desglose de pasos | No | Sí (con anotaciones) |

| Historial de tendencias | No | Sí |

| Categorías | No | Sí (configurable) |

| Vínculos a herramientas externas | No | Sí (Jira, TestRail) |

| Mejor para | Uso diario rápido | Reportes para stakeholders, historial de CI |

Usa el reporte integrado de Playwright localmente para feedback rápido. Usa Allure en CI para historial persistente y reportes a stakeholders.

Resumen

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

# Configurar en playwright.config.ts
reporter: [['allure-playwright']]

# Ejecutar → generar → ver
npx playwright test
npx allure generate allure-results --clean
npx allure open allure-report

Funcionalidades clave para usar:

allure.step() para desglose legible del test
allure.severity() y etiquetas para filtrado
allure.issue() para vincular fallos al rastreador de bugs
Propiedades del entorno para documentar qué se testeó

Allure es más valioso cuando compartes los resultados de los tests con desarrolladores y product managers que necesitan entender qué falló y por qué: el formato visual comunica más que una lista de nombres de tests.