Teste visual de componentes: método de verificação automatizada que renderiza componentes de UI isoladamente — fora do contexto da página completa — e compara sua aparência com um estado de referência validado, para detectar regressões visuais no nível do sistema de design antes que se propaguem às páginas em produção.
Existe uma pergunta que equipes front-end evitam cuidadosamente: "nossos componentes estão testados visualmente no Storybook, mas nossas páginas em produção também estão?". A resposta, na maioria dos casos, é não. E essa lacuna é cara, porque os bugs visuais que chegam aos seus usuários não vivem no Storybook — vivem nas páginas reais, com dados reais, interações reais e combinações reais de componentes.
Chromatic é uma excelente ferramenta para testar componentes isolados. Delta-QA foi projetado para testar páginas completas. Não são concorrentes no sentido estrito — são ferramentas que olham o mesmo problema de altitudes diferentes. Mas se você precisa escolher uma, ou quer entender o que cada uma traz, este comparativo vai direto ao ponto.
Chromatic verifica componentes isolados; e suas páginas reais em produção, quem as testa? O Delta-QA as cobre sem escrever código, localmente e sem cota de snapshots, gratuitamente no Desktop. Testar o Delta-QA grátis →
Chromatic: o guardião do sistema de design
Chromatic, criado pelos mantenedores do Storybook, é a extensão natural do ecossistema Storybook para teste visual. O conceito é brilhante pela sua lógica: você já definiu seus componentes no Storybook com seus vários estados (stories). Chromatic captura um screenshot de cada story em cada commit, compara com a baseline e sinaliza as mudanças.
É um fluxo de trabalho perfeitamente integrado para equipes de sistema de design. Seu designer define um botão com quatro variantes (primário, secundário, desativado, carregando). Seu desenvolvedor implementa e cria as stories correspondentes. Chromatic verifica a cada mudança de código que as quatro variantes não sofreram regressão visual. Se o border-radius do botão mudar acidentalmente, Chromatic detecta antes de qualquer code review.
A ferramenta também oferece UI Review, permitindo que designers e desenvolvedores validem visualmente as mudanças antes do merge. É essencialmente um code review visual, e é genuinamente útil para manter a consistência do sistema de design.
O ponto cego do Chromatic: o mundo real
Aqui está o problema que Chromatic não resolve — não por deficiência de qualidade, mas por escolha arquitetônica: componentes isolados não se comportam como páginas montadas.
Um botão testado isoladamente no Storybook renderiza em um ambiente controlado: um viewport fixo, sem vizinhos, sem contexto CSS herdado, sem dados dinâmicos, sem interações com outros componentes. É precisamente isso que torna o teste em nível de componente confiável. Mas é também o que o torna cego aos problemas de montagem.
O que quebra visualmente em produção? Raramente um componente isolado. O que quebra é a combinação. Um componente de header sobrepondo um componente de navegação porque um z-index mudou. Uma grid de produtos desalinhando porque um componente de card recebeu uma margin extra. Um formulário transbordando seu container porque um label é mais longo do que o esperado em outro idioma. Um footer subindo sobre o conteúdo principal porque uma seção intermediária perdeu sua altura mínima.
Esses bugs são invisíveis no Storybook. Cada componente, tomado individualmente, está visualmente correto. É a montagem deles que causa problemas. E Chromatic, por design, não testa a montagem — testa os tijolos, não o edifício.
Delta-QA testa o edifício. A ferramenta compara páginas completas conforme renderizadas em um navegador real, com todos os seus componentes montados, estilos herdados, interações e dados. É o teste da realidade, não o teste da planta do arquiteto.
O fosso entre Storybook e a produção
Existe um descompasso estrutural entre o que o Storybook mostra e o que a produção exibe, e esse descompasso raramente é discutido.
Os dados. No Storybook, seus componentes recebem dados mockados — cuidadosamente escolhidos para serem representativos e caberem no mockup. Em produção, eles recebem dados reais: um nome de produto com 150 caracteres que ninguém previu, uma imagem com proporção improvável, um preço com número variável de casas decimais, uma lista de categorias que ocupa três linhas em vez de uma. Esses dados reais criam situações visuais que o Storybook nunca reproduz.
Os estilos herdados. No Storybook, cada componente é renderizado em um sandbox CSS relativamente limpo. Em produção, os componentes herdam estilos globais, resets de CSS, temas, overrides contextuais e, às vezes, estilos de terceiros (widgets de analytics, chatbots, banner de cookies). Um componente pode estar perfeito no Storybook e visualmente quebrado em produção por causa de um conflito de estilos que nenhuma story reproduz.
Os estados dinâmicos. O Storybook testa estados predefinidos — os que o desenvolvedor julgou importante documentar. Em produção, os componentes passam por estados intermediários, estados de erro não previstos, combinações de estados que ninguém pensou em testar. O formulário com uma validação em andamento, o botão em um container flex que se redimensiona, o card de produto com uma promoção que adiciona um selo — cada combinação é um teste visual que o Storybook não cobre.
Delta-QA testa o que seus usuários realmente veem. Não o que o Storybook promete que eles verão.
No-code vs Storybook: a questão do público
Chromatic se dirige a desenvolvedores front-end que trabalham com Storybook. É um público legítimo e importante. Mas é um público restrito.
Para usar Chromatic, você precisa de um projeto Storybook configurado, conhecimento em escrita de stories, compreensão de baselines e snapshots visuais, familiaridade com fluxos de CI baseados em PR. Em resumo: você precisa ser um desenvolvedor front-end.
Seu gerente de QA querendo verificar uma página antes do lançamento? Não pode usar Chromatic diretamente. Seu product owner percebendo um problema visual em staging? Não consegue executar um teste. Seu designer querendo comparar o mockup com a produção? Sem acesso ao fluxo do Chromatic sem passar por um desenvolvedor.
Delta-QA abre o teste visual para toda a equipe. Sem Storybook necessário. Sem código. Sem pipeline CI/CD para entender. Você fornece duas URLs, inicia a comparação, lê o relatório. O designer compara seu mockup com a produção. O QA compara o staging com a produção. O product owner compara a versão atual com a anterior. Todos são autônomos.
Isso não é anti-intelectualismo tecnológico. É reconhecer que a qualidade visual diz respeito a toda a equipe, e que as ferramentas deveriam refletir essa realidade.
Componentes vs páginas: dois níveis de teste complementares
Em vez de opor Chromatic e Delta-QA, é mais justo posicioná-los como dois níveis de uma estratégia completa de teste visual.
Nível componente (Chromatic): verificar se cada peça do sistema de design está visualmente conforme suas especificações. É o teste unitário do visual. Detecta regressões no nível mais granular, o mais cedo possível no ciclo de desenvolvimento (antes mesmo do merge).
Nível página (Delta-QA): verificar se as páginas montadas, com dados reais e estilos em cascata, estão visualmente corretas. É o teste de integração do visual. Detecta problemas de montagem, conflitos de estilos e regressões que só existem no contexto da página completa.
Uma equipe que faz os dois tem uma cobertura visual notável. As regressões de componentes são detectadas cedo pelo Chromatic. As regressões de páginas são detectadas pelo Delta-QA. A rede de segurança é dupla.
Mas se você só pode escolher uma — por restrição de orçamento, tempo ou recursos —, a questão se resume a: qual nível de teste protege melhor seus usuários? E a resposta, sem ambiguidade, é o nível página. Porque seus usuários não veem componentes. Eles veem páginas.
Cloud vs local: onde ficam suas capturas
Há uma diferença arquitetônica que importa muito para equipes com dados sensíveis: o Chromatic é exclusivamente na nuvem. Suas capturas de tela são enviadas e armazenadas na infraestrutura do Chromatic, e não existe opção de hospedagem própria (self-hosted) — nem mesmo para equipes que já hospedam seu próprio GitLab ou GitHub Enterprise. Para a maioria dos projetos públicos, isso não é um problema. Mas para uma aplicação interna, um back-office com dados de clientes ou uma organização sob restrições regulatórias rígidas, o simples fato de capturas de interface saírem do perímetro da empresa pode ser um impeditivo.
Delta-QA é local por padrão. As comparações rodam na sua máquina e nenhum dado é enviado a servidores de terceiros. É a mesma lógica da soberania de dados detalhada mais adiante, mas formulada no nível da arquitetura: os dados ficam vs. os dados saem.
Testa componentes isolados, mas as páginas completas continuam a quebrar? O Delta-QA valida páginas inteiras sem código, na versão Desktop gratuita e sem necessidade de criar conta. Testar o Delta-QA grátis →
O modelo econômico: snapshots vs liberdade
Chromatic cobra pelo número de snapshots por mês. Um snapshot = uma story, um navegador, uma resolução. Com 200 componentes e 3 stories cada, em 2 navegadores, são 1.200 snapshots por build. Vinte builds por dia (uma equipe ativa) somam 720.000 por mês.
O plano gratuito oferece 5.000 snapshots mensais — suficiente para um projeto pequeno, esgotado em poucos dias em um design system de tamanho médio. E esse plano gratuito é limitado ao Chrome: o teste cross-browser (Firefox, Safari/WebKit) só fica acessível a partir de $179/mês. Os planos pagos escalam junto com o volume. Na prática, 180 stories × 3 resoluções = 540 snapshots por build, o que dá apenas 9 builds antes de esgotar a cota gratuita. E isso cria a mesma tensão do Percy: a cobertura de teste é inversamente proporcional ao orçamento. As equipes acabam limitando as stories testadas ou a frequência dos builds para caber na cota. Uma ferramenta de qualidade que incentiva você a reduzir sua cobertura de teste — o paradoxo é, no mínimo, curioso.
Delta-QA é gratuito. Sem cota de snapshots, sem teto de páginas, sem limitação de frequência. Você testa quantas páginas forem necessárias, com a frequência que quiser. A qualidade da sua cobertura visual depende apenas da sua vontade de fazer bem-feito, não da sua capacidade de pagar.
O que Chromatic faz que Delta-QA não
Revisão de UI colaborativa. O fluxo do Chromatic permite que desenvolvedores e designers validem mudanças visuais de componentes dentro de um PR. Sem equivalente exato no Delta-QA.
Teste de todos os estados de um componente. Se seu botão tem 12 variantes, Chromatic testa todas sistematicamente. Testar essas 12 em nível de página exigiria encontrar 12 páginas diferentes onde aparecem.
Integração nativa com Storybook. Feito pelos criadores do Storybook. A integração é tão profunda quanto possível.
Documentação visual viva. Chromatic mantém um histórico visual de cada componente ao longo do tempo.
O que Delta-QA traz que Chromatic não cobre
Teste da realidade. Páginas de produção com dados reais, estilos herdados reais, interações reais entre componentes. Não a idealização limpa do Storybook.
Acessibilidade universal. Qualquer membro da equipe pode executar um teste visual. Sem competências de desenvolvedor necessárias.
Independência tecnológica. Delta-QA funciona independentemente do seu stack front-end. React, Vue, Angular, Svelte, WordPress, Shopify, jQuery legado — se exibe em um navegador, Delta-QA testa. Chromatic exige Storybook, que exige um framework JavaScript moderno.
Soberania de dados. Execução local, nenhum dado enviado a servidores de terceiros.
Custo zero. Sem cálculos de snapshots, sem plano para escolher, sem cartão de crédito para informar.
O cenário ideal: os dois juntos
Se sua equipe já usa Storybook e tem orçamento para o Chromatic, combinar as duas ferramentas é a estratégia mais robusta.
Chromatic monitora seus componentes no nível do sistema de design. Cada mudança de estilo, cada variante, cada estado é verificado visualmente. As regressões são detectadas no momento do desenvolvimento, antes mesmo de o código chegar à branch principal.
Delta-QA monitora suas páginas em produção (ou em staging). Os problemas de montagem, os conflitos de estilos, os bugs que só aparecem no contexto real são detectados antes que os usuários os vejam.
Juntas, é uma cobertura dupla que praticamente não deixa nada passar. E como o Delta-QA é gratuito, o custo total dessa estratégia é o custo do Chromatic sozinho.
O cenário pragmático: uma única ferramenta
Se você precisa escolher apenas uma ferramenta — porque o orçamento é limitado, porque a equipe é pequena, ou porque quer começar simples —, a questão se resume a: o que protege melhor os seus usuários?
Seus usuários não veem seus componentes do Storybook. Eles veem suas páginas. Interagem com suas páginas. Formam a opinião deles sobre seu produto olhando para suas páginas. Um componente perfeito no Storybook, mas quebrado na página montada, é um componente quebrado do ponto de vista do usuário.
Delta-QA testa o que seus usuários veem. É simples assim.
Pronto para testar as páginas que seus usuários realmente veem? Lance sua primeira comparação com o Delta-QA, de graça e sem inscrição. Testar o Delta-QA grátis →
FAQ
Chromatic funciona sem Storybook?
Não de forma plena. O Chromatic vem se abrindo para Playwright e Cypress desde 2025, mas essas integrações ainda são recentes e, na prática, o Storybook continua sendo o principal pré-requisito. Chromatic depende de stories para definir o que será testado visualmente. Delta-QA funciona de forma independente de qualquer framework — testa páginas web independentemente do stack que as produz.
Basta testar componentes no Storybook para garantir a qualidade visual?
Não. Componentes testados isoladamente não reproduzem as condições reais de página: herança de estilos, dados dinâmicos, interações entre componentes, estilos de terceiros. Chromatic verifica se seus tijolos estão corretos. Delta-QA verifica se a montagem está correta.
Chromatic detecta problemas de responsividade?
Sim, dentro do que o Storybook mostra. Mas problemas de responsividade específicos de página (um elemento transbordando quando combinado com outros, um layout quebrando com dados reais longos) não serão detectados.
O plano gratuito do Chromatic é suficiente para um projeto pequeno?
O plano gratuito oferece 5.000 snapshots/mês. Um projeto com 100 componentes, 3 stories cada, 2 builds diários consome cerca de 18.000 snapshots/mês. Delta-QA não tem limitações de volume.
Delta-QA pode ser usado para testar componentes isolados?
Delta-QA é otimizado para páginas completas. Se os componentes são renderizados em URLs acessíveis (como um Storybook implantado), você pode tecnicamente testá-los. Mas para teste de componentes isolados, Chromatic continua sendo a referência.
Como o Delta-QA lida com design systems se não é no nível do componente?
Delta-QA verifica a consistência visual do seu design system no nível em que ela mais importa: nas páginas que o utilizam. Se uma mudança no seu design system quebra o layout de uma dezena de páginas, Delta-QA detecta isso diretamente. É um teste end-to-end do design system, complementar ao teste unitário do Chromatic.
Chromatic e Delta-QA não são adversários — são duas faces da mesma moeda. Um protege seus componentes, o outro protege suas páginas. Se você pode ter ambos, tenha ambos. Se precisa escolher, escolha o que protege o que seus usuários realmente veem.