1
Estilo de campos de entrada
Detecta mudancas na aparencia de inputs: bordas, fundos, paddings e propriedades de fonte.
35 casos de teste
Formularios e Estados
Elementos de formulario sao pontos de contato criticos na interacao do usuario. Um estado de validacao quebrado ou um indicador de foco ausente podem gerar frustracao. O Delta-QA monitora cada estado visual relacionado a formularios.
O que detectamos
2
Checkbox e radio
Monitora o estilo personalizado de checkboxes e radio buttons, incluindo estados visuais marcado/desmarcado.
3
Estados de validacao
Captura mudancas no estilo de pseudo-classes :valid, :invalid, :required e mensagens de erro.
4
Indicadores de foco
Rastreia mudancas de estilo :focus e :focus-visible criticos para acessibilidade por teclado.
5
Estilo de placeholders
Detecta mudancas do pseudo-elemento ::placeholder em cor, opacidade e propriedades de fonte.
6
Estados de botoes
Monitora estados hover, active, disabled e padrao dos botoes para consistencia visual.
Exemplo interativo
Veja exatamente o que o Delta-QA detecta. Compare as duas versões lado a lado.
Antes
Depois
Cenários reais
🎯
O placeholder que esconde os erros
Um desenvolvedor modifica os estilos globais de textos de ajuda e, como efeito colateral, as mensagens de erro do formulario de cadastro passam de vermelho a cinza claro. Seus visitantes enviam um email invalido, veem um texto abaixo do campo... que nao conseguem ler porque e cinza claro sobre fundo branco. Acham que o site esta quebrado e saem. Ninguem tem tempo de verificar cada estado de erro de cada formulario a cada deploy. Delta-QA compara as capturas e destaca a mudanca de cor da mensagem — o texto que ficou quase invisivel se destaca no diff.
⚠️
O campo de busca que encolhe
Um desenvolvedor modifica o grid CSS do header para adicionar um novo link de navegacao. A barra de busca encolhe pela metade para abrir espaco. No celular, fica minuscula — inutilizavel. Seus visitantes nao encontram seus produtos porque digitar em um campo tao pequeno e frustrante. O desenvolvedor verificou que o novo link aparecia corretamente, nao que a barra de busca tinha encolhido ao lado. Delta-QA compara as capturas e destaca o encolhimento da barra — a mudanca de tamanho e claramente visivel na sobreposicao.
💡
O focus invisivel
Um desenvolvedor adiciona outline: none nos inputs "para ficar mais limpo". Visualmente, quando um usuario clica em um campo, nada indica qual campo esta ativo — o contorno azul sumiu. Tambem e uma violacao de acessibilidade WCAG. Verificar manualmente o estado focus de cada campo em cada formulario e irreal. Delta-QA captura o estado focus de cada campo e compara as capturas: o desaparecimento do contorno azul se destaca imediatamente no diff visual.
Pronto para detectar toda regressao visual?
Baixe o Delta-QA e comece a detectar mudancas CSS nas suas paginas web — sem codigo.