1
Toggle de display
Detecta quando elementos alternam entre valores de display (none, block, flex, grid, inline).
25 casos de teste
Visibilidade e Opacidade
Mudancas de visibilidade podem fazer conteudo aparecer ou desaparecer inesperadamente. O Delta-QA captura cada mudanca de estado de visibilidade.
O que detectamos
2
Propriedade visibility
Captura mudancas visibility:hidden onde elementos ficam invisiveis mas ainda ocupam espaco no layout.
3
Mudancas de opacidade
Monitora variacoes de opacidade de totalmente transparente (0) a totalmente opaco (1).
4
Reordenamento z-index
Detecta mudancas de contexto de empilhamento onde elementos se sobrepoem de forma diferente.
5
Overflow e recorte
Identifica mudancas de comportamento overflow (visible, hidden, scroll, auto) que podem ocultar ou revelar conteudo.
Exemplo interativo
Veja exatamente o que o Delta-QA detecta. Compare as duas versões lado a lado.
Antes
Depois
Cenários reais
🎯
O banner promocional que desaparece
Um desenvolvedor retrabalha o header e adiciona overflow: hidden no container pai. O banner promocional "-20% com o codigo SUMMER" ainda esta no codigo, mas visualmente esta cortado — invisivel na tela. Seus visitantes nao veem a promocao, voce perde vendas por dias. A equipe confiou no pipeline de testes — o banner existe no DOM, os testes passam em verde. Delta-QA compara as capturas e detecta o desaparecimento do banner — o espaco vazio no topo da pagina salta a vista imediatamente no diff.
⚠️
O z-index que esconde um botao
Um desenvolvedor integra um widget de chat com z-index de 9999. No celular, o widget se posiciona exatamente sobre o botao flutuante "Comprar" na parte inferior da tela. O botao ainda esta no codigo mas fica visualmente escondido atras do chat — seus clientes nao conseguem mais comprar. O testador verificou no desktop, nao no celular onde os elementos se sobrepoem. Delta-QA compara as capturas mobile e detecta que o botao "Comprar" esta coberto pelo widget — a area mascarada se destaca no diff.
💡
A opacidade que torna o texto ilegivel
Um desenvolvedor reduz a opacidade do overlay escuro sobre a hero image para "mostrar mais a foto". O texto branco fica sobre um fundo claro demais — torna-se praticamente ilegivel. Seus visitantes nao conseguem mais ler a mensagem principal da pagina inicial. A mudanca parecia cosmetica, o desenvolvedor mergeou achando que ficou melhor. Delta-QA compara as capturas e destaca o texto que ficou ilegivel — a perda de contraste entre texto e fundo se destaca claramente na sobreposicao.
Pronto para detectar toda regressao visual?
Baixe o Delta-QA e comece a detectar mudancas CSS nas suas paginas web — sem codigo.