Visual regression (comparação de screenshots)

5 min de leitura

O monitor HTTP clássico diz "o servidor responde 200", mas não sabe que o CSS principal não foi carregado e o web aparece quebrado. O visual regression faz um screenshot e o compara com o baseline - detecta mudanças visuais mesmo quando o servidor diz OK.

Como funciona

1. Ao habilitar o visual regression pela primeira vez, é feito um baseline screenshot (referência).
2. Em cada check seguinte, é feito um novo screenshot e comparado pixel-by-pixel com o baseline.
3. Se a diferença ultrapassar o limite (default 5%), o monitor é marcado como changed e você recebe um alerta.
4. No detalhe do monitor você vê o baseline e o screenshot atual lado a lado + overlay do diff.

Quando usar

• Após deploys - detecta automaticamente fontes quebradas, CSS, layout
• Para marketing landing pages - para você saber que a tag do GA não perdeu posição
• Para e-shops - verificação de que o botão "Adicionar ao carrinho" continua visível
• Para status pages - para saber que a sua status page está renderizando

Configuração

1. No detalhe do monitor vá para a aba Visual regression
2. Clique em Enable - o baseline é feito (10-30 segundos)
3. Opcionalmente configure o threshold (1-20%, default 5%)
4. Após o deploy atualize o baseline através de Refresh baseline

Atenção aos falsos positivos

• Data / hora na página - cada check as renderiza diferente. Ou ignore, ou configure um CSS selector mask.
• Reklamy / banners - rodam entre execuções. Faça mask do domínio do provedor de publicidade.
• Animações - primeiro frame vs. seguinte. O visual regression espera 2 s após o load para que a animação se estabilize.
• Cookie banner - sempre auto-accepted, mas às vezes permanece visível. Adicione uma CSS rule via user-config.