Regressão visual: modificação não intencional na aparência de uma interface de usuário — layout, cores, tipografia, espaçamento, alinhamento — introduzida por uma mudança de código, atualização de dependência ou modificação de configuração, detectável apenas por comparação visual entre dois estados da interface.
Aqui vai uma verdade que muitas equipes que utilizam Cypress preferem ignorar: a sua suite de testes Cypress, por mais completa e robusta que seja, é estruturalmente cega a uma categoria inteira de bugs. Regressões visuais atravessam as suas assertions como água por uma peneira — não porque os seus testes estejam mal escritos, mas porque o Cypress simplesmente não foi projetado para detectá-las.
Isso não é uma crítica ao Cypress. É uma constatação objetiva. E a diferença entre uma constatação e uma crítica é que a constatação exige uma solução, não um debate filosófico.
Cypress: Excelente no Que Faz, Ausente Onde Importa Visualmente
O Cypress revolucionou os testes front-end quando chegou ao mercado. Execução dentro do navegador, recarregamento automático, time-travel debugging, API fluida e encadeada — tudo isso tornou os testes end-to-end acessíveis a equipes que antes consideravam o Selenium um instrumento medieval de tortura. Para testes funcionais, o Cypress continua sendo uma ferramenta notável e insubstituível.
Mas faça a si mesmo a seguinte pergunta: quando foi a última vez que você escreveu um teste Cypress que verifica se a sua página inicial parece correta? Não se um botão existe. Não se um texto está presente. Que ela parece correta — que o espaçamento está adequado, que as cores são coerentes, que o layout não sofreu deslocamentos indesejados.
A resposta, para a esmagadora maioria das equipes, é "nunca." E isso não é negligência. É porque o Cypress não oferece nenhuma funcionalidade nativa de teste visual. Nenhuma. Absolutamente nada na caixa.
O Ponto Cego do Cypress: Sem Comparação Visual Nativa
Quando você escreve cy.get('.button').should('be.visible'), você verifica que o elemento existe no DOM e não está oculto por CSS. Você não verifica se ele tem a cor correta, se está na posição correta, se o texto é legível, ou se não se sobrepõe a outro elemento.
Um botão pode ser "visível" nos termos do Cypress e ser completamente inutilizável do ponto de vista visual. Texto branco sobre fundo branco. Tamanho de 2x2 pixels. Posicionado 3000 pixels fora da tela. O Cypress dirá que está tudo perfeito. O seu usuário dirá o contrário.
Bugs visuais representam até 70% dos problemas reportados em produção segundo estudos da Forrester. E o Cypress, nativamente, não detecta nenhum deles.
Plugins Visuais do Cypress: Uma Solução Parcial e Frágil
O ecossistema do Cypress produziu plugins de teste visual que dependem de serviços de terceiros — Percy, Applitools, Happo, entre outros. Eles funcionam, é verdade, mas com limitações significativas que comprometem a sua confiabilidade a longo prazo.
Independência de testes funcionais. Delta-QA escaneia páginas diretamente. Você pode testar visualmente 200 páginas sem escrever um único teste funcional.
Complexidade de configuração. Instalar um pacote npm, configurar autenticação, modificar os testes existentes, gerenciar tokens de API, treinar a equipe na plataforma externa — tudo isso consome tempo e recursos que poderiam ser investidos em testes reais.
Manutenção dupla. Dois sistemas para manter. Atualizações do Cypress podem quebrar o plugin. Mudanças na API do serviço podem falhar os seus testes de um dia para o outro sem aviso prévio.
Cobertura limitada pela cobertura funcional. A cobertura visual depende inteiramente da cobertura funcional. Não tem teste Cypress para a página de FAQ? Também não terá teste visual para ela. É um gargalo estrutural impossível de contornar.
Delta-QA: O Teste Visual como Disciplina Autônoma
O Delta-QA aborda o teste visual de forma radicalmente diferente. Não é um recurso enxertado numa ferramenta de teste funcional. É uma disciplina independente, com sua própria lógica, seus próprios fluxos e sua própria cobertura.
Independência total dos testes funcionais. O Delta-QA escaneia páginas diretamente. Não é necessário nenhum teste funcional como veículo. Você pode testar visualmente 200 páginas sem escrever uma única linha de teste funcional. A cobertura visual deixa de ser refém da cobertura funcional.
Acessibilidade para não desenvolvedores. Designers, QAs manuais, product owners — as pessoas mais competentes para julgar a qualidade visual — podem usar o Delta-QA de forma totalmente autônoma. Com o Cypress mais um plugin visual, eles dependem de um desenvolvedor para tudo.
Cobertura exaustiva. Fluxo de aprovação. Redução de falsos positivos. Histórico visual.
Teste cross-browser integrado. O Delta-QA testa nativamente em múltiplos navegadores sem configuração adicional. Chrome, Firefox, Edge, Safari — todos cobertos sem esforço extra.
Cypress verifica que sua aplicação funciona. Delta-QA verifica que parece correta. Ambos no pipeline CI/CD. A combinação dá cobertura QA que nenhum pode oferecer sozinho.
FAQ
O Cypress vai adicionar teste visual nativo? Sem anúncio até o momento. Mesmo que fosse adicionado, permaneceria acoplado à execução de testes funcionais — preservando o problema da cobertura acoplada.
Os plugins visuais do Cypress não são suficientes? Para uso básico, podem ajudar. Mas adicionam dependência de terceiros, acoplam a cobertura visual à cobertura funcional e exigem manutenção contínua de dois sistemas distintos.
O Delta-QA pode detectar bugs que o Cypress não pode? Sim, por definição. Regressões CSS, problemas responsivos, conflitos de z-index, fontes ausentes — invisíveis para as assertions do Cypress, mas prontamente detectados pelo Delta-QA.
O Delta-QA torna o pipeline CI/CD mais lento? O Delta-QA executa em paralelo com os testes do Cypress. A duração total do pipeline não muda se ambas as etapas executarem simultaneamente.
Preciso escolher entre o Cypress Cloud e o Delta-QA? Não. Eles servem objetivos diferentes. O Cypress Cloud otimiza testes funcionais. O Delta-QA cobre a dimensão visual que o Cypress Cloud não aborda. São investimentos complementares, não concorrentes.
Minha equipe QA não técnica pode usar o Delta-QA sem ajuda de desenvolvedor? É exatamente para isso que o Delta-QA foi projetado. A interface no-code permite que testadores, designers e product owners configurem, executem e interpretem testes visuais sem nenhuma habilidade de desenvolvimento.
Para aprofundar
- Teste Visual Remix: Por Que um Framework Full-Stack Torna o Teste Visual Ainda Mais Crítico
- Teste Visual para Ruby on Rails: Por Que as View Specs Não Bastam e Como o Teste Visual Preenche a Lacuna
O Cypress é uma ferramenta notável para aquilo que faz. Mas exigir que cubra o teste visual — por meio de plugins, gambiarras ou assertions CSS improvisadas — é impor uma missão para a qual não foi projetado. Liberte o Cypress. Deixe-o fazer o que faz de melhor: testar que a sua aplicação funciona. E confie o teste visual a uma ferramenta construída especificamente para isso.