# O que é teste de regressão visual?

URL: https://agentvera.dev/pt/glossary/visual-regression-testing/

O teste de regressão visual compara screenshots de uma interface com imagens de referência aprovadas antes para pegar mudanças visuais não intencionais. Ele encontra bugs que os testes de código deixam passar, como um botão deslocado, um texto transbordando ou um layout mobile quebrado.

**Como funciona.** O método tem quatro passos, repetidos a cada mudança.

- Referência: tire screenshots das páginas no estado aprovado.
- Comparação: depois de uma mudança, capture as mesmas páginas nos mesmos tamanhos e compare pixel a pixel.
- Limite: defina um teto para a parcela de pixels alterados, para que diferenças mínimas não contem como falha.
- Aprovação: se a mudança foi intencional, a nova imagem vira a referência; se não, corrija o bug.

**Por que você precisa dele.** Testes unitários dizem que uma função retorna o valor certo, não que a página está com a aparência certa. Uma mudança de CSS pode quebrar o layout de uma página em que ninguém mexeu. Esses efeitos colaterais são mais comuns quando agentes de código alteram a interface, porque o agente geralmente trabalha sem ver a tela.

**Reduzindo falsos positivos.** Um teste barulhento logo passa a ser ignorado, por isso uma configuração estável importa.

- Desligue animações e transições.
- Congele dados que mudam, como datas, horários e conteúdo aleatório.
- Espere as fontes carregarem e capture sempre no mesmo navegador e sistema operacional.
- Teste em vários tamanhos, como celular, tablet e desktop.

**Ferramentas.** Opções comuns incluem a asserção toHaveScreenshot do Playwright, ferramentas open source como o BackstopJS e serviços hospedados como Percy ou Chromatic. Todas se baseiam na mesma ideia: uma imagem de referência, uma imagem nova e uma imagem de diff que destaca o que mudou.

**Comparação visual no AgentVera.** A aba Preview do AgentVera faz comparações visuais com o servidor de desenvolvimento do projeto e de cada worktree.

- **Teste de regressão visual é a mesma coisa que snapshot testing?** Ideia parecida, alvo diferente. Testes de snapshot geralmente comparam o HTML ou a saída de texto de um componente; testes de regressão visual comparam screenshots de verdade.
- **Por que comparações de pixels dão falhas falsas?** Renderização de fontes, anti-aliasing, animações e conteúdo que muda podem deslocar alguns pixels. Um limite e um ambiente estável cortam esse ruído.
- **Quais páginas devo testar?** Comece pelas mais usadas e mais frágeis: a página inicial, o login, o checkout ou os fluxos de formulário. Capture cada uma em vários tamanhos de tela.

---

**Sobre o AgentVera.** AgentVera é um app desktop para macOS, Windows e Linux, desenvolvido pela Solviera Teknoloji. Ele roda 18 agentes de programação com IA (Claude Code, Codex, Gemini CLI, Copilot, Cursor, Antigravity, opencode, Hermes, Qwen Code, Kimi Code, Kiro, Amp, Droid, Goose, Vibe, Crush, Aider, Cline) lado a lado, por projeto, em terminais reais com as instalações e logins de CLI do próprio usuário. O plano gratuito tem agentes ilimitados. Baixar: https://agentvera.dev/pt/download/ · Preços: https://agentvera.dev/pt/pricing/