35 casos de teste

Formulários e Estados

Os formulários concentram uma parcela desproporcional do valor de uma aplicação: cadastro, pagamento, busca, validação de operações bancárias, lançamento de tickets em um ERP. Uma regressão visual em um campo pode derrubar uma taxa de conversão ou bloquear um operador de negócio no meio de um processo crítico. O risco não está apenas na aparência do campo em repouso, mas também em seus estados derivados: focus, hover, disabled, error, success, assim como os placeholders e os textos de ajuda associados. Quando um desenvolvedor remove um outline para "ficar mais limpo", é a acessibilidade WCAG que é afetada e o usuário de teclado não sabe mais em qual campo está digitando. Quando o estilo global das mensagens de ajuda é modificado, os erros de validação podem passar do vermelho para o cinza claro e ficar ilegíveis. As regressões clássicas vêm de uma mudança de CSS Grid que encolhe a barra de busca, de um reset que apaga os estilos nativos de checkboxes e radios, ou de uma atualização de framework UI que altera sutilmente as bordas e as alturas de input. O Delta-QA captura os formulários em seus diferentes estados e compara essas capturas à baseline visual. A análise perceptual evidencia as mudanças de cor de mensagem, os indicadores de foco que sumiram, os campos cujas dimensões mudaram, os placeholders alterados e os estados de erro que não se destacam mais visualmente. Essa cobertura por regressão visual evita ter que testar manualmente cada cenário de preenchimento em cada formulário a cada deploy, e garante que as jornadas críticas de conversão ou operação permaneçam visualmente coerentes entre versões.

O que detectamos

1

Estilo de campos de entrada

Detecta mudanças na aparência de inputs: bordas, fundos, paddings e propriedades de fonte.

2

Checkbox e radio

Monitora o estilo personalizado de checkboxes e radio buttons, incluindo estados visuais marcado/desmarcado.

3

Estados de validação

Captura mudanças no estilo de pseudo-classes :valid, :invalid, :required e mensagens de erro.

4

Indicadores de foco

Rastreia mudanças de estilo :focus e :focus-visible críticos para acessibilidade por teclado.

5

Estilo de placeholders

Detecta mudanças do pseudo-elemento ::placeholder em cor, opacidade e propriedades de fonte.

6

Estados de botões

Monitora estados hover, active, disabled e padrão dos botões para consistência 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 formulário de cadastro passam de vermelho a cinza claro. Seus visitantes enviam um email inválido, veem um texto abaixo do campo... que não conseguem ler porque é cinza claro sobre fundo branco. Acham que o site está quebrado e saem. Ninguém tem tempo de verificar cada estado de erro de cada formulário a cada deploy. Delta-QA compara as capturas e destaca a mudança de cor da mensagem — o texto que ficou quase invisível se destaca no diff.

⚠️

O campo de busca que encolhe

Um desenvolvedor modifica o grid CSS do header para adicionar um novo link de navegação. A barra de busca encolhe pela metade para abrir espaço. No celular, fica minúscula — inutilizável. Seus visitantes não encontram seus produtos porque digitar em um campo tão pequeno é frustrante. O desenvolvedor verificou que o novo link aparecia corretamente, não que a barra de busca tinha encolhido ao lado. Delta-QA compara as capturas e destaca o encolhimento da barra — a mudança de tamanho é claramente visível na sobreposição.

💡

O focus invisível

Um desenvolvedor adiciona outline: none nos inputs "para ficar mais limpo". Visualmente, quando um usuário clica em um campo, nada indica qual campo está ativo — o contorno azul sumiu. Também é uma violação de acessibilidade WCAG. Verificar manualmente o estado focus de cada campo em cada formulário é 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 regressão visual?

Baixe o Delta-QA e comece a detectar mudanças CSS nas suas páginas web — sem código.