1
Widgets de dashboard
Valida a integridade visual de cards de dados, graficos, indicadores KPI e paineis de metricas.
35 casos de teste
Componentes Reais
Componentes reais combinam multiplas propriedades CSS em sistemas visuais complexos. Uma mudanca em uma propriedade pode se propagar por todo o componente. O Delta-QA testa padroes UI completos para capturar regressoes.
O que detectamos
2
Cards e-commerce
Testa cards de produto, exibicoes de preco, componentes de avaliacao e estilo de botoes de compra.
3
Quadros kanban
Monitora layouts de colunas, empilhamento de cards, alcas de arraste e indicadores de status.
4
Tabelas de precos
Valida cards de planos tarifarios, listas de comparacao, planos destacados e estilo de botoes CTA.
5
Barras de navegacao
Testa navegacao header, menus dropdown, estados hamburger mobile e indicadores de link ativo.
6
Tabelas de dados
Detecta mudancas em cabecalhos de tabela, alternancia de linhas, alinhamento de celulas e comportamento responsivo.
Exemplo interativo
Veja exatamente o que o Delta-QA detecta. Compare as duas versões lado a lado.
Antes
Depois
Cenários reais
🎯
O dropdown que abre atras da tabela
Um desenvolvedor adiciona overflow: hidden em uma tabela para corrigir um bug de scroll horizontal. Consequencia: o menu dropdown de acoes em cada linha abre mas fica cortado — so a metade superior e visivel, as opcoes "Excluir" e "Arquivar" estao cortadas. O desenvolvedor corrigiu seu bug de scroll, nao verificou se os menus dropdown ainda funcionavam visualmente. Delta-QA compara as capturas com o menu aberto e detecta que o dropdown esta cortado — a metade faltante se destaca no diff.
⚠️
O modal que nao centraliza mais
Um desenvolvedor modifica o posicionamento do body para um novo componente sticky. Efeito colateral: o modal de confirmacao se desloca para o canto superior esquerdo em vez de ficar centralizado. No celular, fica parcialmente fora da tela — seus visitantes nao veem o botao "Confirmar". A entrega era urgente, testaram o componente sticky mas nao os 5 modais do site. Delta-QA compara as capturas e destaca o deslocamento do modal — sua nova posicao descentralizada se destaca claramente na sobreposicao.
💡
O carrossel que mostra dois slides
Uma mudanca CSS altera a largura do container pai do carrossel de produtos. Em vez de mostrar um slide por vez, dois slides ficam parcialmente visiveis — o segundo esta cortado ao meio. Fica visualmente quebrado, seus clientes veem uma apresentacao desleixada. O desenvolvedor alterou o container por outro motivo, nem sabia que o carrossel dependia dele. Delta-QA compara as capturas e detecta o segundo slide aparecendo parcialmente — o conteudo cortado 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.