1
Object-fit e posição
Detecta mudanças em como as imagens preenchem seus containers: cover, contain, fill e ajustes de posição.
25 casos de teste
Imagens e SVG
Imagens e gráficos vetoriais carregam uma parte essencial da identidade visual de um site: fotos de produto, ilustrações, ícones, logos, esquemas de negócio em um dashboard. Uma regressão nessa categoria pode tomar a forma de um ícone quebrado no lugar de uma foto, de um banner esticado cujos rostos ficam distorcidos, de um logo cuja cor mudou após a modificação de um filtro CSS, ou de um SVG cujo path foi alterado durante uma otimização automática de build. O impacto no negócio é direto: um visitante não compra um produto que não consegue ver, um operador não interpreta um gráfico cujas proporções mudaram, e um site que exibe assets quebrados perde imediatamente em credibilidade. As causas típicas são uma reorganização da árvore de assets que quebra alguns caminhos, uma regra max-width modificada para um caso particular que se propaga a todas as imagens, uma mudança de proporção de container que estica os visuais, ou um object-fit ajustado para resolver um caso isolado que degrada o enquadramento em outro lugar. Os filtros CSS aplicados globalmente e os clip-path mal coordenados adicionam uma camada de complexidade difícil de antecipar. O Delta-QA compara as capturas completas das páginas que contêm esses visuais e sinaliza as zonas cuja renderização mudou: ícones quebrados, transbordamentos, distorções, modificações de filtro, paths SVG alterados. O relatório de comparação de páginas localiza com precisão cada imagem afetada, o que evita que a equipe de QA tenha que percorrer manualmente cada página de produto, cada página editorial e cada componente para verificar se os assets carregam e exibem corretamente após cada deploy.
O que detectamos
2
Filtros CSS
Monitora filtros blur, brightness, contrast, grayscale, hue-rotate, saturate, sepia e drop-shadow.
3
Modificações SVG
Captura mudanças de caminhos SVG, modificações de cor fill/stroke e ajustes de viewBox.
4
Mudanças de clip-path
Detecta modificações de forma clip-path com funções circle(), ellipse(), polygon() e inset().
5
Imagens de fundo
Rastreia mudanças em background-image, background-size, background-position e background-repeat.
Exemplo interativo
Veja exatamente o que o Delta-QA detecta. Compare as duas versões lado a lado.
Antes
Depois
Cenários reais
🎯
A imagem de produto que não carrega
Um desenvolvedor reorganiza a estrutura de pastas de assets e quebra o caminho de algumas imagens de produto. O navegador mostra um ícone de imagem quebrada ou o texto alternativo cru onde deveria estar a foto. Seus clientes veem "foto-produto-123.jpg" em vez do produto — ninguém compra o que não pode ver. O refactoring mexeu na estrutura de arquivos, não no código — ninguém retestou visualmente as páginas de produto. Delta-QA compara as capturas e detecta imediatamente o ícone quebrado no lugar da foto.
⚠️
A imagem que transborda
Um desenvolvedor modifica uma regra max-width para um caso específico e, por efeito cascata, todas as imagens do site perdem sua restrição de tamanho. Uma imagem de 2000px de largura transborda seu container, aparece uma barra de rolagem horizontal — o layout está quebrado, especialmente no celular. O desenvolvedor testou seu caso específico, não os 15 outros templates que usavam a mesma regra. Delta-QA compara as capturas e destaca a imagem que transborda junto com a barra de rolagem horizontal que apareceu.
💡
A proporção que muda
Um desenvolvedor modifica as dimensões do container do banner da página inicial e a proporção da imagem muda de 16:9 para 4:3. A imagem fica esticada: rostos ficam distorcidos, o logo fica achatado — seus visitantes veem uma imagem amadora onde havia um banner caprichado. É uma mudança de container, não de imagem — o desenvolvedor não pensou em verificar o resultado visual. Delta-QA compara as capturas e destaca a distorção — as proporções alteradas se destacam claramente no diff.
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.