1
Propriedades Flexbox
Monitora flex-direction, justify-content, align-items, flex-wrap, gap e mudancas de ordem.
50 casos de teste
Layout
Mudancas de layout estao entre as regressoes visuais mais perturbadoras. Um elemento deslocado ou uma grade quebrada podem alterar completamente a experiencia do usuario. O Delta-QA analisa as relacoes espaciais entre elementos.
O que detectamos
2
Mudancas CSS Grid
Detecta modificacoes de grid-template, mudancas de dimensionamento e reatribuicoes de grid-area.
3
Posicao e empilhamento
Captura mudancas de posicao (static, relative, absolute, fixed, sticky) e seu impacto no posicionamento.
4
Margens e paddings
Rastreia mudancas de espacamento, incluindo cenarios de margin collapse que causam deslocamentos inesperados.
5
Modelo de caixa e dimensionamento
Detecta mudancas de width, height, restricoes min/max e box-sizing que afetam as dimensoes.
6
Float e clear
Identifica mudancas de layout baseadas em float e comportamento clearfix que podem causar refluxo.
Exemplo interativo
Veja exatamente o que o Delta-QA detecta. Compare as duas versões lado a lado.
Antes
Depois
Cenários reais
🎯
O padding que desloca tudo
Um desenvolvedor corrige um bug de alinhamento no formulario de cadastro e mexe no padding global dos inputs. Efeito colateral: o formulario de pagamento fica com campos maiores, e o botao "Pagar" desce abaixo do fold. No celular, e pior — o formulario transborda a tela. O QA verificou o formulario de cadastro (o que foi modificado), nao o de pagamento. Delta-QA compara as capturas de todas as paginas e destaca o deslocamento no formulario de pagamento — o botao "Pagar" que desaparece do viewport fica imediatamente visivel no diff.
⚠️
O flexbox que inverte a ordem
Um desenvolvedor refatora o CSS da pagina de precos e inverte acidentalmente a ordem de exibicao das ofertas. Os tres planos agora aparecem Enterprise, Pro, Gratis — da direita para a esquerda. Os visitantes veem a oferta mais cara primeiro, a ancoragem psicologica se inverte. A entrega era urgente, testaram o minimo: os tres planos estao la, o clique funciona, faz o deploy. Delta-QA compara as capturas e detecta que os blocos mudaram de posicao — a inversao e claramente visivel no diff.
💡
O margin collapse silencioso
Um desenvolvedor adiciona overflow: hidden em um container para resolver um bug de transbordamento. Consequencia inesperada: o mecanismo de colapso de margens CSS quebra e o espaco entre cada secao dobra de repente. A pagina cresce 200px, as secoes parecem desconectadas umas das outras. A equipe confiou no pipeline de testes automatizados que nao cobre o visual. Delta-QA compara as capturas e destaca o espacamento duplicado entre secoes — o deslocamento de todo o layout 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.