Capturas de pantalla con Puppeteer: capturas de página completa, elementos y optimización del tamaño

Tabla de contenidos.

Capturas de pantalla con Puppeteer: capturas de página completa, elementos y optimización del tamaño

Titiritero es un Node.js Biblioteca que simplifica la automatización del navegador, agilizando y optimizando tareas como tomar capturas de pantalla. Ya sea que necesite capturas de página completa, instantáneas de elementos específicos o imágenes optimizadas, Titiritero Ofrece opciones flexibles con código mínimo. Esto es lo que puedes hacer con Titiritero:

Capturas de pantalla de página completa:Captura páginas web completas, incluido el contenido con desplazamiento.
Capturas específicas de elementos:Céntrese en componentes precisos utilizando selectores CSS.
Optimización de tamaño:Controla el formato de la imagen, la calidad y el tamaño del archivo (por ejemplo, PNG, JPEG, WebP).

Ejemplo rápido:

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

Por qué usar Titiritero?

Titiritero

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

Ya sea que sea un desarrollador que prueba sitios web o documenta errores, Puppeteer agiliza el proceso con herramientas potentes y comandos simples.

¡Captura capturas de pantalla de páginas web con el navegador sin cabeza basado en Puppeteer en Latenode!

Latenode ofrece integración directa con la biblioteca Puppeteer sin necesidad de instalar nada en su sistema. Simplemente seleccione un nodo de la biblioteca de nodos de integración, añádalo a su escenario de automatización, agregue un script para capturas de pantalla y vincúlelo con otros nodos. Aquí tiene algunos ejemplos. ¡Écheles un vistazo y elija el que mejor se adapte a sus necesidades!

Ejemplo n.° 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 capturas de pantalla de sitios web específicos. Al usar un navegador headless e integrarse con IA, permite extraer información clave de las páginas web. Es ideal para supervisar los cambios en el sitio web, analizar a la competencia o recopilar datos visuales para informes.

¡Clona esta plantilla, personalízala según tus necesidades y automatiza el monitoreo del sitio web!

Ejemplo n.° 2: Recopilación de datos de comercio electrónico (Ebay Scraper)

Este escenario automatizado está diseñado para recopilar y procesar resultados de búsqueda web. Utiliza un navegador headless y código Javascript asistido por IA para recopilar información de los motores de búsqueda, capturar capturas de pantalla como referencia y guardar los datos para su posterior análisis. 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 cualquier dato de producto de eBay!

Vitrina #3: Raspador de investigación de mercado

Esta herramienta analiza las reseñas en línea de una empresa específica y proporciona información útil mediante análisis basados en IA. Se utiliza un navegador headless para navegar, capturar capturas de pantalla y recopilar reseñas, mientras que la IA DeepSeek facilita un análisis detallado. Ideal para monitorizar la reputación de la marca, mejorar el servicio al cliente y tomar decisiones basadas en datos.

¡Clona esta plantilla para recopilar reseñas, analizarlas y obtener información detallada sobre cualquier marca!

Introducción a Puppeteer

Sigue estos pasos para configurar Puppeteer y empezar a capturar contenido web. Una configuración correcta garantiza un rendimiento óptimo para diversas necesidades de captura de pantalla, ya sean capturas de página completa, de elementos específicos o de tamaño optimizado.

Iniciar navegador y página

Una vez que agregue el nodo Headless Browser, 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 capturas de pantalla con precisión.

Establecer parámetros de página

Para optimizar tus capturas de pantalla, ajusta la configuración de la ventana gráfica. A continuación, se detallan los parámetros clave:

Parámetro	Valor por defecto	Ajuste recomendado	Propósito
Ancho	800px	1280px	Coincide con la resolución de escritorio común
ALTO	600px	720px	Proporciona una relación de aspecto estándar de 16:9
Factor de escala	1	1	Mantiene el tamaño original
Modo móvil	false	false	Garantiza la representación del escritorio

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 de la ventana gráfica es especialmente importante para tareas como el web scraping, la prueba de aplicaciones web en diferentes dispositivos y la generación de capturas de pantalla o archivos PDF de páginas web. - Webshare ^{[ 2 ]}

Para contenido dinámico, establezca un tiempo de espera para tener en cuenta los retrasos en la carga:

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

Con estas configuraciones, está listo para capturar capturas de pantalla de alta calidad adaptadas a sus necesidades.

Capturas de pantalla de página completa

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

Habilitar el modo de página completa

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

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

Antes de realizar la captura, asegúrese de que la página se haya cargado completamente y que el contenido dinámico haya terminado de renderizarse:

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

Si aún falta contenido dinámico en la captura de pantalla, considere utilizar técnicas de desplazamiento como se explica a continuación.

Manejar páginas desplazables

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

"Tomar capturas de pantalla por secciones es la mejor solución que tenemos hoy en día para tomar capturas de pantalla de páginas completas". ^{[ 4 ]}

Este método garantiza que todas las secciones de la página se carguen y se incluyan en la captura.

Solucionar problemas comunes

A continuación se detallan algunos problemas comunes que podría enfrentar y sus soluciones:

Inconveniente	Solución	Implementación
Unidades de ventana gráfica	Establecer una altura de ventana gráfica fija	`await page.setViewport({ height: 900 });`
Carga Diferida (Lazy Loading)	Utilice el desplazamiento progresivo	Ingrese al `captureFullPage` función
Diseños complejos	Captura en secciones	Toma varias capturas de pantalla y combínalas

Para páginas con desplazamiento infinito o contenido dinámico pesado, agregue un límite de desplazamiento para evitar bucles sin fin:

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, no funciona a la perfección al tomar capturas de pantalla. ^{[ 5 ]}

Para diseños particularmente complicados donde el página completa La opción no funciona como se esperaba, configure las dimensiones manualmente y úselas 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ás gestionar capturas de pantalla de página completa de forma eficaz. A continuación: capturar elementos específicos y ajustar el tamaño y la calidad.

Capturas de pantalla de elementos

Puppeteer facilita concentrarse en elementos específicos, aprovechando su capacidad para capturar capturas de pantalla de página completa.

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

Tomar capturas de pantalla de Element

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, prueba el page.locator() método:

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

Las capturas de pantalla de elementos se basan en la precisión y la eficiencia. Menos información superflua, más enfoque. - Laura y Heidi, SCRNIFY

Este enfoque es eficaz para pruebas e informes automatizados, y complementa las capturas de pantalla completas. Solo asegúrese de que el elemento esté completamente cargado antes de tomar la captura de pantalla.

Manejar la carga de contenido

Los elementos dinámicos a menudo requieren 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 del mundo real que utiliza los 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 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 diferentes estrategias de espera para obtener los mejores resultados:

Guión	Estrategia de espera	Implementación
Elementos estáticos	Selector básico	`page.$()`
Dependiente de API	Espera de respuesta	`waitForResponse()`
Gráficos renderizados	Función personalizada	`waitForFunction()`
Interfaz de usuario visible	Comprobación de visibilidad	`waitForSelector()` con `visible: true`

Tamaño de imagen y calidad

Mejorar el tamaño y la calidad de las capturas de pantalla puede optimizar el rendimiento y el almacenamiento. Aquí te explicamos cómo hacerlo eficazmente.

Elija el formato de imagen correcto

El formato que elijas para tus capturas de pantalla afecta tanto la calidad como el tamaño del archivo. Aquí tienes una breve comparación:

Formato	Mejor caso de uso	Ventajas	Desventajas
WebP	Aplicaciones web modernas	Archivos más pequeños (25-34 % más pequeños), admite transparencia	Soporte limitado en navegadores más antiguos
JPEG	Fotos, capturas de pantalla detalladas	Tamaños de archivos pequeños, ampliamente compatible	sin transparencia
PNG	Elementos de interfaz de usuario, logotipos	Calidad sin pérdidas, admite transparencia.	Tamaños de archivos más grandes

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

La configuración de calidad puede ayudar a equilibrar la claridad y el tamaño del archivo. Use una calidad más alta para elementos detallados de la interfaz de usuario y una calidad más baja 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 % más pequeños que JPEG con el mismo nivel de calidad. - Desarrolladores de Google ^{[ 6 ]}

Reducir el tamaño del archivo

Para minimizar aún más el tamaño del archivo sin perder claridad, puede recortar 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ó un Reducción del 80% en el tamaño de los archivos PNG a través de flujos de trabajo de optimización ^{[ 8 ]}.

La versión JPG es mucho más pequeña. En Puppeteer, la diferencia de velocidad entre generar un JPG y un PNG es mínima. - Jon Yongfook, fundador de Bannerbear ^{[ 7 ]}

Recomendaciones basadas en el contenido

Los distintos tipos de contenido requieren distintos formatos y configuraciones. Aquí tienes una guía rápida:

Tipo de captura de pantalla	Mejor formato	Ajuste de calidad	Reducción del tamaño del archivo
Página completa	WebP	75-80%	25-34% más pequeño que JPEG
Elementos de la interfaz de usuario	PNG	Lossless	Priorizar la calidad
Contenido con muchas fotografías	JPEG	70-80%	70-90% más pequeño que sin comprimir

Resumen

Puppeteer simplifica la automatización y las pruebas web con sus funciones de captura de pantalla. Permite capturar páginas completas o elementos específicos, a la vez que permite controlar la calidad y el formato de la imagen. Además, las opciones de codificación más rápidas permiten ahorrar tiempo de procesamiento. ^{[ 10 ]}.

Para obtener los mejores resultados, configure las dimensiones de su ventana gráfica para que coincidan con la resolución que necesita y utilice el waitForSelector() Método para garantizar la carga completa del contenido. Si usa el formato JPEG, ajuste la configuración de calidad para equilibrar el tamaño y la claridad del archivo.

Introducción

A continuación te explicamos cómo empezar a usar Puppeteer para realizar capturas de pantalla:

Configurar un Direct Puppeteer impulsado Integración del navegador sin interfaz gráfica en Latenode.
Elige tu tipo de captura - ya sea de página completa o de elementos específicos, según sus requisitos.
Ajuste fino de la salida de imagen ajustando 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 pantalla. ^{[ 3 ]}.

Para una integración aún más fluida, considere usar plataformas como Latenode. Su generador de flujos de trabajo visuales le permite configurar la automatización avanzada de capturas de pantalla sin necesidad de conocimientos avanzados de programación.