1
Transicoes CSS
Captura o estado computado de transições CSS, detectando mudanças em duracao, função de timing e propriedades alvo.
15 casos de teste
Animações
Animações, transições e microinterações são a camada perceptiva que transforma uma interface funcional em interface viva: um menu que desliza, um botão que reage ao hover, um loader que tranquiliza durante uma chamada de rede. Quando essa camada quebra, a aplicação ainda funciona mas parece morta ou malfeita, e a confiança dos usuários se erode. Uma transição de 300ms removida por engano faz o conteúdo "pular" em vez de deslizar, e os elementos adjacentes acabam deslocados em posições diferentes da referência. Um hover que não é mais acionado porque um elemento transparente de tracking analítico foi sobreposto aos botões quebra todo o feedback visual da página. Um loader copiado de outro projeto introduz uma ruptura de identidade visual que destoa no meio de uma jornada crítica. Testar esses comportamentos com um humano é lento, pouco reproduzível e impossível de escalar quando se tem dezenas de telas. O Delta-QA trata essa categoria congelando as transições em um estado calculado estável no momento da captura de referência, depois comparando os snapshots às baselines. Os estados interativos como o hover também são capturados para validar que os botões mudam de aparência como esperado. O diff visual evidencia os deslocamentos provocados por uma transição removida, os loaders cujo estilo desviou, os indicadores de animação que não aparecem mais e os keyframes cuja renderização mudou entre duas versões. Essa abordagem permite às equipes de QA detectar uma regressão visual na camada de interação sem ter que filmar cada jornada manualmente.
O que detectamos
2
Animações keyframe
Congela @keyframes no quadro atual para comparar estados de animação entre versões.
3
Estados hover e interativos
Captura instantâneos visuais de estados :hover, :active e outros estados interativos para comparação.
4
Transform e origem
Detecta mudanças em valores translate, rotate, scale, skew e modificações de transform-origin.
Exemplo interativo
Veja exatamente o que o Delta-QA detecta. Compare as duas versões lado a lado.
Antes
Depois
Cenários reais
🎯
A transição que vira instantânea
Um desenvolvedor refatora os estilos e remove acidentalmente a transição de 300ms do menu dropdown. Sem transição, o menu empurra o conteúdo abaixo de uma vez só em vez de deslizar suavemente — a página "pula" visualmente. Consequência visível: os elementos abaixo do menu ficam deslocados em relação a versão de referência, porque o navegador não tem mais tempo de recalcular o layout gradualmente. E um refactoring CSS, ninguém pensou em retestar as interações visuais. Delta-QA compara as capturas do menu aberto e detecta os deslocamentos do conteúdo abaixo — o layout diferente se destaca no diff.
⚠️
O loader que muda de estilo
Um desenvolvedor copia os estilos de um loader de outro projeto para "harmonizar" os componentes. O novo loader é visualmente diferente: maior, com uma cor de destaque que não corresponde à marca, e um estilo de indicador diferente (pontilhado em vez de sólido). Gira, então funcionalmente funciona — a equipe achou "é um loader, tá bom". Delta-QA compara as capturas e destaca as diferenças de tamanho, cor e forma do loader — o componente que não se parece mais com a referência se destaca no diff.
💡
O hover que para de funcionar
Um desenvolvedor coloca um elemento transparente sobre os botões para gerenciar tracking analítico. Consequência: o hover não é mais acionado — o mouse passa sobre o elemento invisível, não sobre o botão. Visualmente, os botões ficam na cor padrão ao passar o cursor, o site parece "morto". A mudança era sobre tracking, não sobre botões — ninguém pensou em verificar o feedback visual do hover. Delta-QA captura o estado hover dos botões e compara as capturas: o botão que não muda mais de cor se destaca no diff.
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.