20 casos de teste

Mudanças Sutis

As regressões visuais mais difíceis de diagnosticar são as que passam abaixo do limiar de percepção consciente: um estado hover que não aparece mais, um sublinhado de link que sumiu no corpo do texto, uma scrollbar cujos estilos personalizados foram sobrescritos pela renderização padrão do navegador, ou uma mudança de antialiasing que torna toda a tipografia sutilmente mais grossa no macOS. Ninguém levanta a mão para sinalizar esse tipo de problema, mas a experiência do usuário se degrada — o site parece "menos caprichado", a confiança cai, a taxa de cliques diminui sem motivo aparente. Em interfaces de negócio, esses drifts se acumulam sprint após sprint e acabam erodindo a coerência visual do design system a ponto de exigir um redesign completo. As causas costumam ser resets CSS introduzidos para resolver um caso preciso, mudanças de -webkit-font-smoothing, modificações de estilos globais de links nas zonas de conteúdo editorial, ou conflitos entre folhas de estilos que carregam em uma ordem diferente em produção e em staging. A detecção humana desses desvios é por definição impossível de escalar, porque pressupõe uma memória visual perfeita das centenas de capturas de referência. O Delta-QA opera no nível do pixel e aplica uma análise perceptual calibrada para ignorar o ruído de renderização aceitável mas alertar sobre os desvios significativos mesmo quando são quase imperceptíveis ao olho. O diff de regressão visual evidencia as zonas afetadas, o que transforma uma regressão invisível em informação acionável e permite às equipes de QA estancar a deriva de acabamento antes que ela se torne visível aos usuários.

O que detectamos

1

Mudanças de cor quase idênticas

Detecta mudanças de cor tão pequenas quanto 1-2 valores RGB (ex. #666666 vs #626262), invisíveis a olho nu.

2

Diferenças de anti-aliasing

Captura variações de anti-aliasing de fontes e bordas que produzem diferentes padrões de suavizacao sub-pixel.

3

Renderização sub-pixel

Monitora posicionamento fracional de pixels e diferenças de renderização causadas por transforms.

4

Variações de suavizacao de fonte

Detecta mudanças em -webkit-font-smoothing e renderização de fontes que afetam a nitidez e percepção de peso.

Exemplo interativo

Veja exatamente o que o Delta-QA detecta. Compare as duas versões lado a lado.

Antes
Depois

Cenários reais

🎯

O hover que desaparece dos botões

Um desenvolvedor adiciona um reset CSS global que remove os estilos hover de links e botões. Ao passar o cursor, os botões não mudam mais de cor nem de sombra — ficam exatamente iguais ao estado de repouso. Os visitantes não recebem nenhum feedback visual de que é clicável. A taxa de cliques cai e ninguém entende por que. A mudança fazia parte de um grande refactoring CSS, ninguém verificou os estados hover. Delta-QA captura os elementos em estado hover e compara as capturas: os botões que não mudam mais de aparência ao passar o cursor se destacam imediatamente no diff.

⚠️

Os links que se fundem com o texto

Um desenvolvedor modifica os estilos globais de links e, como efeito colateral, os links dentro do corpo do texto perdem seu sublinhado e sua cor distinta. Agora parecem texto normal — mesma cor, mesmo estilo. Seus visitantes não sabem mais onde clicar nos seus artigos e páginas de conteúdo. O desenvolvedor verificou a navegação principal (que usa classes específicas), não os links dentro do conteúdo. Delta-QA compara as capturas e destaca os links que não se distinguem mais do texto — a ausência de sublinhado e cor distinta se destaca no diff.

💡

A scrollbar que muda de estilo

Uma mudança CSS sobrescreve os estilos personalizados da scrollbar. A barra de rolagem fina e elegante é substituída pela scrollbar padrão do navegador — grossa e cinza. O site perde seu acabamento e a área de conteúdo fica visualmente mais estreita. É o tipo de regressão que ninguém busca ativamente — você percebe vagamente sem identificar a causa. Delta-QA compara as capturas e destaca a mudança — a barra grossa substituindo o design personalizado se destaca na sobreposição.

💡

O antialiasing que muda

Um desenvolvedor introduz um novo CSS reset que muda -webkit-font-smoothing de antialiased para auto. No macOS, todo o texto do site parece mais grosso e menos nítido — como se alguém tivesse desfocado levemente a tipografia. Seus usuários Mac percebem o site como "menos caprichado" sem conseguir identificar o motivo. No staging passou porque o ambiente de teste rodava em Linux com uma renderização diferente. Delta-QA compara as capturas e detecta a mudança de renderização — os caracteres mais grossos e menos nítidos se destacam na sobreposição.

Pronto para detectar toda regressão visual?

Baixe o Delta-QA e comece a detectar mudanças CSS nas suas páginas web — sem código.