Regressão visual: mudança não intencional na aparência de uma interface de usuário (layout, cores, tipografia, espaçamento, alinhamento), introduzida por uma modificação de código, uma atualização de dependência ou uma mudança de configuração, e detectável apenas por comparação automatizada entre dois estados da interface.
O Lost Pixel soube conquistar um espaço interessante no ecossistema do teste visual. Open source, especializado em componentes Storybook e Ladle, integrável em pipelines de CI: era uma ferramenta que falava diretamente aos desenvolvedores front-end que vivem no universo dos componentes.
Atualização (10/2026). Em 22 de abril de 2026, os fundadores do Lost Pixel anunciaram o encerramento do produto: a equipe vai para o Figma. O repositório do GitHub está arquivado, e a última versão publicada no npm (3.22.0) é de novembro de 2024. O código continua disponível sob licença MIT, mas não vai mais evoluir. Este comparativo mantém sua descrição da ferramenta, útil se você ainda a utiliza, e ajuda a escolher o próximo passo.
Mas eis a pergunta que ninguém faz cedo o bastante na avaliação: a sua necessidade é testar componentes isolados no Storybook, ou é verificar se o seu site funciona visualmente em condições reais?
A resposta a essa pergunta determina para onde migrar: outra ferramenta centrada em componentes, ou uma abordagem que testa suas páginas reais, como o Delta-QA. E essa resposta depende menos da tecnologia do que da composição da sua equipe e da natureza dos seus problemas de qualidade visual.
Todos os nossos comparativos, com critérios verificáveis: Alternativas e comparativos.
Detectar regressões visuais sem mexer no npm nem em um arquivo de configuração. O Delta-QA é usado em no-code, com uma conta gratuita e sem cartão de crédito. Testar o Delta-QA grátis →
Lost Pixel: o especialista em componentes
O Lost Pixel é uma ferramenta open source de teste de regressão visual, agora arquivada. Seu terreno preferido: Storybook, Ladle, Histoire (os ambientes de desenvolvimento de componentes de UI) e páginas web estáticas. A ferramenta captura screenshots dos seus componentes ou páginas e os compara entre as execuções para detectar mudanças visuais.
A integração com o Storybook como ponto forte
Se você desenvolve com Storybook (e em 2026, a maioria das equipes front-end de React, Vue ou Angular o faz), o Lost Pixel se conecta diretamente ao seu catálogo de stories. Cada story vira automaticamente um teste visual. Sem precisar listar manualmente as páginas a testar ou escrever cenários de navegação: seu catálogo do Storybook é a sua suíte de testes visuais.
É uma proposta de valor clara e imediatamente compreensível para um desenvolvedor front-end. Você já mantém suas stories para documentação e desenvolvimento de componentes. O Lost Pixel as transforma em testes de regressão visual sem esforço adicional.
A ferramenta também suporta o Ladle (a alternativa leve ao Storybook) e o Histoire (para Vue), o que cobre o essencial do ecossistema de desenvolvimento de componentes. E além dos componentes, o Lost Pixel pode testar páginas web completas no modo "page shots".
Uma ferramenta pensada por e para desenvolvedores
O Lost Pixel se instala via npm, é configurado em um arquivo de configuração TypeScript ou JavaScript e roda pela linha de comando. A integração com CI é documentada para o GitHub Actions, e a plataforma Lost Pixel (em versão cloud) acrescentava um fluxo de revisão e aprovação das baselines; com o encerramento anunciado, não conte mais com ela para um novo projeto.
A curva de aprendizado é razoável para um desenvolvedor. Se você conhece npm, arquivos de configuração e GitHub Actions, pode estar operacional em menos de uma hora. É mais simples do que um Applitools ou um Percy: o Lost Pixel não te afoga em opções e integrações.
Mas essa simplicidade para desenvolvedores é uma barreira para todos os outros. Se você não é desenvolvedor, instalar um pacote npm, escrever um arquivo de configuração e configurar uma GitHub Action é tão acessível quanto pilotar um submarino sem treinamento.
A comparação pixel a pixel
O Lost Pixel compara screenshots: imagens capturadas dos seus componentes ou páginas. É a abordagem mais intuitiva e mais difundida no teste visual. Você vê literalmente o que mudou, sobreposto a uma imagem.
Essa abordagem tem um mérito inegável: é visual. O relatório mostra as diferenças de forma gráfica. Você não precisa entender CSS para ver que um botão se moveu ou que uma cor mudou.
Mas ela também tem uma fraqueza estrutural: a sensibilidade ao ruído de renderização. Variações de anti-aliasing entre duas renderizações, diferenças de fontes entre o ambiente local e a CI, animações não sincronizadas: tudo isso gera falsos positivos. O Lost Pixel oferece um limiar de tolerância configurável, mas calibrá-lo corretamente é uma arte delicada: sensível demais e você se afoga em falsos positivos, tolerante demais e as regressões reais passam despercebidas.
Delta-QA: o teste visual para toda a equipe
O Delta-QA parte de uma constatação simples: o teste visual não deveria ser reservado a desenvolvedores. As pessoas mais qualificadas para julgar a qualidade visual de uma interface (designers, QAs funcionais, product owners) costumam ser excluídas do processo porque as ferramentas existentes exigem habilidades técnicas.
Os desenvolvedores não ficam de fora por isso: quem escreve seus testes em Playwright agora dispõe do SDK Vision, uma linha por página a verificar, no mesmo espaço dos cenários gravados sem código.
A abordagem no-code
Com o Delta-QA, você cria uma conta gratuita. Informa a URL do seu site. Navega normalmente, como um usuário faria. Cada etapa do percurso vira um ponto de controle. Na execução seguinte, o Delta-QA reproduz o percurso em um navegador de verdade, compara cada página com sua referência e mostra o que mudou.
Sem npm. Sem arquivo de configuração. Sem linha de comando. Sem GitHub Actions. Se você sabe usar um navegador web, sabe usar o Delta-QA.
Essa acessibilidade não é um compromisso na potência da ferramenta: é uma escolha de design que amplia consideravelmente o conjunto de pessoas capazes de contribuir para a qualidade visual. Um designer pode verificar se suas especificações foram respeitadas. Um QA funcional pode integrar o teste visual à sua rotina de validação. Um product owner pode se certificar de que uma implantação não quebrou nada visualmente antes de dar o sinal verde.
A comparação como faria o olho humano em vez de pixels
Onde o Lost Pixel compara imagens pixel a pixel, o Delta-QA compara a página como faria uma pessoa e apresenta a mudança com clareza. É uma diferença fundamental que muda a natureza dos resultados.
Quando o Delta-QA sinaliza uma mudança, ele não mostra um retângulo colorido sobre uma imagem. Diz exatamente o que aconteceu: "a font-size do título passou de 24px para 20px", "a cor de fundo do header mudou de #FFFFFF para #F8FAFC", "o padding do botão diminuiu de 16px para 12px".
Essas informações são diretamente acionáveis. Você sabe o que corrigir, em qual regra CSS procurar e como verificar que a correção foi efetiva. Com uma comparação de imagens, você sabe que algo mudou visualmente: descobrir o quê exatamente exige uma investigação manual.
Essa abordagem também limita os falsos positivos. Uma variação de anti-aliasing ou de subpixel não muda nem a cor, nem o tamanho, nem a posição de um elemento: não há razão para sinalizá-la. O que resta para julgar são as mudanças que realmente afetam a página.
A opção On-Premise
Para as organizações que exigem, o Delta-QA oferece uma versão On-Premise instalada em Docker na sua infraestrutura: nenhum dado sai da sua rede, nenhum screenshot é enviado a um servidor remoto.
O SaaS continua sendo a entrada mais rápida: conta gratuita, sem cartão de crédito. A oferta On-Premise, por sua vez, pode ser avaliada com um POC gratuito de um mês.
O debate central: componentes isolados vs páginas reais
A escolha entre Lost Pixel e Delta-QA esconde um debate mais profundo sobre o que significa realmente "testar visualmente" uma aplicação.
A abordagem por componentes: necessária, mas insuficiente
O Lost Pixel, via sua integração com o Storybook, testa componentes isolados. Cada componente é renderizado individualmente, em um ambiente controlado, com props definidas. É excelente para detectar regressões no nível do componente: um botão cujo border-radius mudou, um campo de texto cujo placeholder desapareceu, um badge cuja cor ficou incoerente.
Mas os bugs visuais de maior impacto não acontecem no nível do componente isolado. Acontecem quando os componentes se montam em uma página real. Um componente de navegação que empurra o conteúdo 50 pixels para baixo. Um footer que se sobrepõe ao conteúdo principal no mobile. Uma grade de cards que quebra quando um texto é mais longo do que o previsto. Um modal que deixa de centralizar corretamente quando a janela é redimensionada.
Esses problemas de integração visual são invisíveis no Storybook, porque o Storybook não mostra a integração: mostra os tijolos individuais. É como testar cada engrenagem de um relógio separadamente e concluir que o relógio funciona. As engrenagens podem ser perfeitas individualmente e não se encaixar direito depois de montadas.
A abordagem por páginas: a realidade do usuário
O Delta-QA testa páginas reais, em um navegador real, com o HTML, o CSS, o JavaScript e as interações reais da sua aplicação. Quando o Delta-QA diz que a sua página está visualmente correta, é porque ela está nas condições em que seus usuários a verão.
Não é uma abstração, nem um ambiente isolado, nem uma renderização parcial. É a sua página, como um todo, com todas as interações entre componentes, todos os estilos herdados, todas as sobrescritas de CSS, todos os efeitos de cascata.
Essa abordagem captura os bugs de integração visual que os testes de componentes isolados deixam passar estruturalmente. Captura também os problemas ligados a dados reais: um nome de 40 caracteres que transborda de um campo, um preço de 5 dígitos que quebra um layout, uma imagem ausente que colapsa um layout.
Open source para Storybook é poderoso, mas exige configuração. O Delta-QA detecta suas regressões visuais sem uma linha de configuração: conta gratuita, no-code e sem cartão de crédito. Testar o Delta-QA grátis →
O que o Lost Pixel fazia bem
Seus pontos fortes explicam por que equipes o adotaram, e o que será preciso reencontrar em outro lugar.
A integração nativa com o Storybook. Se você mantém um catálogo Storybook, o Lost Pixel o transforma em suíte de testes visuais sem esforço. Cada story vira um teste. É uma proposta de valor excepcional para equipes centradas em componentes.
A automação de CI/CD. O Lost Pixel se integra naturalmente a um pipeline de GitHub Actions. Os testes visuais disparam automaticamente a cada pull request, sem intervenção humana. A cobertura é contínua e sistemática.
O custo. O Lost Pixel é open source e a versão self-hosted era gratuita. A plataforma cloud era paga, a preços acessíveis; ela é afetada pelo encerramento anunciado.
A granularidade por componente. Testar cada componente individualmente permite localizar as regressões no nível mais fino. Quando um componente muda, você sabe imediatamente qual, sem precisar procurar em uma página completa. É um fluxo eficaz para desenvolvedores que trabalham componente por componente.
O open source. O código continua legível e reutilizável sob licença MIT. Mas um repositório arquivado não recebe mais correções: a cada atualização do Storybook, do Playwright ou do Node.js, cabe a você garantir a compatibilidade.
O que o Delta-QA traz a mais
A acessibilidade total. Nenhum pré-requisito técnico. Sem npm, sem CLI, sem arquivo de configuração, sem GitHub Actions. Se você sabe navegar em um site, sabe usar o Delta-QA.
A qualidade dos resultados. Cada diferença é associada a um elemento da página e descrita com clareza. Você sabe o que mudou: não apenas "algo mudou visualmente neste retângulo".
A cobertura de integração. O Delta-QA testa páginas completas, não componentes isolados. Captura os bugs de integração visual que os testes de componentes deixam passar por design: problemas de layout, conflitos de estilos, efeitos de dados reais sobre o layout.
A soberania dos dados. Com a instalação On-Premise, nenhum dado sai da sua rede: nenhum serviço de nuvem de terceiros, nenhuma transferência externa. Para empresas sujeitas ao RGPD ou a políticas de segurança rígidas, é uma vantagem estrutural.
O tempo de implantação. Da criação da conta ao primeiro percurso gravado, conte alguns minutos com o Delta-QA. Com o Lost Pixel, era preciso instalar o pacote, escrever a configuração, ter um Storybook funcionando, configurar a CI: mais perto de uma a duas horas para um desenvolvedor experiente.
O envolvimento de toda a equipe. O teste visual sem código com o Delta-QA é uma atividade colaborativa. Designers, QAs, product owners e desenvolvedores podem todos participar, ler os resultados e aprovar ou rejeitar as mudanças.
O caso típico: por que apenas componentes não bastam
Tomemos um cenário que toda equipe front-end já viveu. Você tem um design system com um componente Card usado em todo o seu site. Cada Card tem um título, uma imagem, uma descrição e um botão. No Storybook, o componente está perfeito: testado visualmente, todas as variantes cobertas.
Um dia, um desenvolvedor modifica o CSS global do site. Ele muda a variável global do line-height para melhorar a legibilidade. Os testes dos componentes do Storybook passam: o line-height global não afeta as stories isoladas, que têm seu próprio contexto. Em produção, a página de catálogo que exibe 12 Cards em grade está completamente quebrada: o texto mais alto empurra os botões, os Cards não têm mais a mesma altura, a grade fica visualmente incoerente.
Esse bug é invisível no Storybook e, portanto, em uma ferramenta que só testa as stories. É visível no Delta-QA, porque o Delta-QA testa a página real com o CSS global aplicado.
Não é um caso extremo nem artificial. É o dia a dia do desenvolvimento front-end: os componentes vivem em um ecossistema, e seu comportamento visual depende desse ecossistema. Testar os componentes isoladamente é necessário, mas é uma condição necessária, não suficiente.
O veredito: o que usar no lugar do Lost Pixel
Se a sua necessidade é centrada no Storybook, procure uma ferramenta de componentes mantida: o Chromatic, produzido pela equipe do Storybook, é o exemplo mais direto (veja nosso comparativo Chromatic e Delta-QA e nossas pistas para um teste visual de Storybook sem Chromatic). O Lost Pixel continua executável como está, mas sem correções.
Escolha o Delta-QA se sua equipe inclui perfis não técnicos que precisam participar do teste visual. Se você precisa testar páginas completas e percursos, não apenas componentes isolados. Se quer resultados legíveis, associados aos elementos da página. Se a soberania dos dados é um critério, com a oferta On-Premise. Se quer ficar operacional em minutos, não em horas.
Combine os dois níveis se quiser uma cobertura completa: uma ferramenta de componentes no pipeline de CI para vigiar os tijolos básicos, e o Delta-QA para testar as páginas completas, envolver os perfis não técnicos e verificar a integração visual antes de cada release.
Pronto para testar suas páginas reais sem configurar nada? Rode sua primeira comparação com o Delta-QA, com uma conta gratuita e sem cartão de crédito. Testar o Delta-QA grátis →
Perguntas frequentes
O Lost Pixel ainda é mantido?
Não. Em 22 de abril de 2026, seus fundadores anunciaram o encerramento do produto e sua ida para o Figma. O repositório do GitHub está arquivado e a última versão do npm (3.22.0) é de novembro de 2024. O código continua utilizável sob licença MIT, mas sem correções nem evoluções: planeje uma migração.
O Delta-QA pode testar componentes do Storybook como o Lost Pixel?
O Delta-QA testa páginas web completas, não componentes isolados no Storybook. Se você acessa o seu Storybook por um navegador, tecnicamente pode testar suas stories com o Delta-QA, mas esse não é o uso principal. A força do Delta-QA é testar a integração real dos seus componentes em páginas completas: exatamente o que o Lost Pixel não cobre.
O Delta-QA detecta os mesmos problemas que a comparação por pixel do Lost Pixel?
O Delta-QA detecta as mudanças visíveis dos elementos: cores, tamanhos, margens, fontes, posições, bordas, dando o detalhe de cada mudança. Já as mudanças internas a uma imagem modificada ou um conteúdo textual diferente são detectados de forma diferente pelas duas abordagens.
É preciso ter Storybook para usar o Lost Pixel?
Não, o Lost Pixel também podia testar páginas web completas no modo "page shots". Mas sua integração com o Storybook era sua principal proposta de valor. Para o teste de páginas, outras ferramentas mantidas, entre elas o Delta-QA, assumem o lugar.
Qual ferramenta é mais rápida de colocar em funcionamento?
O Delta-QA. Criação da conta, abertura do seu site, navegação: seu primeiro percurso fica gravado em poucos minutos. O Lost Pixel exigia npm, um arquivo de configuração, um Storybook (ou um modo de páginas) operacional e, idealmente, um pipeline de CI configurado: uma a duas horas para um desenvolvedor experiente.
Como migrar do Lost Pixel para o Delta-QA?
As baselines do Lost Pixel são imagens próprias da sua lógica de pixel: elas não são transferidas. Você grava seus percursos principais no Delta-QA, que cria suas próprias referências na primeira passagem. Para os testes Playwright dos seus desenvolvedores, o SDK Vision adiciona uma verificação do Delta-QA em uma linha por página.