Capturas de pantalla con Puppeteer: páginas completas, elementos y optimización del tamaño

Puppeteer es una biblioteca de Node.js que simplifica la automatización de navegadores y permite realizar tareas como capturar pantallas de forma rápida y eficiente. Tanto si necesita capturas de página completa, instantáneas de elementos específicos o imágenes optimizadas, Puppeteer ofrece opciones flexibles con un código mínimo. Esto es lo que puede hacer con Puppeteer:

• Capturas de página completa: Capture páginas web enteras, incluido el contenido que requiere desplazamiento.
• Capturas de elementos específicos: Céntrese en componentes precisos mediante selectores CSS.
• Optimización del tamaño: Controle el formato, la calidad y el tamaño del archivo de imagen (por ejemplo, PNG, JPEG, WebP).

Ejemplo rápido:

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

¿Por qué usar Puppeteer?

• Automatice las pruebas visuales y los informes de errores.
• Ahorre tiempo con interacciones eficientes con el navegador.
• Personalice las capturas de pantalla para optimizar el rendimiento y la claridad.

Tanto si es desarrollador y prueba sitios web como si documenta errores, Puppeteer agiliza el proceso con herramientas potentes y comandos sencillos.

sbb-itb-23997f1

¡Capture pantallas de páginas web con el navegador headless basado en Puppeteer en Latenode!

Latenode ofrece integración directa con la biblioteca Puppeteer sin necesidad de instalar nada en su sistema. Simplemente elija un nodo de la biblioteca de nodos de integración, añádalo a su flujo de automatización, agregue un script para realizar capturas de pantalla y conéctelo con otros nodos. A continuación verá algunos ejemplos. Revise cada uno y elija el que mejor se adapte a sus necesidades.

Ejemplo #1: Análisis de sitios web basado en capturas de pantalla

Esta herramienta de automatización está diseñada para analizar y resumir contenido web mediante la captura y el procesamiento de pantallas de sitios web especificados. Al utilizar un navegador headless e integrarlo con IA, le permite extraer información clave de las páginas web. Es ideal para supervisar cambios en sitios web, analizar a la competencia o recopilar datos visuales para informes.

Clone esta plantilla, adáptela a sus necesidades y automatice la supervisión de sitios web.

Ejemplo #2: Recopilación de datos de ecommerce (scraper de Ebay)

Este flujo automatizado está diseñado para recopilar y procesar resultados de búsquedas web. Utilice un navegador headless y código JavaScript asistido por IA para recopilar información de motores de búsqueda, capturar pantallas como referencia y guardar los datos para analizarlos posteriormente. Esta herramienta es ideal para estudios de mercado o cualquier tarea que requiera la recopilación automatizada de datos de la web.

Clone esta plantilla lista para usar para extraer datos de cualquier producto de Ebay.

Ejemplo #3: Scraper de investigación de mercado

Esta herramienta analiza reseñas online de una empresa especificada y proporciona información útil mediante análisis impulsados por IA. El navegador headless se utiliza para navegar, capturar pantallas y recopilar reseñas, mientras que DeepSeek AI ayuda con el análisis detallado. Es ideal para supervisar la reputación de marca, mejorar el servicio al cliente y tomar decisiones basadas en datos.

Clone esta plantilla para recopilar reseñas, analizarlas y obtener información detallada sobre cualquier marca.

Primeros pasos con Puppeteer

Siga estos pasos para configurar Puppeteer y comenzar a capturar contenido web. Una configuración adecuada garantiza un rendimiento fluido para diversas necesidades de captura, ya sean páginas completas, elementos específicos o capturas optimizadas en tamaño.

Inicie el navegador y la página

Una vez que añada el nodo de navegador headless, cree una nueva instancia de navegador con el siguiente 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');
})();

Esto configura su entorno y le permite capturar pantallas con precisión.

Configure los parámetros de la página

Para ajustar con precisión sus capturas de pantalla, modifique la configuración del viewport. A continuación se muestra un desglose de los parámetros clave:

Utilice el siguiente código para configurar estos 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');

"En Puppeteer, la manipulación del viewport es especialmente relevante para tareas como el web scraping, las pruebas de aplicaciones web en distintos dispositivos y la generación de capturas de pantalla o PDF de páginas web." - Webshare [2]

Para contenido dinámico, establezca un tiempo de espera que tenga en cuenta los retrasos de carga:

page.setDefaultTimeout(30000); // 30 seconds timeout

Con estas configuraciones, estará listo para capturar pantallas de alta calidad adaptadas a sus necesidades.

Capturas de pantalla de página completa

Aprenda a realizar capturas de pantalla de página completa con Puppeteer utilizando configuraciones específicas, métodos de desplazamiento y técnicas de resolución de problemas.

Active el modo de página completa

Para capturar una página web completa, incluido el contenido fuera del área visible, utilice la opción fullPage de Puppeteer:

await page.screenshot({
    path: 'complete-page.png',
    fullPage: true
});

Antes de capturar, asegúrese de que la página se haya cargado por completo y de que el contenido dinámico haya terminado de renderizarse:

await page.waitForNetworkIdle();
await page.waitForTimeout(2000);

Si el contenido dinámico sigue sin aparecer en la captura, considere utilizar las técnicas de desplazamiento que se explican a continuación.

Gestione las páginas con desplazamiento

Para páginas que requieren desplazamiento para cargar todo el contenido, puede automatizar el proceso de desplazamiento:

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

"Realizar capturas de pantalla por secciones es la mejor solución que podemos tener hoy en día para obtener capturas de página completa." [4]

Este método garantiza que todas las secciones de la página estén cargadas e incluidas en la captura.

Solucione problemas habituales

Estos son algunos problemas habituales que podría encontrar y sus soluciones:

Para páginas con desplazamiento infinito o contenido dinámico pesado, añada un límite de desplazamiento para evitar bucles interminables:

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

"Puppeteer es actualmente la mejor herramienta del ecosistema para ejecutar un navegador headless... Sin embargo, Puppeteer no funciona a la perfección cuando se trata de realizar capturas de pantalla." [5]

Para diseños especialmente complejos en los que la opción fullPage no funciona como se espera, establezca manualmente las dimensiones y utilícelas 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
    }
});

Con estas técnicas, podrá gestionar de forma eficaz las capturas de pantalla de página completa. A continuación: cómo capturar elementos específicos y ajustar con precisión la configuración de tamaño y calidad.

Capturas de pantalla de elementos

Puppeteer facilita centrarse en elementos específicos, aprovechando su capacidad para capturar pantallas de página completa.

Encuentre elementos con CSS

Para seleccionar elementos con precisión, utilice selectores CSS como ID, clases o combinaciones:

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

Realice capturas de pantalla de elementos

Después de identificar un elemento, utilice las herramientas de captura de pantalla de Puppeteer para capturarlo:

const element = await page.$('div.product-data');
await element.screenshot({
    path: 'element-screenshot.png',
    type: 'png'
});

Para una selección más avanzada, pruebe el método page.locator():

const locator = page.locator('div.product-data');
await locator.screenshot({
    path: 'element-locator.png',
    quality: 90
});

"Las capturas de pantalla de elementos consisten en ser preciso y eficiente. Menos relleno, más enfoque." - Laura y Heidi, SCRNIFY

Este enfoque funciona bien para pruebas e informes automatizados, y complementa las capturas de página completa. Solo asegúrese de que el elemento esté completamente cargado antes de realizar la captura.

Gestione el contenido en carga

Los elementos dinámicos suelen requerir pasos adicionales para garantizar que estén listos para la interacción:

// 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 con condiciones específicas, cree funciones de espera personalizadas:

await page.waitForFunction(() => {
    const element = document.querySelector('.chart-container');
    return element && element.getBoundingClientRect().height > 0;
});

A continuación se muestra un ejemplo real con gráficos de criptomonedas de 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 a un elemento específico es fundamental para el proceso de automatización, ya que evita interacciones prematuras." - ScrapeOps

Al trabajar con contenido dinámico, combine distintas estrategias de espera para obtener los mejores resultados:

Tamaño y calidad de imagen

Mejorar el tamaño y la calidad de las capturas de pantalla puede optimizar tanto el rendimiento como la eficiencia de almacenamiento. A continuación le explicamos cómo hacerlo eficazmente.

Elija el formato de imagen adecuado

El formato que elija para sus capturas de pantalla afecta tanto a la calidad como al tamaño del archivo. Esta es una comparación rápida:

Por ejemplo, puede utilizar el siguiente código para guardar capturas de pantalla en formatos WebP o 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 la configuración de calidad

La configuración de calidad puede ayudarle a equilibrar la claridad y el tamaño del archivo. Utilice una calidad mayor para elementos detallados de interfaz y una calidad menor para capturas generales:

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

"WebP ofrece tamaños de archivo entre un 25 y un 35 % menores que JPEG para el mismo nivel de calidad." - Google Developers [6]

Reduzca el tamaño del archivo

Para minimizar aún más el tamaño del archivo sin perder claridad, puede recortar las capturas de pantalla u optimizarlas para su entrega 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 ejemplo, GitLab informó de una reducción del 80 % en los tamaños de archivo PNG mediante flujos de optimización [8].

"La versión JPG es mucho más pequeña. En cuanto a Puppeteer, existe una diferencia insignificante en la velocidad para generar un JPG frente a un PNG." - Jon Yongfook, fundador de Bannerbear [7]

Recomendaciones según el contenido

Los distintos tipos de contenido requieren formatos y configuraciones diferentes. Esta es una guía rápida:

Resumen

Puppeteer simplifica la automatización y las pruebas web con sus funciones de captura de pantalla. Le permite capturar páginas completas o elementos específicos, a la vez que le ofrece control sobre la calidad y el formato de imagen. Además, las opciones de codificación más rápidas pueden ayudar a ahorrar tiempo de procesamiento [10].

Para obtener los mejores resultados, establezca las dimensiones de su viewport de acuerdo con la resolución que necesita y utilice el método waitForSelector() para garantizar que todo el contenido se cargue por completo. Si utiliza el formato JPEG, ajuste la configuración de calidad para equilibrar el tamaño del archivo y la claridad.

Primeros pasos

Así puede empezar a utilizar Puppeteer para capturas de pantalla:

• Configure una integración directa basada en Puppeteer con navegador headless en Latenode.
• Elija el tipo de captura —ya sea de página completa o de elementos específicos— según sus requisitos.
• Ajuste con precisión la salida de imagen modificando la configuración de formato y calidad.

"Puppeteer es una potente herramienta para el web scraping y la automatización de pruebas, que ofrece un alto grado de flexibilidad y control sobre el proceso de captura de pantallas" [3].

Para una integración todavía más fluida, considere utilizar plataformas como Latenode. Su constructor visual de flujos le permite configurar automatizaciones avanzadas de capturas de pantalla sin necesidad de amplios conocimientos de programación.