Puppeteer é uma biblioteca Node.js que simplifica a automação de navegadores, tornando tarefas como capturar screenshots rápidas e eficientes. Seja para capturas de página inteira, snapshots de elementos específicos ou imagens otimizadas, o Puppeteer oferece opções flexíveis com o mínimo de código. Veja o que você pode fazer com o Puppeteer:
- Screenshots de página inteira: capture páginas completas, incluindo conteúdo que exige rolagem.
- Capturas de elementos específicos: foque em componentes precisos usando seletores CSS.
- Otimização de tamanho: controle o formato, a qualidade e o tamanho do arquivo da imagem (por exemplo, PNG, JPEG, WebP).
Exemplo rápido:
await page.screenshot({ path: 'screenshot.jpg', fullPage: true });
Por que usar o Puppeteer?
- Automatize testes visuais e relatórios de bugs.
- Economize tempo com interações eficientes no navegador.
- Personalize screenshots para melhorar o desempenho e a clareza.
Seja você um desenvolvedor testando sites ou documentando erros, o Puppeteer simplifica o processo com ferramentas poderosas e comandos simples.
sbb-itb-23997f1
Capture screenshots de páginas web com o navegador headless baseado em Puppeteer na Latenode!
A Latenode oferece integração direta com a biblioteca Puppeteer, sem precisar instalar nada no seu sistema. Basta escolher um nó na biblioteca de nós de integração, adicioná-lo ao seu fluxo de automação, incluir um script para captura de screenshots e conectá-lo a outros nós. Veja alguns exemplos. Confira e escolha o que atende às suas necessidades!
Exemplo 1: Análise de sites baseada em screenshots
Esta ferramenta de automação foi desenvolvida para analisar e resumir conteúdo web por meio da captura e do processamento de screenshots de sites especificados. Ao usar um navegador headless e integrá-lo à IA, ela permite extrair insights importantes das páginas web. É ótima para monitorar mudanças em sites, analisar concorrentes ou coletar dados visuais para relatórios.
Clone este modelo, personalize-o para suas necessidades e automatize o monitoramento de sites!
Exemplo 2: Coleta de dados de ecommerce (scraper do Ebay)
Este fluxo automatizado foi desenvolvido para coletar e processar resultados de pesquisas na web. Use um navegador headless e código JavaScript assistido por IA para coletar informações de mecanismos de busca, capturar screenshots como referência e salvar os dados para análises posteriores. Esta ferramenta é ideal para pesquisa de mercado ou qualquer tarefa que exija coleta automatizada de dados na web.
Clone este modelo pronto para extrair dados de qualquer produto do Ebay!
Exemplo 3: Scraper para pesquisa de mercado
Esta ferramenta analisa avaliações online de uma empresa especificada e fornece insights acionáveis por meio de análises orientadas por IA. O navegador headless é usado para navegar, capturar screenshots e coletar avaliações, enquanto a IA DeepSeek auxilia na análise detalhada. É ótima para monitorar a reputação da marca, melhorar o atendimento ao cliente e tomar decisões baseadas em dados.
Primeiros passos com o Puppeteer
Siga estas etapas para configurar o Puppeteer e começar a capturar conteúdo web. Uma configuração adequada garante um desempenho fluido para diversas necessidades de screenshots, sejam elas de página inteira, de elementos específicos ou otimizadas em tamanho.
Inicie o navegador e a página
Depois de adicionar o nó de navegador headless, crie uma nova instância do navegador com o código a seguir:
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 e permite capturar screenshots com precisão.
Defina os parâmetros da página
Para ajustar seus screenshots, configure as opções da viewport. Veja os principais parâmetros:
| Parâmetro | Valor padrão | Configuração recomendada | Finalidade |
|---|---|---|---|
| Largura | 800px | 1280px | Corresponde a uma resolução comum para desktop |
| Altura | 600px | 720px | Oferece uma proporção padrão de 16:9 |
| Fator de escala | 1 | 1 | Mantém o tamanho original |
| Modo mobile | false | false | Garante a renderização para desktop |
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 viewport é especialmente importante para tarefas como web scraping, testes de aplicações web em diferentes dispositivos e geração de screenshots ou PDFs de páginas web." — Webshare [2]
Para conteúdo dinâmico, defina um tempo limite para considerar atrasos de carregamento:
page.setDefaultTimeout(30000); // 30 seconds timeout
Com essas configurações, você está pronto para capturar screenshots de alta qualidade adaptados às suas necessidades.
Screenshots de página inteira
Aprenda a capturar screenshots de página inteira com o Puppeteer usando configurações específicas, métodos de rolagem e técnicas de solução de problemas.
Ative o modo de página inteira
Para capturar uma página web completa, incluindo o conteúdo fora da área visível, use a opção fullPage do Puppeteer:
await page.screenshot({
path: 'complete-page.png',
fullPage: true
});
Antes de capturar, verifique se a página foi totalmente carregada e se o conteúdo dinâmico terminou de ser renderizado:
await page.waitForNetworkIdle();
await page.waitForTimeout(2000);
Se ainda faltar conteúdo dinâmico no screenshot, considere usar as técnicas de rolagem explicadas abaixo.
Lide com páginas que exigem rolagem
Para páginas que exigem rolagem para carregar todo o conteúdo, você pode automatizar o processo:
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 });
}
"Capturar screenshots por seções é a melhor solução que temos atualmente para obter screenshots da página completa." [4]
Esse método garante que todas as seções da página sejam carregadas e incluídas na captura.
Corrija problemas comuns
Veja alguns problemas que você pode enfrentar e suas soluções:
| Problema | Solução | Implementação |
|---|---|---|
| Unidades da viewport | Defina uma altura fixa para a viewport | await page.setViewport({ height: 900 }); |
| Carregamento lento | Use rolagem progressiva | Use a função captureFullPage |
| Layouts complexos | Capture por seções | Tire vários screenshots e una-os |
Para páginas com rolagem infinita ou muito conteúdo dinâmico, adicione um limite de rolagem para evitar loops intermináveis:
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++;
}
"Atualmente, o Puppeteer é a melhor ferramenta do ecossistema para executar um navegador headless... No entanto, o Puppeteer não tem um desempenho perfeito na captura de screenshots." [5]
Para layouts especialmente complexos, nos quais a opção fullPage 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ê conseguirá lidar com screenshots de página inteira de forma eficiente. A seguir: como capturar elementos específicos e ajustar as configurações de tamanho e qualidade.
Screenshots de elementos
O Puppeteer facilita o foco em elementos específicos, complementando sua capacidade de capturar screenshots de página inteira.
Encontre elementos com CSS
Para selecionar 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');
Capture screenshots de elementos
Após identificar um elemento, use as ferramentas de screenshot 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 método page.locator():
const locator = page.locator('div.product-data');
await locator.screenshot({
path: 'element-locator.png',
quality: 90
});
"Screenshots de elementos são uma questão de precisão e eficiência. Menos excesso, mais foco." — Laura e Heidi, SCRNIFY
Essa abordagem funciona bem para testes e relatórios automatizados, complementando as capturas de página inteira. Apenas verifique se o elemento foi totalmente carregado antes de capturar o screenshot.
Lide com o carregamento de conteúdo
Elementos dinâmicos geralmente exigem etapas adicionais 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;
});
Veja um exemplo real usando os 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' });
"A espera por um elemento específico é essencial para o processo de automação, pois evita interações prematuras." — ScrapeOps
Ao trabalhar com conteúdo dinâmico, combine diferentes estratégias de espera para obter os melhores resultados:
| Situação | Estratégia de espera | Implementação |
|---|---|---|
| Elementos estáticos | Seletor básico | page.$() |
| Dependente de API | Espera por resposta | waitForResponse() |
| Gráficos renderizados | Função personalizada | waitForFunction() |
| Interface visível | Verificação de visibilidade | waitForSelector() com visible: true |
Tamanho e qualidade da imagem
Melhorar o tamanho e a qualidade dos screenshots pode aumentar tanto o desempenho quanto a eficiência de armazenamento. Veja como fazer isso de forma eficaz.
Escolha o formato de imagem certo
O formato escolhido para seus screenshots afeta tanto a qualidade quanto o tamanho do arquivo. Veja uma comparação rápida:
| Formato | Melhor caso de uso | Vantagens | Desvantagens |
|---|---|---|---|
| WebP | Aplicações web modernas | Arquivos menores (25–34% menores), oferece suporte a transparência | Suporte limitado em navegadores mais antigos |
| JPEG | Fotos, screenshots detalhados | Arquivos menores, amplo suporte | Não oferece transparência |
| PNG | Elementos de interface, logos | Qualidade sem perdas, oferece suporte a transparência | Arquivos maiores |
Por exemplo, você pode usar o código a seguir para salvar screenshots nos formatos WebP ou JPEG:
// WebP format
await page.screenshot({
path: 'screenshot.webp',
type: 'webp',
quality: 80
});
// JPEG format
await page.screenshot({
path: 'screenshot.jpg',
type: 'jpeg',
quality: 75
});
Ajuste as configurações de qualidade
As configurações de qualidade ajudam a equilibrar clareza e tamanho do arquivo. Use qualidade mais alta para elementos detalhados da interface 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 oferece tamanhos de arquivo 25–35% menores do que o JPEG com o mesmo nível de qualidade." — Google Developers [6]
Reduza o tamanho do arquivo
Para minimizar ainda mais o tamanho do arquivo sem perder clareza, você pode recortar screenshots ou otimizá-los para entrega 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, o GitLab relatou uma redução de 80% no tamanho de arquivos PNG por meio de fluxos de otimização [8].
"A versão JPG é muito menor. Do lado do Puppeteer, há uma diferença insignificante na velocidade para gerar um JPG em comparação a um PNG." — Jon Yongfook, fundador do Bannerbear [7]
Recomendações com base no conteúdo
Diferentes tipos de conteúdo exigem formatos e configurações diferentes. Veja um guia rápido:
| Tipo de screenshot | Melhor formato | Configuração de qualidade | Redução no tamanho do arquivo |
|---|---|---|---|
| Página inteira | WebP | 75–80% | 25–34% menor do que JPEG |
| Elementos de interface | PNG | Sem perdas | Priorize a qualidade |
| Conteúdo com muitas fotos | JPEG | 70–80% | 70–90% menor do que sem compressão |
Resumo
O Puppeteer simplifica a automação e os testes web com seus recursos de screenshot. Ele permite capturar páginas inteiras ou elementos específicos, além de oferecer 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 [10].
Para obter os melhores resultados, defina as dimensões da viewport de acordo com a resolução necessária e use o método waitForSelector() para garantir que todo o conteúdo seja carregado completamente. Se você usar o formato JPEG, ajuste as configurações de qualidade para equilibrar o tamanho do arquivo e a clareza.
Primeiros passos
Veja como começar a usar o Puppeteer para screenshots:
- Configure uma integração direta baseada em Puppeteer com o navegador headless na Latenode.
- Escolha seu tipo de captura — de página inteira ou de elementos específicos — com base nos seus requisitos.
- Ajuste a saída de imagem configurando o formato e a qualidade.
"O Puppeteer é uma ferramenta poderosa para web scraping e automação de testes, oferecendo alto grau de flexibilidade e controle sobre o processo de captura de screenshots" [3].
Para uma integração ainda mais fluida, considere usar plataformas como a Latenode. Seu criador visual de fluxos permite configurar automações avançadas de screenshots sem exigir habilidades extensas de programação.
