Conceitos de testes de regressão visual

O teste de regressão visual (VRT) detecta automaticamente mudanças visuais não intencionais entre versões do código, comparando capturas de tela renderizadas pixel a pixel. Ele detecta regressões de CSS — mudanças na disposição, alterações de cor e espaçamento incorreto — que os testes unitários não detectam de forma alguma.

O VRT captura imagens de referência de componentes ou páginas e depois faz novas capturas após mudanças no código, comparando-as. As diferenças são destacadas em uma imagem de comparação. Os desenvolvedores analisam as diferenças e aprovam as mudanças intencionais ou corrigem as regressões não intencionais.

A comparação de pixels compara as imagens pixel a pixel — é sensível, mas tende a produzir falsos positivos causados por antisserrilhamento e diferenças na renderização de subpixels. Ferramentas de comparação estrutural (Applitools AI) comparam a intenção visual, em vez de pixels exatos, reduzindo os falsos positivos causados por variações na renderização de fontes.

As capturas de tela aprovadas se tornam a nova referência. Armazene as referências no controle de versões (Git LFS para imagens grandes) ou em um serviço dedicado na nuvem. Cada PR mostra as diferenças em relação à referência, e os mantenedores aprovam ou rejeitam as mudanças visuais como parte da revisão.

Os testes de VRT no nível do componente verificam componentes individuais da interface isoladamente (por meio do Storybook). Os testes de VRT no nível da página verificam páginas completas em um navegador real. Os testes de componentes são mais rápidos e específicos; os testes de página detectam problemas de disposição no nível da integração entre componentes.

Teste todos os estados visuais: padrão, passagem do cursor, foco, ativo, desativado, carregando, erro, vazio e completo. Os estados de passagem do cursor exigem simulação com JavaScript (page.hover() no Playwright). A ausência de cobertura de estados cria pontos cegos para regressões em estados interativos.

Renderize capturas de tela em vários navegadores (Chrome, Firefox, Safari) e áreas de visualização (celular, tablet e computador). Diferenças na renderização dos navegadores podem causar falsos positivos — use referências específicas para cada navegador e configure limiares de diferença que tolerem variações conhecidas de renderização.

A renderização de fontes varia sutilmente entre combinações de OS, navegador e GPU. Use ambientes consistentes de integração contínua (Docker + uma versão específica do Chrome) para eliminar falsos positivos causados pelo ambiente. Os serviços de VRT na nuvem cuidam automaticamente da consistência do ambiente.

Conteúdo dinâmico — marcas de tempo, avatares de usuários, anúncios e dados aleatórios — causa falsos positivos. Masque as regiões dinâmicas com uma sobreposição de cor sólida antes de capturar a tela. A maioria das ferramentas de VRT oferece suporte a seletores de elementos para mascaramento.

Execute o VRT na integração contínua a cada PR. Faça a compilação falhar quando forem detectadas diferenças visuais não aprovadas. Encaminhe as diferenças visuais para revisores de projeto, não apenas para a equipe de engenharia — mudanças visuais são uma questão de projeto tanto quanto de engenharia.

O VRT oferece o maior retorno sobre o investimento em bibliotecas de componentes e sistemas de projeto nos quais a consistência visual é uma característica do produto. Para páginas de marketing que mudam com frequência, o custo de manutenção das referências pode superar o valor de detectar regressões.

Por que os testes de regressão visual produzem falsos positivos devido a diferenças na renderização de fontes?

Os testes de regressão visual detectam regressões de CSS e de leiaute comparando capturas de tela entre versões do código. Um VRT eficaz exige ambientes consistentes, cobertura de estados, mascaramento de conteúdo dinâmico e um fluxo de revisão que encaminhe as diferenças aos revisores de projeto — tornando-o uma ferramenta colaborativa de qualidade, não apenas uma etapa automatizada.