Web Scraping con Node.

js y
Puppeteer: Desde los
Fundamentos hasta Proyectos
Avanzados.
Aprende a extraer y automatizar datos en la web utilizando Puppeteer, adquiriendo habilidades
desde la configuración básica hasta la implementación de proyectos complejos y escalables en
[Link].
1. Introducción al Web Scraping.

Definición y aplicaciones del web scraping.

Web scraping es el proceso de extracción de datos de sitios web de manera automatizada. Los datos extraídos
se pueden utilizar para distintos fines, tales como análisis de mercado, monitoreo de precios, generación de
bases de datos y más.
Ética y legalidad: límites y mejores prácticas
Ejemplos de aplicaciones:
Es importante recordar que no todos los sitios permiten
● Monitoreo de precios: empresas que comparan el scraping. Para realizarlo de forma ética y legal:
precios entre competidores.
● Noticias y contenido: recopilación de artículos o ● Revisa el archivo [Link]: este archivo indica
contenido relevante de varios medios. las áreas permitidas y restringidas de un sitio web
● Análisis de redes sociales: recopilación de para los bots.
datos públicos de perfiles para analizar ● Respeta los términos de servicio: muchos
tendencias. sitios tienen condiciones específicas en sus
Términos de Servicio que prohíben o limitan el
scraping.
● Considera el impacto en el servidor: no hagas
requests excesivas para evitar sobrecargar los
servidores.
1. Introducción al Web Scraping.

Conceptos básicos: HTML, DOM y su relación con el scraping.

El HTML (Hypertext Markup Language) estructura el contenido de la página, mientras que el DOM (Document
Object Model) representa esa estructura en un formato que los scripts pueden manipular. Puppeteer trabaja
sobre el DOM, permitiendo acceder y modificar el contenido de la página.

Ejemplo de estructura HTML:

Introducción a [Link] y Puppeteer

[Link] es un entorno de ejecución de

JavaScript del lado del servidor que permite la
creación de aplicaciones de alta escalabilidad.
Puppeteer es una librería de [Link] que
permite automatizar navegadores Chrome o
Chromium para realizar tareas como el scraping.
2. Preparación del Entorno de Desarrollo.

Instalación de [Link]. Introducción al archivo [Link] y gestión de

Para comenzar con [Link], puedes descargarlo desde dependencias.
[Link]. Después de la instalación, verifica que todo
El archivo [Link] mantiene la información del
esté en orden:
proyecto y sus dependencias. Al instalar Puppeteer, se
agrega automáticamente en dependencies. Puedes
ver la lista de dependencias en este archivo y
Instalación y configuración inicial de Puppeteer. actualizar versiones según las necesidades del
Para instalar Puppeteer, crea una carpeta para tu proyecto.
proyecto y navega a ella en la terminal:

Luego, inicializa el E instala Puppeteer:

proyecto de
[Link]:

Configuración del entorno de trabajo en un editor de código

Se recomienda usar un editor como Visual Studio Code, que tiene soporte para [Link] y permite ejecutar scripts de forma sencilla.
3. Primer Script con Puppeteer.

Ejecución de un script básico de Puppeteer.

Vamos a crear un script sencillo que abra una página

Ejecuta este script con:
web y tome una captura de pantalla.

Código de ejemplo ([Link]):

Explicación de los modos headless y headful.

● Modo headless (sin interfaz): el navegador se

ejecuta en segundo plano sin mostrar una interfaz
gráfica. Es útil para scraping y automatización sin
interacción visual.
● Modo headful (con interfaz): se utiliza
[Link]({ headless: false
}) para mostrar la interfaz del navegador. Es útil
para depurar y ver el comportamiento del script.
3. Primer Script con Puppeteer.

Configuración de Tiempos de Espera (Timeout) y Manejo de Errores.

¿Por Qué es Importante Configurar un Parámetros de Configuración en [Link]

Timeout?. El método [Link](url, options) permite configurar opciones
para la carga de la página. Los dos parámetros más importantes para
En el proceso de scraping, puedes controlar el timeout son:
encontrarte con páginas que tardan mucho
en cargar debido a: ● timeout: Define el tiempo máximo de espera en milisegundos. Si
la página no carga en ese tiempo, Puppeteer lanza un error.
● Problemas de red. ● waitUntil: Define en qué momento Puppeteer considera que la
● Un servidor sobrecargado. página ha terminado de cargarse. Las opciones incluyen:
● Contenido pesado en la página. ○ 'load': Espera a que el evento de carga (load event)
se dispare.
Un timeout establece un límite máximo de ○ 'domcontentloaded': Espera a que el DOM esté
espera para que el navegador cargue la completamente cargado.
página. Si se excede este límite, Puppeteer ○ 'networkidle0': Espera hasta que no haya más de 0
arrojará un error, permitiéndote manejarlo y conexiones de red por al menos 500 ms.
evitar que el script se quede esperando ○ 'networkidle2': Espera hasta que haya no más de 2
indefinidamente. conexiones de red por al menos 500 ms, útil para páginas
con contenido dinámico.
3. Primer Script con Puppeteer.

Ejemplo de Configuración y Manejo de Errores con

timeout.

En el siguiente ejemplo, configuramos un tiempo

máximo de espera de 30 segundos (30,000 ms) y
especificamos que Puppeteer debe esperar hasta que
la red esté inactiva (networkidle2). También Explicación del Código
incluimos un bloque .catch para capturar y manejar el
1. waitUntil: 'networkidle2': Esta opción es
error si la carga falla.
útil para páginas que cargan contenido dinámico
(AJAX) y necesitan un tiempo extra para que los
recursos se terminen de cargar.
2. timeout: 30000: Establece un límite de 30
segundos. Si la página no carga en este tiempo,
Puppeteer lanzará un error TimeoutError.
3. catch(error => ...): Al capturar el error,
puedes realizar acciones como:
○ Intentar recargar la página (reintentos).
○ Registrar el error en un archivo de log para
análisis.
○ Continuar con el siguiente paso sin que el
script se detenga.
3. Primer Script con Puppeteer.

Estrategia de Reintentos en Caso de Error.

Para sitios web donde pueden ocurrir errores de conexión de forma intermitente, puedes implementar una
estrategia de reintento. Esto implica volver a intentar la carga de la página varias veces antes de abandonar el
intento.

Explicación del Código con Reintentos.

1. loadPageWithRetry: Esta función intenta cargar la página

hasta un máximo de maxRetries veces.
2. Bloque try-catch dentro del bucle while:
○ En cada iteración, intenta cargar la página.
○ Si falla, incrementa el contador attempts.
○ Si se alcanzan los intentos máximos (maxRetries),
muestra un mensaje de error final.
3. await [Link](2000): Añade una pausa
de 2 segundos antes de cada reintento. Esto puede ayudar a
evitar problemas de sobrecarga del servidor o problemas
temporales de conexión.
4. Control de Navegación y Manipulación del Navegador.

Creación y cierre de instancias de navegador.

Con Puppeteer, se puede crear una instancia de

Creación y administración de múltiples
navegador con [Link]() y cerrarla
pestañas.
posteriormente con [Link](). Crear y cerrar
instancias de navegador de manera eficiente ayuda a Es posible abrir varias pestañas (o “páginas”)
conservar recursos y mejorar el rendimiento. en una instancia de navegador. Esto es útil
para realizar múltiples tareas en paralelo sin
necesidad de abrir múltiples navegadores.
4. Control de Navegación y Manipulación del Navegador.

Control de navegación: [Link], [Link], [Link]

El método [Link]() permite navegar a una URL específica, mientras que [Link]()
espera a que un elemento aparezca en el DOM. [Link]() es útil para esperar
redirecciones o cargadas completas de páginas.

Manejo de redirecciones y manejo de errores de conexión

Puppeteer permite manejar redirecciones con waitForNavigation, y para manejar errores de conexión, podemos usar bloques try-catch.
5. Selección de Elementos y Extracción de Datos.

Métodos de selección de elementos (querySelector, querySelectorAll, etc.).

Para extraer datos, podemos seleccionar elementos en la página con querySelector y querySelectorAll.
Esto se hace generalmente con [Link]() para ejecutar código en el contexto del navegador.

Extracción de texto y atributos de elementos.

Es posible extraer el texto y atributos como href o src de un elemento.

5. Selección de Elementos y Extracción de Datos.

Extracción de datos en listas y tablas.

Para trabajar con listas o tablas, querySelectorAll permite seleccionar múltiples elementos, y un map puede
recorrer estos datos.

Uso de evaluate para manipulación

avanzada del DOM.

El método evaluate permite ejecutar

funciones JavaScript dentro del contexto del
navegador, permitiendo operaciones
avanzadas de extracción y manipulación de
datos.
6. Automatización de Formularios y Acciones de Usuario.

Simulación de entrada de texto en campos ([Link]).

Para simular la entrada de texto en un campo, utiliza el método [Link], que recibe el selector del campo y el
texto a escribir.

Automatización de clics, botones, y navegación entre páginas.

El método [Link] permite simular un clic en un botón o enlace. Esto es útil para interactuar con botones de
envío o navegación.

Uso de [Link] para manejar selectores y dropdowns.

[Link] permite seleccionar valores en menús desplegables (<select>). Recibe el selector del campo y
el valor a seleccionar.
7. Gestión de Sesiones y Cookies.

Lectura y almacenamiento de cookies. Persistencia de sesiones y ejemplos de scraping

autenticado.
Las cookies se pueden extraer con [Link]()
y almacenar en una variable o archivo para persistir la Para mantener la sesión activa entre distintas
sesión. ejecuciones de scripts, guarda las cookies en un
archivo y cárgalas antes de ejecutar el scraping.

Estrategias para gestionar autenticación en sitios que

requieren login.

Cuando se hace scraping en sitios que requieren autenticación:

1. Usa cookies para evitar reautenticaciones en cada

ejecución.
2. Simula el login sólo si es necesario y reutiliza cookies para
reducir el número de logins.
3. Manejo de sesión persistente usando [Link] y
[Link]().
8. JavaScript Dinámico y AJAX

Detección de carga dinámica de contenido

Muchos sitios modernos cargan contenido dinámico mediante AJAX. Para realizar scraping en estos sitios,
primero identifica el momento en que el contenido se completa en la página.

Esperas explícitas: waitForSelector, waitForFunction

Las esperas explícitas son fundamentales cuando se hace scraping en sitios con contenido dinámico.
waitForSelector espera a que un elemento específico esté disponible en el DOM, mientras que
waitForFunction permite esperar condiciones personalizadas.
8. JavaScript Dinámico y AJAX

Estrategias para scraping en sitios con contenido dinámico (cargas AJAX)

Para extraer datos de sitios con contenido dinámico:

1. Usa waitForSelector para esperar que el contenido esté presente en el DOM.

2. Revisa las llamadas de red (network requests), ya que algunos datos pueden cargarse mediante API.
Puedes interceptarlas con [Link]('request') y analizar sus respuestas.
3. Prueba waitForFunction para esperar que ciertos valores cambien en el DOM o variables de
JavaScript.

Ejemplo de extracción de datos cargados dinámicamente:

9. Manipulación de Scripts y Ejecución de JavaScript

Uso de [Link] para ejecutar scripts personalizados

Con [Link], puedes ejecutar funciones JavaScript en el contexto del navegador, lo que te permite
interactuar directamente con el DOM y manipular datos.
Ejemplo:

Manipulación avanzada de datos extraídos con JavaScript

evaluate permite realizar transformaciones de datos dentro del navegador antes de traerlos a [Link]. Esto
reduce la carga de procesamiento en tu máquina y facilita operaciones complejas.
Ejemplo:
9. Manipulación de Scripts y Ejecución de JavaScript

Extracción de datos de contenido dinámico y ejemplos prácticos

En sitios con mucho contenido dinámico, la extracción puede requerir esperar a que el contenido AJAX esté
disponible, ejecutando múltiples evaluate para seleccionar secciones específicas.

Ejemplo:
10. Captura de Imágenes y Generación de PDFs

Captura de pantallas completas y parciales

Puppeteer permite capturar capturas de pantalla completas o de secciones específicas de la página.

[Link] es útil para depuración y generación de informes visuales.

Ejemplo:

await [Link]({ path: '[Link]', fullPage: true }); // Captura de pantalla completa
await [Link]({ path: '[Link]', clip: { x: 0, y: 0, width: 400, height: 300 } }); // Captura parcial

Captura de elementos específicos de una página

Para capturar solo un elemento, usa page.$eval o [Link] para seleccionar el área y luego usa la
opción clip de screenshot.

Ejemplo:
10. Captura de Imágenes y Generación de PDFs

Generación de PDFs de páginas web: configuración de calidad, dimensiones y opciones de

personalización

Puppeteer permite generar PDFs de páginas con [Link], configurando detalles como márgenes, formato y
calidad de impresión.

Ejemplo:
11. Extracción de Datos en Paginación y Tablas

Extracción de datos en tablas y listas con paginación

Extraer datos en tablas con múltiples páginas implica navegar entre páginas y recolectar datos en cada una. Esto
es común en sitios de búsqueda o directorios.

Ejemplo:

Automatización de la paginación y
scraping de datos paginados

Puppeteer permite automatizar la

navegación por cada página, esperar la
carga y luego extraer datos.

Ejemplo: Este ejemplo combina

paginación y scraping de
resultados de búsqueda con
un bucle para avanzar página
por página.
12. Almacenamiento y Organización de Datos

Guardado de datos en archivos JSON y CSV Integración con bases de datos (MySQL o
MongoDB)
Puppeteer permite exportar datos recolectados en
archivos como JSON y CSV. Esto facilita el análisis y la Para manejar grandes volúmenes de datos, es ideal
exportación de datos. guardar los resultados en una base de datos como
MySQL o MongoDB.
Ejemplo (JSON):
Ejemplo básico con MongoDB:

Ejemplo (CSV):

Organización y estructuración de datos para análisis posterior

Al estructurar los datos en colecciones o bases de datos, se facilita la

consulta y análisis para obtener insights. Diseña el esquema de los datos con
anticipación según el tipo de análisis que realizarás.
Videos YouTube
❏ Clase 1
❏ [Link]
❏ Clase 2
❏ [Link]
❏ Clase 3
❏ [Link]
❏ Clase 4 - 5 - 6 - 7
❏ [Link]

Webs Oficiales
★ [Link]
○ [Link]
★ Puppeteer
○ [Link]
★ Primeros pasos con HTML
○ [Link]
★ ¿Qué es el DOM?
○ [Link]
Temario Completo: Web Scraping con [Link] y Puppeteer

1. Introducción al Web Scraping

4. Control de Navegación y Manipulación del Navegador
● Definición y aplicaciones del web scraping.
● Ética y legalidad: límites y mejores prácticas. ● Creación y cierre de instancias de navegador.
● Conceptos básicos: HTML, DOM (Document ● Creación y administración de múltiples pestañas.
Object Model) y su relación con el scraping. ● Control de navegación: [Link], [Link],
● Introducción a [Link] y Puppeteer. [Link].
● Manejo de redirecciones y manejo de errores de conexión.
2. Preparación del Entorno de Desarrollo
5. Selección de Elementos y Extracción de Datos
● Instalación de [Link].
● Instalación y configuración inicial de Puppeteer. ● Métodos de selección de elementos (querySelector,
● Introducción al archivo [Link] y gestión querySelectorAll, etc.).
de dependencias. ● Extracción de texto y atributos de elementos.
● Configuración del entorno de trabajo en un ● Extracción de datos en listas y tablas.
editor de código. ● Uso de evaluate para manipulación avanzada del DOM.

3. Primer Script con Puppeteer 6. Automatización de Formularios y Acciones de Usuario

● Ejecución de un script básico de Puppeteer. ● Simulación de entrada de texto en campos ([Link]).

● Explicación de los modos headless y headful. ● Automatización de clics, botones, y navegación entre páginas.
● Configuración de tiempos de espera (timeout) y ● Uso de [Link] para manejar selectores y dropdowns.
manejo básico de errores de conexión. ● Ejemplo de login automatizado con autenticación de formularios.
Temario Completo: Web Scraping con [Link] y Puppeteer

7. Gestión de Sesiones y Cookies 10. Captura de Imágenes y Generación de PDFs

● Lectura y almacenamiento de cookies. ● Captura de pantallas completas y parciales.

● Persistencia de sesiones y ejemplos de scraping autenticado. ● Captura de elementos específicos de una página.
● Estrategias para gestionar autenticación en sitios que ● Generación de PDFs de páginas web: configuración de calidad,
requieren login. dimensiones y opciones de personalización.

8. JavaScript Dinámico y AJAX 11. Extracción de Datos en Paginación y Tablas

● Detención de carga dinámica de contenido. ● Extracción de datos en tablas y listas con paginación.
● Esperas explícitas: waitForSelector, waitForFunction. ● Automatización de la paginación y scraping de datos paginados.
● Estrategias para scraping en sitios con contenido dinámico ● Ejemplo práctico: scraping de resultados de búsqueda.
(cargas AJAX).
12. Almacenamiento y Organización de Datos
9. Manipulación de Scripts y Ejecución de JavaScript
● Guardado de datos en archivos JSON y CSV.
● Uso de [Link] para ejecutar scripts ● Integración con bases de datos (MySQL o MongoDB).
personalizados. ● Organización y estructuración de datos para análisis posterior.
● Manipulación avanzada de datos extraídos con JavaScript. ● de selección de elementos (querySelector,
● Extracción de datos de contenido dinámico y ejemplos querySelectorAll, etc.).
prácticos. ● Extracción de texto y atributos de elementos.
● Extracción de datos en listas y tablas.
● Uso de evaluate para manipulación avanzada del DOM.