Blog

Como usar capturas de tela em uma revisão de código ou pull request

Publicado em 25 de outubro de 2026 · revisão de código, pull request, capturas de tela, fluxo de trabalho

Mudanças de interface são difíceis de revisar só pelo diff. Um conjunto de capturas — antes e depois, anotado, com o estado que importa — torna o pull request revisável.

Um pull request que muda o comportamento de um botão, a validação de um formulário ou um estado de carregamento é difícil de julgar por um diff. Os revisores acabam fazendo checkout da branch, recompilando e caçando a tela que você quis dizer. Um conjunto pequeno e bem-feito de capturas elimina esse trabalho.

Capture antes e depois

Para qualquer mudança visível, capture a mesma tela duas vezes:

1. Na branch base, capture a área afetada.
2. Na sua branch, capture a área idêntica na mesma largura de janela e no mesmo zoom.
3. Guarde as duas capturas; não corte uma mais justa que a outra.

Igualar a viewport, o zoom do navegador e o tamanho da janela é o que torna a comparação significativa. Se o layout for responsivo, capture as larguras que importam (por exemplo, 1280 e 390) e rotule-as.

Anote apenas a diferença

O revisor precisa saber onde olhar, não fazer um tour completo:

• Números para várias mudanças em uma captura: 1 é o novo estado vazio, 2 é a mensagem de erro.
• Formas para contornar a área que mudou.
• Texto para o comportamento esperado, curto.
• Mosaico ou desfoque para qualquer coisa privada: nomes de clientes, e-mails, tokens, URLs internas.

Não anote a tela inteira. Se a mudança é um controle, uma seta e uma frase bastam.

Grave a interação quando uma imagem estática não basta

Algumas mudanças só fazem sentido em movimento: um menu suspenso que fechava cedo demais, um indicador de carregamento que agora resolve, uma interação de arrastar. Grave de 10 a 20 segundos com Gravação rápida e anexe o MP4 ou, para uma revisão amigável a incorporação, um GIF (Pro).

• Mostre primeiro o comportamento com falha, depois o corrigido, em um único clipe se possível.
• Desligue o microfone, a menos que a narração acrescente algo; um clipe silencioso é reproduzido com segurança.
• Mantenha o clipe curto o bastante para assistir duas vezes.

Coloque a evidência no pull request

Uma estrutura previsível economiza o tempo do revisor:

1. O que mudou em uma frase.
2. Imagens de antes / depois, lado a lado ou empilhadas sempre na mesma ordem.
3. Como reproduzir o estado da captura, se não for a tela padrão.
4. O que verificar — a uma ou duas coisas que podem regredir.
5. Ambiente, se importar: sistema, navegador, escala do monitor.

Anexe as imagens diretamente ao pull request em vez de linkar para um drive pessoal. Se você usar um link de compartilhamento, lembre-se de que ele pode expirar ou exigir senha; para revisão de código, um anexo costuma ser melhor.

Mantenha o conjunto pequeno

Revisores passam os olhos. Três capturas focadas são lidas; quinze são puladas.

• Um par por mudança visível.
• Corte a moldura do navegador e os painéis sem relação.
• Comprima ou redimensione imagens que só estão ali para contexto; mantenha a resolução total para mudanças de nível de pixel.
• Exclua as capturas que repetem o mesmo estado de um ângulo ligeiramente diferente.

Uma checklist antes de enviar

Perguntas frequentes

Devo anexar capturas de tela ou uma gravação de tela?

Imagens estáticas para estados, um clipe curto para interações. Uma gravação de 10 a 20 segundos basta para mostrar uma transição; qualquer coisa mais longa costuma ser pulada.

Como escondo dados de clientes em uma captura para revisão?

Use Mosaico com uma configuração forte para nomes e IDs, uma cobertura sólida para segredos, ou corte a região. O desfoque é mais fraco que o mosaico e não deve ser usado para nada sensível.

Preciso do Pro para fazer capturas de revisão?

Não para captura, anotação, numeração, mosaico e gravação básica em MP4. A exportação em GIF, o Apagar inteligente e os efeitos do editor de vídeo são recursos Pro, mas um conjunto de imagens estáticas mais um MP4 cobre a maioria das revisões de graça.

Mais do blog