Skip to main content

Teste de Regressão Visual com Capturas de Screenshot

Equipes de desenvolvimento usam o Webshot para pegar justamente os bugs que os testes unitários deixam passar — layouts quebrados, fallbacks de fonte, ícones sumidos, estados responsivos com defeito. Capture o staging, capture a produção e compare o par. Anexe o diff em um comentário de PR como prova de que sua mudança é segura (ou de que o bug novo acabou de aparecer).

🖥️ Desktop página inteira (PNG, diffs nítidos) 📱 Mobile página inteira ⚙️ Usar a API gratuita

Todos os botões abrem o formulário de captura já pré-configurado. Você pode alterar o formato e o viewport assim que a página carregar.

Por que usar o Webshot para isso

Capturas com precisão de pixel

O modo PNG preserva texto e bordas nítidos — ideal para ferramentas de pixel-diffing (`pixelmatch`, `compare` do ImageMagick), em que o ruído de compressão do JPG geraria falsos positivos.

O mesmo viewport, sempre

O Webshot captura com exatamente o mesmo viewport, a mesma posição de rolagem e o mesmo tempo de espera pelo carregamento das fontes em toda execução — os resultados do diff são confiáveis.

Pronto para API

Conecte a API gratuita do Webshot ao seu CI: capture antes e depois do deploy, compare com `pixelmatch` e falhe o build se os pixels alterados passarem do limite.

Sem boilerplate de Chrome headless

Esqueça a configuração do Puppeteer, a instalação de fontes e as flags de sandbox. O Webshot mantém tudo isso rodando na nossa infraestrutura. Seu CI faz só uma chamada HTTP.

Como fazer testes de regressão visual

  1. Escolha a(s) página(s) que você quer monitorar — home, landing pages importantes, fluxo de checkout, qualquer lugar onde uma regressão doeria.
  2. Capture cada uma em PNG + desktop_full + mobile_full para registrar a baseline do visual atual da sua produção.
  3. Depois do próximo deploy, capture as mesmas URLs de novo. Compare o antes e o depois com `pixelmatch` ou ImageMagick — qualquer coisa acima de 1% de pixels alterados merece revisão humana.
  4. Integre ao CI: um hook pré-deploy captura o staging, um hook pós-deploy captura a produção, e o build falha se o diff ultrapassar o seu limite.

Perguntas frequentes

Rodar o Chrome headless no CI significa instalar o Chromium, as fontes e as flags de kernel do sandbox — e ainda manter tudo isso atualizado. Com o Webshot, você pula a instalação por completo: seu CI faz uma chamada HTTP para a nossa API e recebe um PNG de volta. Nós cuidamos das atualizações do Chrome, do cache de fontes e da proteção contra SSRF.

Sim, desde que você use PNG + o mesmo viewport + a mesma estratégia de espera. O Webshot fixa o tamanho do viewport e aguarda fonts.ready + network-idle + qualquer animação declarada via media query `prefers-reduced-motion`. Animações aleatórias (loops de Lottie, fundos baseados em Date.now()) geram um diff diferente a cada execução; congele esses elementos no seu ambiente de testes.

Não em uma chamada só — você captura cada URL separadamente e depois compara as duas com uma biblioteca à parte. Mantemos a API focada na captura; o diff é um script de 30 linhas. Veja exemplos de código em `/developers`.

Sim. O Webshot aguarda o network-idle (nenhuma requisição por 500ms) e o fonts.ready antes de capturar, então apps em React, Vue, Svelte e Next.js renderizam por completo antes do screenshot. Para sites que nunca chegam ao network-idle (long polling, websockets), você pode passar o parâmetro `maxWait` pela API.

O formulário público gratuito permite 5 a cada 15 minutos por IP — pouco para CI. O plano gratuito da API é mais generoso; veja `/developers`. Para testes de regressão em alto volume (50+ capturas por build), o plano comercial da API remove os limites por IP.

O Webshot em si só captura — a camada de diff fica por sua conta. Solução de duas linhas: `npx pixelmatch baseline.png new.png diff.png`. Ou use um serviço gerenciado de diff visual (Percy, Chromatic, BackstopJS) e alimente-o com os PNGs do Webshot.

Pronto para capturar?

Grátis, sem cadastro, sem marca d’água. É só colar uma URL.

📸 Abrir o formulário de captura

Outros casos de uso: Screenshots do Google Maps · Screenshots de WordPress · QA de Landing Pages · Screenshots para Provas Jurídicas · Screenshots para Redes Sociais · Screenshots no Fluxo de Desenvolvimento · Ver todos →

Share: 𝕏 Twitter Facebook LinkedIn