Visual Test - Estrutura de Testes Visuais com Pixelmatch + Jimp

Este pacote fornece uma estrutura de testes visuais (visual regression testing) usando pixelmatch e jimp, onde são comparadas imagens base e atuais, gerando imagens de diferença e um relatório HTML profissional com status, porcentagem de diferença, sobreposição de imagens, filtros, expandir imagens e suporte a múltiplos formatos.

🛠️ Requisitos

• Node.js (v14 ou superior)
• npm

📦 Instalação

Via NPM

npm install visual-test-naldo

Execute com:

npx

npx visual-test-naldo

ou

npm

npm run visual-test

🧪 Funcionalidades

Comparação de Imagens

• Suporte a múltiplos formatos: .png, .jpg, .jpeg, .gif, .bmp, .tiff, .webp
• Comparação pixel a pixel com pixelmatch
• Geração de imagem de diferença
• Cálculo de porcentagem de diferença

Relatório HTML Profissional

• Tabela com status (passou/falhou)
• Gráfico de barras com porcentagem de diferença
• Visualização de imagens lado a lado
• Botão para sobrepor imagem base com diferença
• Expandir imagens ao clicar
• Filtros de status (todos, passaram, falharam)
• Exportação para PDF (via impressão)
• Layout moderno e responsivo

CLI Interativo

• Prompt para informar caminhos de baseline, current e output
• Validação de pastas
• Criação automática de pasta de saída

📁 Descrição dos Caminhos

• baseline: Pasta contendo as imagens base (padrão ou esperado), que servirão como referência para comparação.
• current: Pasta contendo as imagens atuais (novas ou em teste), que serão comparadas com as imagens base.
• output: Pasta onde serão salvas as imagens de diferença e o relatório HTML gerado.

⚠️ Importante:

• As imagens em baseline e current devem ter o mesmo nome para que a comparação funcione corretamente. Ex: img1.png em baseline será comparada com img1.png em current.