O Que É Teste de Regressão Visual?
O teste de regressão visual captura mudanças não intencionais na sua UI comparando capturas de tela renderizadas com uma imagem de baseline aprovada.
Testes em nível de código podem passar enquanto a interface parece quebrada: um layout deslocado, uma cor errada, um elemento sobreposto. O teste de regressão visual fecha essa lacuna. Ele renderiza a UI, captura uma tela e a compara pixel por pixel com uma baseline conhecida como boa, sinalizando qualquer diferença visual para que um humano aprove ou rejeite.
Como funciona
Uma captura de tela de baseline é feita e armazenada para cada página ou componente. Em execuções posteriores, a ferramenta renderiza a UI novamente e faz o diff da nova imagem contra a baseline. As diferenças são destacadas, e o revisor decide se a mudança é intencional (atualizar a baseline) ou uma regressão (corrigir o código).
O que ele captura que os testes de código deixam passar
- Deslocamentos de layout e elementos sobrepostos.
- Cores, fontes ou espaçamentos errados.
- Breakpoints responsivos quebrados.
- Regressões de mudanças em CSS ou no design-system.
Um exemplo rápido
Um teste visual renderiza um componente e afirma que ele corresponde à captura de tela de baseline armazenada.
await page.goto("/pricing");
await expect(page).toHaveScreenshot("pricing.png");Por que ele pode ser flaky
Comparações de pixel são sensíveis. Renderização de fontes, anti-aliasing, animações e diferenças de ambiente podem produzir diffs minúsculos que não são regressões reais. Mitigações incluem renderizar em um ambiente consistente, mascarar regiões dinâmicas e permitir um pequeno threshold de diff.
Teste de regressão visual no CI
Como a consistência de renderização importa, os testes visuais precisam de um ambiente estável e uniforme para manter as baselines válidas, e são propensos a flakes transitórios por questões de tempo. Rodá-los em navegadores headless em runners consistentes e isolados e reexecutar automaticamente falhas transitórias mantém os diffs significativos. A Latchkey fornece runners isolados e consistentes e reexecuções de flakes transitórios que se encaixam exatamente nisso.
Principais conclusões
- O teste de regressão visual faz o diff de capturas de tela da UI contra uma baseline.
- Ele captura bugs de layout, cor e espaçamento que os testes de código deixam passar.
- Um ambiente de renderização consistente é essencial para evitar diffs falsos.