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: 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.
No-code vs Storybook: a questão do público
Chromatic exige ser desenvolvedor front-end. Seu QA manager, product owner ou designer não podem usar Chromatic diretamente. Delta-QA abre o teste visual para toda a equipe. Sem Storybook, sem código, sem pipeline CI/CD.
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. Todos são autônomos.
Chromatic cobra por snapshot mensal. O plano gratuito oferece 5.000 snapshots — insuficiente para um design system de tamanho médio. Delta-QA é gratuito sem limites.
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.
FAQ
Chromatic funciona sem Storybook?
Não. 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.
Para aprofundar
- Delta-QA vs Chromatic: Testar Páginas Completas ou Componentes Isolados?
- Teste Visual: Componentes Isolados vs Páginas Montadas — Qual Nível Realmente Importa?
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.