Teste de regressão visual

Teste de regressão visual é um método de teste automatizado que identifica mudanças não intencionais na aparência de uma interface. Ele captura telas de páginas ou componentes, compara-as com imagens de linha de base aprovadas e sinaliza qualquer diferença acima de um limite definido para revisão.

Testes funcionais verificam se um botão funciona. Testes visuais verificam se ele continua correto: posição, cor, tamanho, fonte e espaçamento. Uma mudança de CSS em um arquivo compartilhado pode deslocar layouts em muitas páginas, e os testes visuais tornam esses efeitos colaterais visíveis antes do lançamento. As equipes os executam em integração contínua, muitas vezes com Playwright, plugins baseados em Cypress ou serviços dedicados de teste visual.

Como o teste de regressão visual funciona

1. Renderiza cada página ou componente em um navegador controlado, em tamanhos de viewport fixos.
2. Captura as telas e as armazena como linhas de base depois da revisão.
3. A cada mudança, captura de novo nas mesmas condições.
4. Compara as imagens novas com as linhas de base e gera imagens de diferença.
5. Um revisor aceita as mudanças intencionais, que se tornam novas linhas de base, ou corrige os bugs.

Onde o teste de regressão visual é usado

• Sistemas de design e bibliotecas de componentes.
• Sites institucionais com muitos modelos.
• Aplicações web com atualizações frequentes de CSS ou de dependências.
• Verificações entre navegadores em Chromium, Firefox e WebKit.

Diferença de pixels ou diferença perceptual

Uma diferença de pixels compara os valores de cor em cada posição e conta as divergências. Ela é exata, mas sensível ao antisserrilhamento e à renderização de fontes. Uma diferença perceptual, como uma comparação baseada em SSIM, mede mudanças estruturais e de contraste da forma como um espectador as perceberia, o que reduz alarmes falsos. Muitas ferramentas combinam a diferença de pixels com uma tolerância e regiões mascaradas.

Erros comuns

• Gerar as linhas de base em um sistema operacional e fazer as comparações em outro, o que muda a renderização das fontes.
• Deixar datas, anúncios ou animações na área capturada.
• Aceitar diferenças sem olhar, o que transforma bugs em linhas de base.
• Testar apenas um tamanho de viewport.

Repetindo as mesmas capturas o tempo todo?

Para verificações visuais manuais sem uma suíte de testes, o Website Capture do Temposhot captura uma lista de URLs em tamanhos de dispositivo fixos, e a Compare Images destaca as diferenças entre duas capturas. Veja automação de capturas de tela de sites.

Perguntas frequentes

O teste de regressão visual substitui os testes funcionais?

Não. Ele verifica a aparência. Os testes funcionais continuam verificando o comportamento.

Como reduzo os falsos positivos?

Congele o conteúdo dinâmico, use o mesmo ambiente em todas as execuções e mascare as regiões que mudam de propósito.

Fontes

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

Recursos relacionados

• Comparar imagens: compara duas capturas no navegador.
• Opções do Website Capture: configurações de dispositivo e espera.
• Execuções e resultados: revisão de uma execução de captura.