1
Transicoes CSS
Captura o estado computado de transicoes CSS, detectando mudancas em duracao, funcao de timing e propriedades alvo.
15 casos de teste
Animacoes
Animacoes e transicoes dao vida as interfaces, mas tambem introduzem instabilidade visual. O Delta-QA congela transicoes em seu estado computado e captura valores de transform.
O que detectamos
2
Animacoes keyframe
Congela @keyframes no quadro atual para comparar estados de animacao entre versoes.
3
Estados hover e interativos
Captura instantaneos visuais de estados :hover, :active e outros estados interativos para comparacao.
4
Transform e origem
Detecta mudancas em valores translate, rotate, scale, skew e modificacoes 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 transicao que vira instantanea
Um desenvolvedor refatora os estilos e remove acidentalmente a transicao de 300ms do menu dropdown. Sem transicao, o menu empurra o conteudo abaixo de uma vez so em vez de deslizar suavemente — a pagina "pula" visualmente. Consequencia visivel: os elementos abaixo do menu ficam deslocados em relacao a versao de referencia, porque o navegador nao tem mais tempo de recalcular o layout gradualmente. E um refactoring CSS, ninguem pensou em retestar as interacoes visuais. Delta-QA compara as capturas do menu aberto e detecta os deslocamentos do conteudo 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 e visualmente diferente: maior, com uma cor de destaque que nao corresponde a marca, e um estilo de indicador diferente (pontilhado em vez de solido). Gira, entao funcionalmente funciona — a equipe achou "e um loader, ta bom". Delta-QA compara as capturas e destaca as diferencas de tamanho, cor e forma do loader — o componente que nao se parece mais com a referencia se destaca no diff.
💡
O hover que para de funcionar
Um desenvolvedor coloca um elemento transparente sobre os botoes para gerenciar tracking analitico. Consequencia: o hover nao e mais acionado — o mouse passa sobre o elemento invisivel, nao sobre o botao. Visualmente, os botoes ficam na cor padrao ao passar o cursor, o site parece "morto". A mudanca era sobre tracking, nao sobre botoes — ninguem pensou em verificar o feedback visual do hover. Delta-QA captura o estado hover dos botoes e compara as capturas: o botao que nao muda mais de cor se destaca no diff.
Pronto para detectar toda regressao visual?
Baixe o Delta-QA e comece a detectar mudancas CSS nas suas paginas web — sem codigo.