O que muda entre duas capturas

• Data e hora“há 3 minutos”, “atualizado hoje”, relógio no cabeçalho.
• Contadoresvisitas, carrinho, notificações — qualquer número que cresce.
• Aleatoriedadeordem de lista, avatar, cor de destaque, “recomendados”.
• Tempo de renderfonte web chegando depois, imagem carregando, animação em curso.
• Dados vivospreço, estoque, review — o banco de produção muda no meio do teste.

A ordem que funciona

1. Congele o dado antes de congelar o pixelFixe a fonte de dados do teste (fixture, seed, rota mockada). Captura determinística sobre dado vivo é sorte.
2. Espere o estado final, não o loadEspere um seletor que só existe depois do render completo. “networkidle” não garante fonte carregada nem animação terminada.
3. Máscara para o que é legitimamente dinâmicoRelógio, avatar, contador: máscara declarada, com motivo escrito. Máscara ampla demais transforma o teste em carimbo.
4. Mesmo ambiente nas duas pontasFonte, viewport, device pixel ratio e sistema diferentes produzem diffs que não são bugs. Compare captura com captura, não com memória.

Quando o gate é o problema

Um gate de layout que acusa colisão de texto dentro de um <a> que está dentro do <p> está reportando o par pai/filho, não um defeito. Antes de “consertar” o CSS, meça o fato: scrollWidth == clientWidth no viewport alvo. Se bate, o achado é do gate.

Regra: todo falso positivo que você aceita sem medir vira um “conserto” que quebra o layout real.

Antes de subir

Rode o gate duas vezes seguidas na mesma máquina. Se as duas execuções discordam, o problema é determinismo de captura — e nenhum limiar de tolerância resolve isso sem mascarar bug real.

Ver a skill Visual Regression Gates Ver todas as skills

Quer isso montado no seu projeto? Setup guiado a partir de R$ 1.500, com o primeiro ciclo rodado junto.