Como Funciona a Comparação de Screenshots: O Guia Completo
A comparação de screenshots é um processo automatizado em várias etapas — captura, normalização, alinhamento, comparação algorítmica e pontuação — que determina se duas capturas de ecrã da mesma página web são visualmente idênticas ou se existem diferenças significativas.
Talvez já use uma ferramenta de teste visual. Ou está a considerar adotar uma. Em ambos os casos, provavelmente já se perguntou: "Mas concretamente, como funciona?"
A resposta é mais complexa do que parece. Não é simplesmente "pegar duas imagens e ver se são iguais". Cinco etapas distintas, cada uma com as suas subtilezas.
Etapa 1: A captura
A captura de ecrã de uma página web é surpreendentemente variável. O mesmo site pode produzir capturas ligeiramente diferentes conforme o navegador, SO, renderização de fontes, aceleração GPU. A primeira responsabilidade é produzir capturas reprodutíveis. Conteúdo dinâmico deve ser gerido por exclusão de zonas ou espera de estabilização.
Etapa 2: A normalização
Antes de comparar, as imagens devem ser comparáveis. Mesmo espaço de cor, profundidade de bits, nível de compressão. Armadilha clássica: comparar PNG com JPEG.
Etapa 3: O alinhamento
O passo mais subestimado. Banner adicionado no topo? Todo o conteúdo desloca 50 pixels. Sem alinhamento, tudo é marcado como alterado. Bom alinhamento elimina 90% dos falsos positivos.
Etapa 4: A comparação — três filosofias
Comparação pixel por pixel
Precisa mas excessivamente sensível.
Comparação percetual (pHash)
Robusta contra micro-variações mas limitada em detalhe.
Comparação estrutural (SSIM)
A mais próxima da perceção humana. Compara luminância, contraste e estrutura.
Artigo detalhado: pHash, SSIM e pixel diff.
Etapa 5: Pontuação e decisão
Limiar demasiado estrito gera falsos positivos. Demasiado permissivo deixa passar regressões. As melhores ferramentas permitem limiares por página ou zona.
FAQ
Qual a diferença entre comparação pixel por pixel e percetual?
Pixel por pixel examina cada ponto. A percetual avalia similaridade global filtrando micro-variações.
Por que a minha ferramenta deteta diferenças em páginas que me parecem idênticas?
Micro-variações de renderização: anti-aliasing, sub-pixel, artefactos de compressão ou elementos dinâmicos.
Funciona com animações?
As ferramentas capturam estado estático. Zonas animadas devem ser excluídas.
Que limiar recomendam?
Páginas críticas: menos de 0.1%. Páginas de conteúdo: 0.5% a 1%.
Pode detetar mudanças subtis de cor?
Pixel diff sim. SSIM deteta mudanças perceptualmente significativas. pHash pode falhar mudanças subtis.
Conclusão
A comparação de screenshots é um problema aparentemente simples mas tecnicamente rico. Agora que sabe o que acontece nos bastidores, está melhor preparado para escolher e usar a sua ferramenta. Se quiser ver em ação sem instalar nada, a Delta-QA espera por si.