.png)
.svg){kind=icon}
Marzo 14, 2025
•
9
min leer
Capturas de pantalla con Puppeteer: capturas de página completa, elementos y optimización del tamaño
George Miloradovich
Investigador, redactor y entrevistador de casos prácticos
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:
await page.screenshot({ path: 'screenshot.jpg', fullPage: true });
Ya sea que sea un desarrollador que prueba sitios web o documenta errores, Puppeteer agiliza el proceso con herramientas potentes y comandos simples.
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!
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!
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!
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.
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.
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.
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 |
| Altura | 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
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.
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.
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.
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".
Este método garantiza que todas las secciones de la página se carguen y se incluyan en la captura.
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 }); |
| 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.
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.
Puppeteer facilita concentrarse en elementos específicos, aprovechando su capacidad para capturar capturas de pantalla de página completa.
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');
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.
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 |
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.
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
});
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
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.
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
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 |
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.
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.
A continuación te explicamos cómo empezar a usar Puppeteer para realizar capturas de pantalla:
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.
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.
