.png)
.svg){kind=icon}
14 de março de 2025
.
9
min ler
Tirando screenshots com o Puppeteer: capturas de página inteira, elementos e otimização de tamanho
Jorge Miloradovitch
Pesquisador, redator e entrevistador de casos de uso
Marionetista é um Node.js biblioteca que simplifica a automação do navegador, tornando tarefas como tirar screenshots rápidas e eficientes. Se você precisa de capturas de página inteira, snapshots de elementos específicos ou imagens otimizadas, Marionetista oferece opções flexíveis com código mínimo. Aqui está o que você pode fazer com Marionetista:
await page.screenshot({ path: 'screenshot.jpg', fullPage: true });
Seja você um desenvolvedor testando sites ou documentando erros, o Puppeteer simplifica o processo com ferramentas poderosas e comandos simples.
O Latenode oferece integração direta com a biblioteca Puppeteer sem precisar instalar nada no seu sistema. Basta escolher um nó da biblioteca de nós de integração, adicioná-lo ao seu cenário de automação, adicionar um script para captura de tela e vinculá-lo a outros nós. Aqui estão algumas vitrines. Dê uma olhada nelas e escolha o que atende às suas necessidades!
Esta ferramenta de automação foi projetada para analisar e resumir o conteúdo da web capturando e processando capturas de tela de sites específicos. Ao usar um navegador headless e integrar com IA, ele permite que você extraia insights importantes de páginas da web. Ótimo para monitorar alterações de sites, analisar concorrentes ou reunir dados visuais para relatórios.
Este cenário automatizado é projetado para coletar e processar resultados de pesquisa na web. Use o navegador headless e o código Javascript assistido por IA para coletar informações de mecanismos de busca, capturar capturas de tela para referência e salvar os dados para análise posterior. Esta ferramenta é ideal para pesquisa de mercado ou qualquer tarefa que exija coleta automatizada de dados da web.
Clone este modelo pronto para extrair quaisquer dados de produtos do Ebay!
Esta ferramenta analisa avaliações on-line para uma empresa específica, fornecendo insights acionáveis por meio de análise orientada por IA. O navegador headless é usado para navegar, capturar imagens e coletar avaliações, enquanto o DeepSeek AI ajuda na análise detalhada. Ótimo para monitorar a reputação da marca, melhorar o atendimento ao cliente e tomar decisões orientadas por dados.
Siga estas etapas para configurar o Puppeteer e começar a capturar conteúdo da web. Uma configuração adequada garante um desempenho suave para várias necessidades de captura de tela, seja de página inteira, elementos específicos ou capturas com tamanho otimizado.
Depois de adicionar o nó Headless Browser, crie uma nova instância do navegador com o seguinte código:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({
headless: true,
defaultViewport: { width: 1280, height: 720 }
});
const page = await browser.newPage();
await page.goto('https://example.com');
})();
Isso configura seu ambiente, permitindo que você capture imagens de tela com precisão.
Para refinar suas capturas de tela, ajuste as configurações da viewport. Aqui está uma análise dos principais parâmetros:
| Parâmetro | Valor padrão | Configuração recomendada | Propósito |
|---|---|---|---|
| Largura | 800px | 1280px | Corresponde à resolução comum da área de trabalho |
| Altura | 600px | 720px | Fornece uma proporção de aspecto padrão de 16:9 |
| Fator de escala | 1 | 1 | Mantém o tamanho original |
| Modo móvel | falso | falso | Garante a renderização da área de trabalho |
Use o código a seguir para configurar esses parâmetros:
await page.setViewport({
width: 1280,
height: 720,
deviceScaleFactor: 1,
isMobile: false
});
await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36');
"No Puppeteer, a manipulação da janela de visualização é particularmente significativa para tarefas como web scraping, teste de aplicativos da web em diferentes dispositivos e geração de capturas de tela ou PDFs de páginas da web." - Webshare
Para conteúdo dinâmico, defina um tempo limite para compensar atrasos no carregamento:
page.setDefaultTimeout(30000); // 30 seconds timeout
Com essas configurações, você está pronto para capturar capturas de tela de alta qualidade adaptadas às suas necessidades.
Aprenda a fazer capturas de tela de página inteira com o Puppeteer usando configurações específicas, métodos de rolagem e técnicas de solução de problemas.
Para capturar uma página da web inteira, incluindo conteúdo fora da área visível, use o Puppeteer's página inteira opção:
await page.screenshot({
path: 'complete-page.png',
fullPage: true
});
Antes de capturar, certifique-se de que a página foi totalmente carregada e que o conteúdo dinâmico foi finalizado:
await page.waitForNetworkIdle();
await page.waitForTimeout(2000);
Se o conteúdo dinâmico ainda estiver faltando na captura de tela, considere usar técnicas de rolagem conforme explicado abaixo.
Para páginas que exigem rolagem para carregar todo o conteúdo, você pode automatizar o processo de rolagem:
async function captureFullPage(page) {
// Scroll through the page and wait for content to load
await page.evaluate(async () => {
return await new Promise((resolve) => {
const timer = setInterval(() => {
window.scrollBy(0, window.innerHeight);
if (document.scrollingElement.scrollTop + window.innerHeight >= document.scrollingElement.scrollHeight) {
clearInterval(timer);
resolve();
}
}, 100);
});
});
// Scroll back to the top, then take the screenshot
await page.evaluate(() => window.scrollTo(0, 0));
return await page.screenshot({ fullPage: true });
}
"Fazer capturas de tela por seções é a melhor solução que temos hoje para fazer capturas de tela completas da página."
Este método garante que todas as seções da página sejam carregadas e incluídas na captura.
Aqui estão alguns problemas comuns que você pode enfrentar e suas soluções:
| Questão | Solução | Implementação |
|---|---|---|
| Unidades de janela de visualização | Defina uma altura fixa da janela de visualização | await page.setViewport({ height: 900 }); |
| lazy Loading | Use rolagem progressiva | Use o captureFullPage função |
| Layouts Complexos | Captura em seções | Faça várias capturas de tela e mescle-as |
Para páginas com rolagem infinita ou conteúdo dinâmico pesado, adicione um limite de rolagem para evitar loops infinitos:
const maxScrolls = 10;
let scrollCount = 0;
while (scrollCount < maxScrolls) {
const previousHeight = await page.evaluate('document.body.scrollHeight');
await page.evaluate('window.scrollTo(0, document.body.scrollHeight)');
await page.waitForTimeout(1000);
const newHeight = await page.evaluate('document.body.scrollHeight');
if (newHeight === previousHeight) break;
scrollCount++;
}
"O Puppeteer é atualmente a melhor ferramenta no ecossistema para executar um navegador headless... No entanto, o Puppeteer não tem um desempenho perfeito quando se trata de fazer capturas de tela."
Para layouts particularmente complicados onde o página inteira opção não funciona como esperado, defina as dimensões manualmente e use-as como parâmetros de recorte:
const dimensions = await page.evaluate(() => {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.scrollHeight
};
});
await page.screenshot({
path: 'precise-capture.png',
clip: {
x: 0,
y: 0,
width: dimensions.width,
height: dimensions.height
}
});
Com essas técnicas, você será capaz de lidar com capturas de tela de página inteira de forma eficaz. A seguir: capturar elementos específicos e ajustar as configurações de tamanho e qualidade.
O Puppeteer facilita o foco em elementos específicos, aproveitando sua capacidade de capturar imagens de tela de página inteira.
Para direcionar elementos com precisão, use seletores CSS como IDs, classes ou combinações:
// Target by ID (most reliable)
const submitButton = await page.$('#submit-button');
// Use specific class combinations
const productCard = await page.$('.product-card.featured');
// Locate elements within a container
const menuItem = await page.$('.navigation-menu .dropdown-item.active');
Depois de identificar um elemento, use as ferramentas de captura de tela do Puppeteer para capturá-lo:
const element = await page.$('div.product-data');
await element.screenshot({
path: 'element-screenshot.png',
type: 'png'
});
Para uma seleção mais avançada, experimente o page.locator() método:
const locator = page.locator('div.product-data');
await locator.screenshot({
path: 'element-locator.png',
quality: 90
});
"As capturas de tela de elementos são sobre serem precisas e eficientes. Menos fluff, mais foco." - Laura e Heidi, SCRNIFY
Essa abordagem funciona bem para testes e relatórios automatizados, complementando capturas de página inteira. Apenas certifique-se de que o elemento esteja totalmente carregado antes de tirar a captura de tela.
Elementos dinâmicos geralmente exigem etapas extras para garantir que estejam prontos para interação:
// Wait for the element to become visible
const element = await page.waitForSelector('.dynamic-element', {
visible: true,
timeout: 5000
});
// Wait for API data to load
await page.waitForResponse(
response => response.url().includes('/api/data')
);
// Capture the screenshot
await element.screenshot({ path: 'dynamic-element.png' });
Para elementos com condições específicas, crie funções de espera personalizadas:
await page.waitForFunction(() => {
const element = document.querySelector('.chart-container');
return element && element.getBoundingClientRect().height > 0;
});
Aqui está um exemplo do mundo real usando gráficos de criptomoedas do TradingView:
await page.goto("https://www.tradingview.com/markets/cryptocurrencies/");
const chartElement = await page.waitForSelector(".tv-lightweight-charts", {
visible: true
});
await chartElement.screenshot({ path: 'crypto-graph.png' });
"Esperar por um elemento específico é essencial para o processo de automação, evitando interações prematuras." - ScrapeOps
Ao trabalhar com conteúdo dinâmico, combine diferentes estratégias de espera para obter os melhores resultados:
| Cenário | Estratégia de espera | Implementação |
|---|---|---|
| Elementos Estáticos | Seletor básico | page.$() |
| Dependente de API | Resposta em espera | waitForResponse() |
| Gráficos renderizados | Função personalizada | waitForFunction() |
| Interface de usuário visível | Verificação de visibilidade | waitForSelector() com visible: true |
Melhorar o tamanho e a qualidade da captura de tela pode aumentar tanto o desempenho quanto a eficiência do armazenamento. Veja como fazer isso de forma eficaz.
O formato que você escolher para suas capturas de tela impacta tanto a qualidade quanto o tamanho do arquivo. Aqui está uma comparação rápida:
| Formato | Melhor caso de uso | Diferenciais | Desvantagens |
|---|---|---|---|
| WebP | Aplicativos web modernos | Arquivos menores (25-34% menores), suporta transparência | Suporte limitado em navegadores mais antigos |
| JPEG | Fotos, capturas de tela detalhadas | Tamanhos de arquivo pequenos, amplamente suportados | Sem transparência |
| PNG | Elementos de IU, logotipos | Qualidade sem perdas, suporta transparência | Tamanhos de arquivo maiores |
Por exemplo, você pode usar o seguinte código para salvar capturas de tela em WebP or JPEG formatos:
// WebP format
await page.screenshot({
path: 'screenshot.webp',
type: 'webp',
quality: 80
});
// JPEG format
await page.screenshot({
path: 'screenshot.jpg',
type: 'jpeg',
quality: 75
});
As configurações de qualidade podem ajudar a equilibrar clareza e tamanho do arquivo. Use qualidade mais alta para elementos de UI detalhados e qualidade mais baixa para capturas gerais:
// High quality for UI elements
await page.screenshot({
path: 'ui-element.jpg',
quality: 90,
type: 'jpeg'
});
// Medium quality for general captures
await page.screenshot({
path: 'full-page.jpg',
quality: 75,
type: 'jpeg'
});
"O WebP fornece tamanhos de arquivo 25-35% menores que o JPEG para o mesmo nível de qualidade." - Google Developers
Para minimizar ainda mais o tamanho do arquivo sem perder a clareza, você pode recortar capturas de tela ou otimizá-las para distribuição na web:
// Clip to specific dimensions
await page.screenshot({
path: 'clipped.jpg',
clip: {
x: 0,
y: 0,
width: 1280,
height: 720
}
});
// Optimize for web delivery
await page.screenshot({
path: 'optimized.webp',
type: 'webp',
quality: 75,
omitBackground: true
});
Por exemplo, a GitLab relatou um Redução de 80% no tamanho dos arquivos PNG por meio de fluxos de trabalho de otimização.
"A versão JPG é muito menor. No lado do Puppeteer, há uma diferença insignificante na velocidade para gerar um JPG vs um PNG." - Jon Yongfook, Fundador da Bannerbear
Diferentes tipos de conteúdo exigem diferentes formatos e configurações. Aqui vai um guia rápido:
| Tipo de captura de tela | Melhor Formato | Definição de Qualidade | Redução do tamanho do arquivo |
|---|---|---|---|
| Página inteira | WebP | 75-80% | 25-34% menor que JPEG |
| Elementos da IU | PNG | Lossless | Priorize a qualidade |
| Conteúdo rico em fotos | JPEG | 70-80% | 70-90% menor que o não compactado |
O Puppeteer simplifica a automação e os testes da web com seus recursos de captura de tela. Ele permite que você capture páginas inteiras ou elementos específicos, ao mesmo tempo em que lhe dá controle sobre a qualidade e o formato da imagem. Além disso, opções de codificação mais rápidas podem ajudar a economizar tempo de processamento.
Para obter os melhores resultados, defina as dimensões da sua janela de visualização para corresponder à resolução necessária e use o waitForSelector() método para garantir que todo o conteúdo carregue completamente. Se estiver usando o formato JPEG, ajuste as configurações de qualidade para equilibrar o tamanho do arquivo e a clareza.
Veja como começar a usar o Puppeteer para capturas de tela:
"O Puppeteer é uma ferramenta poderosa para extração de dados da web e automação de testes, oferecendo um alto grau de flexibilidade e controle sobre o processo de captura de tela".
Para uma integração ainda mais suave, considere usar plataformas como Latenode. Seu construtor de fluxo de trabalho visual permite que você configure automação avançada de captura de tela sem precisar de habilidades de codificação extensas.
