Inspetor de regressão visual do Storybook
Envie os PNGs baseline e latest do Loki, destaque diferenças visuais no navegador e exporte um relatório em heatmap.
Selecione os arquivos PNG de baseline e latest gerados pelo Loki. Descompacte o relatório e escolha capturas correspondentes.
Cor de destaque
Visão geral
Inspecione capturas de regressão visual do Loki direto no navegador. Destaque diffs, revise métricas e exporte um heatmap — sem CLI.
Como usar
- Descompacte a execução do Loki e envie os PNGs correspondentes de baseline/latest.
- Ajuste o limite de diff e a cor de destaque para separar sinal de ruído.
- Revise o heatmap, copie os números resumidos e baixe o PNG anotado para discussões de feedback.
Casos de uso
- Aprovar diffs de regressão visual do Storybook antes de fazer merge em pull requests.
- Compartilhar heatmaps com designers para confirmar mudanças de UI intencionais.
- Auditar falhas do Loki rapidamente em máquinas sem a ferramenta completa.
Dicas e conhecimento
- Capture baseline e latest com o mesmo tamanho de viewport e device pixel ratio.
- Estabilize timestamps ou dados dinâmicos nas stories para reduzir falsos positivos.
- Se as dimensões divergirem, recapture as screenshots para alinhá-las antes da aprovação.