Informes de Tests en Playwright: HTML Integrado vs Allure

El reporter HTML de Playwright adjunta capturas de pantalla y trazas a cada fallo sin configuración adicional, pero genera un reporte independiente por ejecución sin historial. Allure agrega gráficos de tendencias entre ejecuciones, desglose de pasos por test y filtros por severidad, pero requiere un paso adicional de generación después de que los tests terminan. Este artículo cubre la configuración de ambos reporters, las anotaciones que hacen que Allure valga el esfuerzo extra, la integración con GitHub Actions para cada uno, y los criterios para elegir entre ellos.

El reporter HTML integrado

Playwright incluye un reporter HTML que no requiere configuración. Para activarlo:

// playwright.config.ts
reporter: [['html', { open: 'never' }]],

Después de una ejecución, abre playwright-report/index.html. Obtienes:

• Un resumen de tests pasados, fallidos, omitidos y flaky
• La jerarquía completa de tests (archivo → describe → test)
• La duración de cada test
• Mensajes de error con stack traces
• Capturas de pantalla y trazas adjuntas para los tests fallidos
• Filtro por estado (haz clic en "Failed" para ver solo los fallos)

La opción open: 'never' evita que el reporter abra un navegador automáticamente después de cada ejecución, algo que quieres en local pero no en CI.

Para CI, sube la carpeta del reporte como artefacto:

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

El if: always() garantiza que el artefacto se suba incluso cuando los tests fallan, que es exactamente cuando lo necesitas.

Usar múltiples reporters

Puedes ejecutar más de un reporter al mismo tiempo:

reporter: [
  ['html', { open: 'never' }],
  ['list'],
  ['junit', { outputFile: 'results.xml' }],
],

En CI, la combinación list + HTML + JUnit es la más común: list para visibilidad en los logs, HTML para las personas, JUnit para las herramientas de CI.

Reporter de Allure

El reporter HTML integrado cumple su función. Allure ofrece más: gráficos de tendencias entre ejecuciones, filtros por severidad, historial de tests y una interfaz más completa. Requiere más configuración.

Instalación

npm install -D allure-playwright allure-commandline

Configuración

reporter: [
  ['allure-playwright'],
  ['list'],
],

Generar y abrir el reporte

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

El primer comando genera el HTML a partir de los resultados crudos. El segundo lo abre en un navegador. En CI, genera el reporte en un paso separado después de que los tests terminen.

Anotaciones de Allure

Allure cobra valor cuando anotas los tests:

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

test('el usuario puede completar un pedido', async ({ page }) => {
  allure.label('severity', 'critical');
  allure.story('Proceso de compra');
  allure.description('Verifica el flujo completo desde el carrito hasta la confirmación.');

  await allure.step('Navegar a la página del producto', async () => {
    await page.goto('/products/laptop');
  });

  await allure.step('Agregar al carrito', async () => {
    await page.getByRole('button', { name: 'Agregar al carrito' }).click();
  });

  await allure.step('Completar el pago', async () => {
    await page.getByRole('link', { name: 'Finalizar compra' }).click();
    // ...
  });
});

Los pasos aparecen como secciones desplegables en el reporte: ves exactamente en qué paso falló el test, no solo el nombre del test.

Allure en GitHub Actions

- name: Ejecutar tests
  run: npx playwright test

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

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

Para hosting persistente de Allure con seguimiento de historial, despliega en GitHub Pages o en Allure TestOps (su servicio pago). La opción open-source es alojar el reporte en GitHub Pages con un workflow separado.

Cuándo usar HTML y cuándo Allure

| Característica | Playwright HTML | Allure |

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

| Configuración | Sin configuración | npm install + comando generate |

| Integración con trace viewer | Integrada | Adjunto manual |

| Historial y tendencias | No | Sí |

| Anotaciones (severidad, historia, pasos) | No | Sí |

| Tamaño del artefacto en CI | Pequeño | Mayor |

| Acceso del equipo | Descargar artefacto | Se puede hospedar |

Usa el reporter HTML integrado cuando trabajas solo o con un equipo pequeño, cuando el proyecto es nuevo y todavía estás estableciendo las prácticas de testing, o cuando quieres cero sobrecarga de mantenimiento.

Usa Allure cuando:

• Tienes stakeholders que necesitan leer reportes pero no tienen acceso a GitHub
• Quieres seguir tendencias de estabilidad de tests a lo largo del tiempo
• Tu suite es lo suficientemente grande como para que el historial por test sea relevante
• Necesitas clasificación por severidad para el triaje de prioridades

Anotaciones sin Allure

Si quieres categorización ligera sin Allure, Playwright tiene anotaciones integradas:

test('el checkout falla correctamente ante un error de red', {
  tag: '@regression',
  annotation: { type: 'issue', description: 'https://github.com/org/repo/issues/123' },
}, async ({ page }) => {
  // cuerpo del test
});

Los tags aparecen en el reporter HTML y se pueden usar para filtrar qué tests se ejecutan:

npx playwright test --grep @regression

Para la mayoría de los equipos que no necesitan reportes completos de Allure, esto es suficiente.