Como criar um teste reproduzível de captura de página inteira
Testar uma ferramenta de captura de tela em um feed de notícias aleatório fornece um resultado ambíguo. A página pode mudar entre as execuções, os anúncios podem ser redimensionados, as imagens podem girar e os módulos personalizados podem variar de acordo com a conta. Um teste reproduzível precisa de uma página controlada com recursos conhecidos e um endpoint esperado explícito.
O Screenshot PDF oferece uma página pública de teste para capturas de página inteira. Ela não contém dados do usuário e está marcada como noindex, pois serve para diagnóstico, não como página de destino nos mecanismos de busca. Este artigo explica como usá-la e como criar um registro de aceitação que outra pessoa possa repetir.
O que o acessório contém
A página é independente e não depende de imagens ou APIs de terceiros. Inclui:
- um cabeçalho fixo que deve aparecer uma vez na captura finalizada;
- um controle de canto fixo que não deve se repetir nos cortes posteriores;
- marcadores de secção numerados numa sequência conhecida;
- alternância de superfícies claras e escuras para detecção de costuras visíveis;
- blocos visuais atrasados acionados após entrar na viewport;
- uma tabela densa para alinhamento e inspeção de limites de página;
- um padrão de listras gerado pelo Canvas;
- um ponto final verde final que deve estar presente.
Defina o ambiente de teste
Antes da captura, registre:
| Campo | Formato de exemplo |
| --- | --- |
| Navegador | Versão principal do Chrome |
| Extensão | Captura de tela PDF 0.0.13 |
| Janela de visualização | largura × altura pixels CSS |
| Zoom | percentagem |
| Proporção de pixels do dispositivo | valor informado pelo navegador |
| Modo de captura | página inteira ou sem divisão |
| Tema | claro ou escuro |
| Hora de início | carimbo de data/hora local e fuso horário |
Não compare duas capturas feitas com larguras de janela de visualização diferentes como se fossem o mesmo teste. O layout responsivo pode alterar a altura da seção, quebra de linha, largura da tabela e número de fatias.
Execute a captura da linha de base
Abra o fixture em uma nova aba e recarregue-o. Não role manualmente para a linha de base. Inicie a captura de página inteira e aguarde o editor. Preserve o primeiro resultado antes de tentar soluções alternativas.
Então verifique:
- Os marcadores de seção aparecem em ordem crescente, sem faltar nenhum.
- O cabeçalho fixo aparece no início e não em todos os intervalos da janela de visualização.
- O controle de canto fixo não obscurece as seções posteriores.
- Os blocos atrasados contêm seu padrão de listras final em vez de um espaço reservado vazio.
- As linhas da tabela permanecem alinhadas e nenhuma linha é duplicada.
- Os fundos alternados encontram-se sem uma faixa horizontal ausente ou repetida.
- O ponto final verde é visível.
Se o ponto final estiver faltando, registre o último marcador visível e meça a altura CSS da página. O fluxo de trabalho atual de página inteira é limitado a 15.000 pixels CSS; um dispositivo ou página de usuário intencionalmente mais longo deve ser capturado em seções.
Teste o comportamento de carregamento lento separadamente
Recarregue o fixture, role lentamente de cima para baixo, espere por cada bloco atrasado, volte ao topo e capture novamente. Compare este resultado pré-carregado com a linha de base.
Se a linha de base tiver blocos vazios, mas o resultado pré-carregado estiver completo, o pipeline de captura estará funcionando, mas o atraso no carregamento da página excederá a espera disponível durante a rolagem automatizada. A solução correta é pré-carregar ou seccionar a página, e não rotular a imagem ausente como um erro de costura.
Identifique costuras sem adivinhar
Use os planos de fundo da seção alternada e o padrão de listras do Canvas. Uma faixa faltante cria um salto abrupto na sequência de faixas. Uma sobreposição repete uma faixa ou marcador. Uma mudança dinâmica de altura desalinha o conteúdo através de um limite.
Inspecione o tamanho real do pixel, não apenas o ajuste à janela. Registre a coordenada vertical aproximada e os marcadores imediatamente acima e abaixo do problema. Isso dá ao desenvolvedor um local reproduzível, em vez de “em algum lugar próximo ao meio”.
Verifique a restauração da página de origem
Depois que a captura for bem-sucedida ou falhar, retorne à aba do fixture. Confirmar:
- a página está no topo;
- o cabeçalho fixo e o controle fixo ficam visíveis novamente;
- nenhum elemento de progresso de captura permanece;
- a rolagem ainda funciona;
- o conteúdo atrasado permanece utilizável.
A restauração faz parte do teste porque a extensão altera temporariamente a visibilidade dos elementos flutuantes. Uma saída correta não justifica uma guia de origem deixada em um estado modificado.
Crie uma reprodução que minimize falhas
Se uma seção falhar, reproduza primeiro com o fixture e depois com uma página local reduzida contendo apenas o comportamento relevante. Remova dados privados, autenticação, publicidade, análises e estruturas não relacionadas. Mantenha o menor CSS ou JavaScript necessário para desencadear o problema.
Forneça versões do navegador e da extensão, janela de visualização, zoom, modo de captura, intervalo do marcador, resultado esperado, resultado real e se o pré-carregamento altera o resultado. Anexe evidências recortadas em vez de uma página privada inteira.
Registro de aceitação
Use uma linha por execução:
| Executar | Marcadores concluídos | UI flutuante uma vez | Blocos preguiçosos prontos | Costuras limpas | Ponto final presente | Fonte restaurada | | --- | --- | --- | --- | --- | --- | --- | | Linha de base | aprovado/reprovado | aprovado/reprovado | aprovado/reprovado | aprovado/reprovado | aprovado/reprovado | aprovado/reprovado | | Pré-carregado | aprovado/reprovado | aprovado/reprovado | aprovado/reprovado | aprovado/reprovado | aprovado/reprovado | aprovado/reprovado |
Adicione uma breve nota para cada falha e mantenha a saída original. Um dispositivo reproduzível não pode cobrir todos os sites, mas pode separar regressões em toda a extensão do comportamento dinâmico de um site.
O teste de captura de tela de alta qualidade não consiste em “experimentar várias páginas e ver se ficam bem”. Ele define entradas, expõe casos extremos conhecidos, registra o endpoint, verifica a restauração e produz um resultado que outra pessoa pode repetir sem acesso a informações privadas.