Dark mode e teste visual: por que precisa de 2x mais testes
Por que o dark mode duplica as suas necessidades em teste visual? Descubra os desafios ocultos do modo escuro e como a regressão visual pode ser evitada.
Ler mais →Detecção visual — Todos os artigos e tutoriais
14 artigos
A detecção visual não se resume a comparar duas imagens pixel a pixel. Conforme o tipo de defeito visado, os algoritmos e os limiares diferem: uma deriva sutil de cor (token mal resolvido, conversão sRGB / P3) exige uma comparação perceptual; um deslocamento de layout (flexbox quebrado, margem duplicada) é melhor visto por uma análise estrutural; um problema de tipografia (fonte de fallback carregada no lugar da principal) exige atenção particular à renderização sub-pixel. E tudo muda novamente em modo responsive ou dark mode, onde cada breakpoint multiplica a superfície a cobrir.
Esta página reúne os artigos que esmiúçam os tipos de regressões visuais detectáveis e a maneira de distingui-los: falsos positivos ligados ao anti-aliasing das fontes, regressões reais de contraste que passam despercebidas a olho nu, quebras de layout em viewport estreito, transições parciais do dark mode em que alguns componentes esquecem de se adaptar. Também abordamos as escolhas de algoritmos de comparação (pixel matching, SSIM, perceptual) com suas forças e seus pontos cegos respectivos. O Delta-QA se apoia em uma combinação dessas abordagens para minimizar o ruído mantendo-se rigoroso sobre as regressões reais; estes artigos explicam os princípios para entender o que uma ferramenta de teste visual pode — e não pode — detectar de maneira confiável.
CSS quebrou após o deploy: por que acontece e como evitar
Seu CSS estava perfeito localmente e tudo quebrou em produção? Descubra por que o CSS quebra após um deploy e como o teste visual automatizado previne esse pesadelo.
Ler mais →
Auditoria visual automatizada de um site: o guia metódico
Como realizar uma auditoria visual completa do seu site: inventário de páginas, baseline, cross-browser, responsive, acessibilidade. Metodologia passo a passo.
Ler mais →
Reduzir os falsos positivos em teste visual: o problema que ninguém realmente resolve
Anti-aliasing, animações e renderização cross-browser: veja por que o pixel diff gera falsos positivos e como eliminá-los pela raiz.
Ler mais →
Comparador HTML visual online: compare duas páginas além do pixel a pixel
Compare visualmente duas páginas HTML gratuitamente e sem cadastro. Detecte diferenças CSS invisíveis no código através da renderização real do navegador.
Ler mais →