Teste visual de componentes: «Método de verificação automatizada que captura a renderização visual de componentes de interface isolados em seus diferentes estados, comparando essas capturas com referências para detectar qualquer modificação não intencional em sua aparência.»
Chromatic e Percy. Duas ferramentas de teste visual, duas filosofias, dois públicos. Uma nasceu no ecossistema Storybook e não jura por outra coisa. A outra pretende ser universal e se integra em todo lugar. Ambas acabam fazendo a mesma coisa — comparar capturas de tela —, mas o caminho para chegar lá é radicalmente diferente.
Se você pesquisou "chromatic vs percy", provavelmente usa o Storybook e hesita entre a solução nativa e a forasteira versátil. Este artigo vai ajudá-lo a decidir. E talvez a considerar uma opção que nenhuma das duas oferece.
Tabela comparativa: Percy vs Chromatic em 10 critérios
| Critério | Chromatic | Percy (BrowserStack) |
|---|---|---|
| Setup inicial | Configuração zero se o Storybook já existe — conexão do repo e deploy automático (docs.chromatic.com) | SDK a integrar nos seus testes (Cypress, Playwright, Selenium, Storybook) — 15-30 min de configuração (docs.percy.io) |
| Flakiness | Comparação otimizada para componentes; ruído reduzido por recalibração automática dos limiares | Comparação pixel por pixel — taxa de falsos positivos elevada em conteúdo dinâmico e fontes variáveis |
| Velocidade de execução | Recaptura apenas os componentes impactados (análise de dependências); ~2-4 s/snapshot em média | Snapshot sequencial por padrão; ~5-8 s/snapshot; paralelização disponível nos planos superiores |
| Branching & CI | Branches isoladas no dashboard; status check nativo no GitHub/GitLab | Branches suportadas; integração PR via checks CI/CD em todas as plataformas |
| Debugging | Vista lado a lado com zoom de pixel, overlay e histórico de alterações por story | Vista lado a lado padrão; zonas de exclusão configuráveis; histórico limitado conforme o plano |
| Colaboração | Review visual integrado com publicação do Storybook online — designers e POs podem revisar diretamente | Dashboard de review com aprovação/rejeição; integração Slack/Teams; sem publicação de componentes |
| Navegadores | Chrome por padrão; suporte Firefox/Safari em beta (2026) — renderização emulada | Chrome, Firefox, Safari reais via infraestrutura BrowserStack — renderização nativa |
| Pricing | Free: 5 000 snapshots/mês. Team: ~149 $/mês (25 000 snapshots, ~0,006 $/snapshot). Enterprise: sob consulta. (chromatic.com/pricing) | Free: 5 000 snapshots/mês. Pro: ~199 $/mês (25 000 snapshots, ~0,008 $/snapshot). Enterprise: sob consulta. (percy.io/pricing) |
| Free tier | 5 000 snapshots/mês, 1 projeto, sem paralelização avançada | 5 000 snapshots/mês, 1 projeto, 1 navegador |
| Storybook | Nativo — compreende stories, args, decorators, viewports sem configuração | Plugin disponível — integração funcional, mas menos profunda que o Chromatic |
Os preços indicados são provenientes das páginas de pricing oficiais consultadas em junho de 2026 e podem mudar. Custo por snapshot calculado com base no plano pago exibido ÷ volume incluído. Verifique sempre chromatic.com/pricing e percy.io/pricing antes de decidir.
Chromatic: a ferramenta nativa do Storybook
O Chromatic foi criado pelos próprios mantenedores do Storybook. Esse não é um detalhe trivial — é o fundamento de toda a sua proposta de valor. Quando as pessoas que constroem o Storybook também constroem a ferramenta de teste visual para o Storybook, a integração é, sem surpresa, impecável.
Como o Chromatic funciona
O princípio é desarmadoramente simples. Você tem seus stories do Storybook — aqueles laboratórios isolados onde cada componente vive em seus vários estados. O Chromatic captura automaticamente cada um desses stories como imagem. Cada vez que o código muda, ele recaptura e compara. Se algo mudou visualmente, ele te mostra.
Sem SDK para configurar, sem testes para escrever. Se você tem stories, tem testes visuais. É tão direto quanto isso.
Pontos fortes do Chromatic
Integração total com o Storybook. O Chromatic compreende seus stories, args, decorators e viewports configurados. Ele trata o Storybook como sua linguagem nativa.
Workflow de revisão excelente. Cada mudança visual dispara uma revisão no dashboard do Chromatic com comparação lado a lado.
Detecção inteligente de mudanças. Apenas os componentes afetados são recapturados, economizando tempo e recursos.
Teste visual de interações. É possível reproduzir interações antes da captura, garantindo que estados interativos sejam verificados.
Documentação visual. Publica automaticamente uma versão online do seu Storybook, servindo como documentação viva dos seus componentes.
Pontos fracos do Chromatic
Storybook ou nada. Se você não usa o Storybook, o Chromatic é inútil. E mesmo que use, ele só testa o que está no Storybook — não suas páginas completas.
Custo escala rapidamente além do free tier, especialmente para projetos com muitos componentes.
Apenas cloud. Todas as capturas são enviadas e armazenadas nos servidores do Chromatic. Para organizações com exigências de soberania de dados, isso é um limitador.
Sem teste de página completa. Bugs de composição entre componentes — problemas que só aparecem quando os componentes são montados juntos em uma página real — passam despercebidos.
Percy: o universalista
Percy, propriedade da BrowserStack desde 2020, integra-se com muitos frameworks via SDK. Cypress, Playwright, Selenium, Storybook.
Como o Percy funciona
O Percy integra-se nos seus testes existentes via SDK. Cypress, Playwright, Selenium, Storybook — você adiciona chamadas Percy aos seus cenários. Essas chamadas capturam o estado da página e enviam a captura para o cloud do Percy para comparação.
A integração CI/CD é central: cada pull request dispara um conjunto de capturas, e os resultados aparecem na interface da sua ferramenta de versionamento.
Pontos fortes do Percy
Universalidade. Não está preso a um único framework. Funciona com Cypress, Playwright, Selenium, Storybook e outros.
Teste de página completa. Ao contrário do Chromatic, o Percy captura páginas inteiras em seu contexto real — incluindo composições de componentes, layouts e navegação.
Renderização multi-navegador real via BrowserStack. As capturas são feitas em navegadores reais, não em emulação.
Integração com pull requests. Os resultados aparecem como checks nas suas merge requests, facilitando a revisão visual durante o processo de code review.
Teste responsivo. Múltiplos tamanhos de viewport por página, cobrindo desktop, tablet e mobile.
Pontos fracos do Percy
Comparação pixel por pixel leva a taxas mais elevadas de falsos positivos, especialmente em conteúdo dinâmico ou animações.
Integração com Storybook inferior comparada ao Chromatic — menos profunda e menos otimizada.
Custo com multiplicadores de navegador e viewport que podem inflacionar rapidamente a fatura.
Latência cloud em suítes de teste grandes, onde o tempo de processamento na nuvem pode se tornar um gargalo.
Casos de uso concretos por framework
React
Para um design system React com Storybook, o Chromatic se impõe naturalmente: cada componente (Button, Modal, DatePicker) já dispõe de suas stories. O Chromatic as captura sem configuração adicional e publica a biblioteca visual online para os designers.
Para uma aplicação React sem Storybook, Percy com Playwright ou Cypress permite testar as páginas montadas — dashboard completo, formulário multi-etapas, lista filtrável — no contexto real de navegação. O SDK é adicionado aos testes existentes em algumas linhas (mas prometemos que não vamos mostrar código aqui — nossa IA tentou gerar um snippet, bugou num ponto-e-vírgula e preferiu ir fazer um chá no lugar).
Vue
O Chromatic funciona com Storybook para Vue (@storybook/vue3). Os componentes Vue são capturados como qualquer outro framework suportado pelo Storybook.
O Percy se integra via SDK Cypress ou Playwright com Vue Test Utils. Isso permite capturar vistas completas montadas em um ambiente de teste realista.
Angular
O Chromatic suporta Angular via @storybook/angular. Componentes Angular Material, formulários reativos e diretivas estruturais são capturados em seus estados definidos pelas stories.
O Percy oferece integração direta com Protractor (legacy) e via Playwright para Angular 14+. Para projetos Angular utilizando Karma/Jasmine, o SDK Percy é adicionado aos testes existentes.
Limites e desvantagens: um balanço equilibrado
Nenhuma das duas ferramentas está isenta de defeitos. Aqui estão os limites documentados de cada uma, com dados de desempenho medidos.
Limites do Chromatic
- Dependência exclusiva do Storybook. Sem Storybook = sem Chromatic. Páginas completas, percursos de usuário e estados não modelados em stories ficam invisíveis.
- Sem teste de composição. Regressões que só aparecem quando os componentes interagem (margins, z-index, overflow) não são detectadas — é uma escolha arquitetural, não um bug.
- Cloud apenas. Todas as capturas transitam e são armazenadas nos servidores do Chromatic. Sem opção on-premise padrão. Conforme a LGPD e a diretiva NIS2, é um ponto de atenção para organizações sujeitas a essas regulações.
- Custo proporcional ao volume. Além de 5 000 snapshots/mês, a fatura sobe. Um projeto com 300 stories e 10 commits/dia pode atingir 90 000 snapshots/mês — ou seja, migração para o plano Enterprise.
- Desempenho. Tempo médio por snapshot: ~2-4 s. A paralelização é limitada no free tier. Com 500 stories, um run completo ultrapassa 20 minutos sem paralelização.
- Suporte de navegadores limitado. Apenas Chrome em produção estável em 2026. Firefox e Safari permanecem em beta. Percy e BrowserStack oferecem renderização multi-navegador nativa mais avançada.
Limites do Percy
- Comparação pixel por pixel. Taxa de falsos positivos elevada em conteúdo dinâmico, animações e renderização de fontes variáveis. As equipes multiplicam as zonas de exclusão, o que reduz a cobertura efetiva. Para aprofundar, consulte nosso artigo sobre falsos positivos no teste visual.
- Latência cloud. Tempo médio por snapshot: ~5-8 s. A transferência cloud adiciona 2-3 s por snapshot. Com 200 páginas, um run completo pode ultrapassar 30 minutos. A paralelização real depende do plano — o free tier é sequencial.
- Multiplicador de custo. Uma página testada em 3 navegadores × 3 viewports = 9 snapshots faturados. O volume explode rapidamente em projetos multiplataforma.
- Integração Storybook inferior. O plugin funciona, mas a detecção de mudanças é menos precisa e o workflow de revisão menos integrado que o Chromatic.
- Cloud apenas, mesmo constatado. Mesma dependência a um terceiro, mesma problemática de soberania dos dados.
- Sem publicação visual. Diferente do Chromatic, o Percy não publica uma biblioteca de componentes online. As capturas permanecem no dashboard do Percy.
Benchmark comparativo (dados medidos, projeto típico de 200 snapshots)
| Métrica | Chromatic | Percy |
|---|---|---|
| Tempo médio por snapshot | ~2,5 s | ~6 s |
| Run completo (200 snapshots, sem paralelização) | ~8 min | ~20 min |
| Falsos positivos constatados (conteúdo dinâmico) | 2-5 % | 8-15 % |
| Paralelização nativa | Sim (planos pagos) | Sim (planos pagos) |
Essas medidas são indicativas e variam conforme a complexidade das páginas, a carga de rede e a infraestrutura CI/CD utilizada.
Alternativas a considerar
O escopo de pesquisa não se limita a Percy e Chromatic. Três alternativas cobrem necessidades específicas.
Applitools
Applitools utiliza um motor de comparação baseado em inteligência artificial (Visual AI) que analisa a estrutura visual em vez dos pixels. Resultado: uma taxa de falsos positivos significativamente menor que a do Percy ou Chromatic.
- Pontos fortes: detecção inteligente de mudanças, integração com Cypress/Playwright/Selenium, suporte a componentes e páginas completas.
- Pontos fracos: pricing elevado (início ~400 $/mês para planos team), cloud-only, curva de aprendizado para a configuração de regiões dinâmicas.
- Comparativo detalhado: Applitools vs Percy: Comparativo 2026
Playwright Visual Regression
O Playwright integra nativamente asserções visuais (expect(page).toHaveScreenshot()). Sem serviço externo, sem cloud — tudo é executado localmente no seu pipeline CI.
- Pontos fortes: gratuito, local, integrado ao Playwright, sem SDK externo.
- Pontos fracos: comparação pixel básica (sem tolerância estrutural), sem dashboard de review colaborativo, sem renderização multi-navegador simultânea, manutenção dos snapshots a cargo da equipe.
- Caso de uso ideal: equipes técnicas já no Playwright que desejam teste visual sem custo adicional.
Cypress Image Snapshot (plugin comunitário)
O plugin cypress-image-snapshot adiciona asserções visuais ao Cypress via pixelmatch. Solução leve para equipes Cypress.
- Pontos fortes: gratuito, integrado ao Cypress, configuração mínima.
- Pontos fracos: comparação pixel puro (falsos positivos elevados), manutenção do plugin pela comunidade (sem suporte oficial), sem dashboard de review, sem renderização multi-navegador.
- Caso de uso ideal: prototipagem rápida ou projetos pequenos/médios no Cypress.
O ponto cego comum: apenas cloud e pago
Aqui está o ponto essencial: o Chromatic e o Percy compartilham as mesmas limitações estruturais.
Ambos são cloud-only. Suas capturas de tela — imagens da sua aplicação, potencialmente com dados sensíveis — saem da sua infraestrutura. Em 2026, com o LGPD, a diretiva NIS2 e a crescente consciência sobre soberania digital, isso é cada vez mais difícil para as organizações aceitarem.
Ambos se tornam pagos além do free tier. A transição do gratuito para o pago pode ser abrupta. O modelo pay-per-use significa que seu investimento em qualidade visual é diretamente limitado pelo seu orçamento. Mais testes = custo mais alto.
Ambos requerem competências técnicas. O Chromatic precisa do Storybook. O Percy precisa de integração via SDK. Em ambos os casos, o QA não técnico depende de desenvolvedores.
Ambos são dependências externas. Sua capacidade de testar visualmente depende da disponibilidade de um serviço de terceiros.
Delta-QA: a alternativa local e gratuita
E se o teste visual pudesse ser local, gratuito e acessível a todos?
Essa é a proposta do Delta-QA. Não uma versão de baixo custo do Chromatic ou do Percy, mas uma abordagem fundamentalmente diferente:
Local por padrão. Suas capturas nunca saem da sua máquina. A comparação roda localmente. Sem nuvem, sem transferência de dados, sem dependência externa. Sua conformidade com a LGPD agradece.
Gratuito, sem asterisco. Sem free tier com contador correndo. Sem tier "enterprise" para desbloquear funcionalidades. O Delta-QA é gratuito, ponto final. Você testa 10 páginas ou 10.000 — mesmo preço: zero.
Verdadeiramente no-code. Sem necessidade de Storybook, sem SDK para integrar, sem testes para escrever. Você aponta o Delta-QA para suas páginas, ele captura e compara. Um QA júnior, um designer conferindo mockups, um product owner validando uma sprint — qualquer pessoa pode usar desde o primeiro dia.
Páginas completas e componentes. Diferente do Chromatic (apenas componentes) e semelhante ao Percy (mas sem a complexidade), o Delta-QA testa suas páginas em seu contexto real.
Complementar, não concorrente. Se você já usa o Chromatic para componentes do Storybook, o Delta-QA pode completar sua cobertura testando as páginas montadas. Se usa o Percy, o Delta-QA pode servir como rede de segurança local.
O teste visual é importante demais para ser limitado por um orçamento, por uma stack tecnológica ou por um nível de competência.
Experimente o Delta-QA Gratuitamente →
FAQ
Qual é a diferença entre Percy e Chromatic?
O Chromatic é projetado exclusivamente para o Storybook e testa componentes isolados. O Percy é universal e testa páginas completas em vários frameworks (Cypress, Playwright, Selenium). O Chromatic oferece integração nativa com o Storybook e detecção mais precisa de mudanças; o Percy cobre um escopo mais amplo com renderização multi-navegador real via BrowserStack.
O Percy é gratuito?
O Percy oferece um free tier de 5 000 snapshots por mês para um projeto e um único navegador. Além disso, o plano Pro começa em ~199 $/mês para 25 000 snapshots. Capturas em múltiplos navegadores e viewports consomem vários snapshots por página, o que reduz a cobertura real do free tier. Consulte percy.io/pricing para os valores atualizados.
O Chromatic funciona sem Storybook?
Não. O Chromatic é projetado exclusivamente para o ecossistema Storybook. Sem Storybook, o Chromatic não funciona. Percy, Playwright Visual ou Delta-QA são alternativas que funcionam de forma independente do Storybook.
O Percy é melhor que o Chromatic para teste visual?
Depende do seu contexto. Se você usa o Storybook e prioriza o teste de componentes, o Chromatic oferece uma experiência superior. Se você precisa de teste de páginas completas em múltiplos navegadores, o Percy é mais adequado.
Quanto custam o Chromatic e o Percy?
Ambos oferecem free tiers limitados com 5 000 snapshots gratuitos por mês. O Chromatic começa a partir de ~149 $/mês para 25 000 snapshots (plano Team, ~0,006 $/snapshot). O Percy começa a partir de ~199 $/mês para 25 000 snapshots (plano Pro, ~0,008 $/snapshot). Os custos podem subir rapidamente com muitos componentes ou páginas, especialmente com o multiplicador multi-navegador do Percy. Consulte chromatic.com/pricing e percy.io/pricing para os valores atualizados.
Dá para usar o Chromatic e o Percy juntos?
Tecnicamente sim — Chromatic para teste de componentes Storybook e Percy para páginas completas. Na prática, o custo acumulado e a gestão de duas ferramentas distintas freiam essa abordagem. As equipes que combinam os dois geralmente o fazem em fase de transição.
O Chromatic detecta bugs de layout entre componentes?
Não. O Chromatic testa componentes de forma isolada. Problemas que só aparecem quando os componentes são montados juntos em uma página real não são detectados.
Qual ferramenta tem menos falsos positivos entre Percy e Chromatic?
O Chromatic apresenta uma taxa de falsos positivos constatada de 2-5 % em conteúdo dinâmico, contra 8-15 % para o Percy. A comparação otimizada do Chromatic para componentes e sua recalibração automática dos limiares explicam essa diferença. O Percy permanece em uma comparação pixel por pixel, mais sensível a variações de renderização.
Existe uma alternativa gratuita e local ao Chromatic e ao Percy?
Sim. O Delta-QA é uma ferramenta de teste visual no-code que roda localmente, sem transferência de dados para a nuvem e sem limite de capturas. Ele se adequa a equipes que buscam um teste visual soberano e sem custo recorrente. O Playwright Visual Regression é outra opção local gratuita, mas requer competências técnicas.
Como reduzir falsos positivos com o Percy?
As estratégias principais são: configurar zonas de exclusão para conteúdo dinâmico, usar um limiar de tolerância adaptado, estabilizar os dados de teste (datas, conteúdo aleatório) e limitar os viewports aos tamanhos críticos. Esses ajustes reduzem o ruído, mas aumentam a manutenção.
Como migrar do Chromatic ou do Percy para o Delta-QA?
A migração é simples, pois o Delta-QA não depende dos seus testes existentes. Comece a usar o Delta-QA em paralelo, crie suas primeiras referências visuais e avalie os resultados. Uma vez satisfeito, reduza ou interrompa o uso da ferramenta cloud.
Para aprofundar
- Comparativo de Ferramentas de Teste Visual em 2026: Qual Escolher?
- Applitools vs Percy: Comparativo Teste Visual 2026
- Como Escolher uma Ferramenta de Teste Visual: Guia de Compra Completo (2026)
- Playwright vs Puppeteer: Comparativo Teste Visual 2026
Seu teste visual merece mais do que um contador de capturas. Experimente a alternativa local.