Tirando screenshots com o Puppeteer: capturas de página inteira, elementos e otimização de tamanho

Índice

Tirando screenshots com o Puppeteer: capturas de página inteira, elementos e otimização de tamanho

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:

Capturas de tela de página inteira: Capture páginas inteiras da web, incluindo conteúdo de rolagem.
Capturas específicas de elementos: Concentre-se em componentes precisos usando seletores CSS.
Otimização de tamanho: Controle o formato da imagem, a qualidade e o tamanho do arquivo (por exemplo, PNG, JPEG, WebP).

Exemplo rápido:

await page.screenshot({ path: 'screenshot.jpg', fullPage: true });

Por que usar Marionetista?

Marionetista

Automatize testes visuais e relatórios de bugs.
Economize tempo com interações eficientes no navegador.
Personalize capturas de tela para melhor desempenho e clareza.

Seja você um desenvolvedor testando sites ou documentando erros, o Puppeteer simplifica o processo com ferramentas poderosas e comandos simples.

Capture imagens de páginas da web com o navegador headless baseado no Puppeteer no Latenode!

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!

Showcase #1: Análise de site baseada em captura de tela

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.

Clone este modelo, personalize-o de acordo com suas necessidades e automatize o monitoramento do site!

Showcase #2: Coleta de dados de comércio eletrônico (Ebay Scraper)

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!

Vitrine nº 3: Raspador de pesquisa de mercado

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.

Clone este modelo para coletar avaliações, analisá-las e obter insights detalhados sobre qualquer marca!

Introdução ao Puppeteer

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.

Iniciar navegador e página

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.

Definir parâmetros da página

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.

Capturas de tela de página inteira

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.

Habilitar modo de página inteira

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.

Lidar com páginas de rolagem

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.

Corrigir problemas comuns

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.

Capturas de tela do elemento

O Puppeteer facilita o foco em elementos específicos, aproveitando sua capacidade de capturar imagens de tela de página inteira.

Encontre elementos com CSS

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');

Tirar screenshots de elementos

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.

Lidar com o carregamento de conteúdo

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`

Tamanho e qualidade da imagem

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.

Escolha o formato de imagem correto

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
});

Ajustar as configurações de qualidade

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

Reduzir o tamanho do arquivo

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

Recomendações baseadas no conteúdo

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

Resumo

O Puppeteer simplifica a automação e os testes web com seus recursos de captura de tela. 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. .

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.

Começando a jornada

Veja como começar a usar o Puppeteer para capturas de tela:

Configurar um Direct Puppeteer alimentado Integração do navegador sem cabeça no Latenode.
Escolha seu tipo de captura - seja de página inteira ou de um elemento específico - com base em suas necessidades.
Ajuste fino da saída da imagem ajustando as configurações de formato e qualidade.

"O Puppeteer é uma ferramenta poderosa para web scraping 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.