Relatórios de Testes Playwright: HTML Integrado vs Allure

O reporter HTML do Playwright anexa screenshots e traces a cada falha sem configuração nenhuma, mas gera um relatório standalone novo a cada execução sem histórico. O Allure adiciona gráficos de tendência entre execuções, detalhamento de steps por teste e filtragem por severidade, mas exige um passo separado de geração após os testes terminarem.

O reporter HTML integrado

O Playwright já vem com um reporter HTML que não precisa de configuração nenhuma. Para ativar:

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

Após uma execução de teste, abra playwright-report/index.html. Você tem:

• Resumo de testes passados, falhados, pulados e flaky
• Hierarquia completa de testes (arquivo > describe > teste)
• Duração de cada teste
• Mensagens de erro com stack traces
• Screenshots e traces anexados inline para testes com falha
• Filtro por status (clique em "Failed" para ver só as falhas)

A opção open: 'never' evita que o reporter abra um browser automaticamente após cada execução, o que é útil localmente mas indesejável no CI.

Para CI, faça upload da pasta do relatório como artifact:

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

O if: always() garante que o artifact seja enviado mesmo quando os testes falham (que é exatamente quando você precisa dele).

Rodando múltiplos reporters

Você pode rodar mais de um reporter ao mesmo tempo:

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

No CI, list + HTML + JUnit é uma combinação comum: list para visibilidade nos logs, HTML para humanos, JUnit para as ferramentas de CI.

Allure reporter

O reporter HTML integrado é suficiente para muitos casos. O Allure é mais completo: dá gráficos de tendência entre execuções, filtragem por severidade, histórico de testes e uma UI mais elaborada. Exige mais setup.

Instalação

npm install -D allure-playwright allure-commandline

Configuração

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

Gerar e abrir o relatório

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

O primeiro comando gera o HTML a partir dos resultados brutos. O segundo abre no browser. No CI, gere o relatório em um passo separado após os testes rodarem.

Anotações do Allure

O Allure fica poderoso quando você anota seus testes:

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

test('usuário consegue fazer um pedido', async ({ page }) => {
  allure.label('severity', 'critical');
  allure.story('Finalização de pedido');
  allure.description('Verifica o fluxo de pedido de ponta a ponta, do carrinho à confirmação.');

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

  await allure.step('Adicionar ao carrinho', async () => {
    await page.getByRole('button', { name: 'Add to cart' }).click();
  });

  await allure.step('Concluir o checkout', async () => {
    await page.getByRole('link', { name: 'Checkout' }).click();
    // ...
  });
});

Os steps aparecem como seções colapsáveis no relatório: você vê exatamente qual step falhou, não só o nome do teste.

Allure no GitHub Actions

- name: Rodar testes
  run: npx playwright test

- name: Gerar relatório Allure
  if: always()
  run: npx allure generate allure-results --clean -o allure-report

- name: Upload do relatório Allure
  if: always()
  uses: actions/upload-artifact@v4
  with:
    name: allure-report
    path: allure-report/
    retention-days: 30

Para hospedar o Allure de forma persistente com rastreamento de histórico, faça deploy no GitHub Pages ou use o Allure TestOps (serviço pago). A opção open source é hospedar o relatório no GitHub Pages via um workflow separado.

Escolhendo entre HTML e Allure

| Feature | Playwright HTML | Allure |

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

| Setup | Zero config | npm install + comando de geração |

| Integração com trace viewer | Nativa | Anexo manual |

| Histórico e tendências | Não | Sim |

| Anotações (severidade, story, steps) | Não | Sim |

| Tamanho do artifact no CI | Pequeno | Maior |

| Acesso do time | Download do artifact | Pode hospedar de forma persistente |

Use o reporter HTML integrado quando:

• Você trabalha sozinho ou com um time pequeno
• O projeto é novo e você ainda está estabelecendo as práticas de teste
• Você quer zero overhead de manutenção

Use o Allure quando:

• Você tem stakeholders que precisam ler relatórios mas não têm acesso ao GitHub
• Você quer acompanhar tendências de estabilidade dos testes ao longo do tempo
• Sua suite é grande o suficiente para o histórico por teste importar
• Você precisa de classificação por severidade para triagem de prioridade

Adicionando anotações de teste sem o Allure

Se quiser categorização leve sem o Allure, o Playwright tem anotações nativas:

test('checkout falha de forma elegante em erro de rede', {
  tag: '@regression',
  annotation: { type: 'issue', description: 'https://github.com/org/repo/issues/123' },
}, async ({ page }) => {
  // corpo do teste
});

As tags aparecem no reporter HTML e podem ser usadas para filtrar quais testes rodam:

npx playwright test --grep @regression

Para a maioria dos times que não precisam do Allure completo, isso já é suficiente.