Regressão visual (screenshot diff)

Um monitor HTTP clássico diz "o servidor responde 200 OK", mas não sabe que o ficheiro CSS principal não carregou e que o site aparece partido. O controlo visual (em inglês visual regression) captura uma imagem da página e compara-a com uma imagem de referência (baseline) - deteta alterações visuais mesmo quando o servidor diz que está tudo bem.

O controlo visual está disponível nos planos Pro e Business.

Como funciona

1. Ao ativar o controlo visual pela primeira vez, é capturada uma imagem de referência (baseline) - a referência com a qual se compara mais tarde.
2. Em cada verificação seguinte capturamos uma nova imagem e comparamo-la com a baseline pixel a pixel.
3. Se a diferença ultrapassar o limite configurado (5 % por predefinição), o monitor é marcado como alterado e recebe um alerta.
4. No detalhe do monitor vê a baseline e a imagem atual lado a lado, com as áreas diferentes destacadas.

Quando usar

• Após implementar uma nova versão do site - deteta automaticamente tipos de letra, CSS ou layout partidos
• Para páginas de destino de marketing - para saber que a etiqueta GA e outros elementos não saíram do lugar
• Para lojas online - verificar se o botão "Adicionar ao carrinho" continua visível
• Para páginas de estado - para saber que a sua própria página de estado aparece corretamente

Configuração

1. Ao criar um monitor, selecione o tipo Controlo visual - a primeira imagem é guardada automaticamente como baseline
2. No detalhe do monitor, na secção Controlo visual, vê a imagem de referência, a imagem atual e as diferenças destacadas
3. O limite de alteração define-se com o controlo deslizante Limite de alteração visual (de 0,5 a 30 %, 5 % por predefinição)
4. Após cada implementação de uma nova versão, atualize a baseline com o botão Definir a atual como referência

Cuidado com os falsos alarmes

• Data e hora na página - cada verificação apresenta-as de forma diferente. Após implementar uma alteração destas, atualize sempre a baseline.
• Anúncios e banners - rodam entre as imagens e causam muitas vezes um falso alarme. O controlo visual funciona melhor em páginas sem anúncios.
• Animações - a primeira e a imagem seguinte podem diferir. O controlo visual espera 1,5 segundos após o carregamento para que a animação estabilize.