Comparação de capturas de tela

Comparação de capturas de tela é o processo de verificar duas capturas da mesma tela, página ou janela para encontrar diferenças. A comparação pode ser visual, com as imagens lado a lado, sobrepostas com um controle deslizante ou mescladas com opacidade parcial. Também pode ser calculada, com um software que gera uma imagem de diferença que destaca os pixels alterados, além de uma contagem ou porcentagem dos pixels que diferem.

Uma comparação confiável precisa de entradas correspondentes. As duas imagens devem ter as mesmas dimensões em pixels, o mesmo fator de escala e o mesmo recorte. Uma mudança no tamanho da janela, na escala Retina ou na posição de rolagem faz quase todos os pixels diferirem, mesmo quando o conteúdo é o mesmo.

Comparação manual ou automatizada

A comparação manual serve para poucas imagens e decisões de julgamento, como saber se um redesenho ficou mais legível. A comparação automatizada serve para muitas imagens e execuções repetidas: um script compara cada nova captura com uma linha de base armazenada e informa apenas as que mudaram além de um limite.

Onde a comparação de capturas de tela é usada

• Testes de regressão visual depois de mudanças no código.
• Verificação de mudanças de conteúdo na página de um concorrente ou na sua própria.
• Imagens de antes e depois para revisões de design e notas de versão.
• Confirmação de que um documento ou painel corresponde a uma versão anterior.

Como a diferença visual funciona

1. Alinha as duas imagens no mesmo tamanho.
2. Compara os valores de cor de cada pixel.
3. Ignora diferenças abaixo de uma tolerância, que absorve o ruído do antisserrilhamento.
4. Marca os pixels alterados em uma cor de destaque e informa o total.

Métodos perceptuais, como o SSIM, comparam estrutura e contraste em vez de valores exatos, o que reduz alarmes falsos causados por pequenas diferenças de renderização.

Erros comuns com comparação de capturas de tela

• Comparar imagens de tamanhos ou fatores de escala diferentes.
• Deixar relógios, anúncios, carrosséis ou animações no quadro.
• Fazer capturas com fontes instaladas diferentes ou com outra versão do navegador.
• Definir uma tolerância tão alta que mudanças reais passem despercebidas.

Repetindo as mesmas capturas o tempo todo?

O Website Capture do Temposhot mantém as configurações de Device, Area e Wait de cada URL, então execuções repetidas geram imagens comparáveis. Para regiões da tela, uma Custom Area salva mantém o mesmo retângulo. Veja opções de captura.

Perguntas frequentes

Qual é um bom limite de diferença?

Depende da página. Comece com um valor baixo, revise os alarmes falsos e mascare as regiões dinâmicas em vez de aumentar o limite.

Consigo comparar duas capturas de tela sem instalar nada?

Sim. A Compare Images destaca as diferenças no navegador.

Fontes

• Playwright visual comparisons
• Structural similarity index na Wikipédia

Recursos relacionados

• Comparar imagens: compara duas imagens localmente.
• Início rápido do Website Capture: captura conjuntos de páginas repetíveis.
• Fontes de captura: áreas personalizadas salvas.