Curso de automatización y web scraping con Node.js y Puppeteer

Vemos varios ejemplos básicos que te permitirán entender los fundamentos de la automatización en la web.

Introducción a la automatización con Puppeteer

Introducción al curso

* En este video te voy a introducir a varias aplicaciones que utilizan Web Scraping. 
 * El link para el proyecto que Daniel desarrolló utilizando Web Scraping: https://www.raptorslovebagels.com/

Introducción al Web Scraping

* Te voy a dar un recorrido de la página que vamos a utilizar para extraer la data: https://nextviaje.now.sh/ 
 * Link al repositorio: https://github.com/Appdelante/web-scraping 
 * Yo desarrollé el código usando la versión 13 de Node.js. Puedes usar cualquier versión de Node igual o mayor a esta.

Descargar repositorio y descripción del proyecto

* Vamos a entrar en la parte de técnica de cómo diseñar nuestra estrategia para el scraping. 
 * Luego vamos a escribir el código para conseguir el URL de cada una de las casas

Definir estrategia de scraping y conseguir URL de cada casa


          * Vamos a continuar escribiendo nuestro script para extraer la data. Nos vamos a enfocar en las imágenes, título y ubicación de la casa
        

Extraer imágenes, título y ubicación

* Vamos a continuar escribiendo nuestro script para extraer la data. Nos vamos a enfocar en el precio y las comodidades

Extraer precio y comodidades

* Vamos a continuar escribiendo nuestro script para extraer la data. Nos vamos a enfocar en los servicios, número de estrellas y número de opiniones

Extraer servicios, número de estrellas y número de opiniones

* Vamos a extraer la data de cada una de las casas y la vamos a guardar en un archivo JSON en el directorio del proyecto

Extraer data de todas las casas y guardarla en un archivo de JSON

* Vamos a extraer la data de cada una de las casas y la vamos a guardar en MongoDB 
 * IMPORTANTE: tienes que tener a MongoDB instalado y corriendo. Aquí te dejo el link para la instalación: https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/ 
 * Tutorial para la instalación: https://www.youtube.com/watch?v=FwMwO8pXfq0 
 * Link para descargar MongoDB compass: https://www.mongodb.com/download-center/compass

Extraer data de todas las casas y guardarla en una base de datos

* Vamos a crear un API para exponer la data que scrapeamos y guardamos en MongoDB. 
 * Link a extensión para que los JSON se vean formateados en Chrome: https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=en

Exponer data que scrapeamos en un API

* Para poder analizar la data necesitamos transforma el JSON a un archivo CSV.

Análisis de data - Parte 1 - Convertir JSON a CSV

* Vamos a utilizar Google Spreadsheet para analizar la data de las casas y responder preguntas interesantes.

Análisis de data - Parte 2 - Utilizar Google Spreadsheet para entender la data

* ¡Terminaste este módulo! 
 * Aprendiste cómo hacer web scraping, guardar en archivos JSON, guardar en una base de datos, exponer la data en un API y analizar la data 
 * Cualquier comentario o duda me lo puedes enviar a ricardo@appdelante.com

Conclusiones y cierre del módulo de Web Scraping

Web Scraping

* En este video te voy a mostrar el objetivo del proyecto y la arquitectura que vamos a utilizar para generar las historias.

Introducción y objetivo del proyecto

* En este video te voy a mostrar el objetivo del proyecto y la arquitectura que vamos a utilizar para generar las historias. 
 * Link al repositorio: https://github.com/Appdelante/generador-de-imagenes

Descargar repositorio e introducción al código

* Para generar imágenes que sean únicas tenemos que utilizar números aleatorios. 
 * En este video te voy a dar una introducción a la generación de números aleatorios con JavaScript. 
 * La fórmula final que vamos a utilizar es: Math.floor(Math.random() * (max - min) + min);

Introducción al uso de números aleatorios

* En este video vamos a partir una oración en agrupaciones de palabras. 
 * Para lograr esto vamos a utilizar la fórmula que vimos en el video pasado. 
 * Por último vamos a insertar el texto en el DOM

Insertar texto al DOM

* Continúamos introduciendo elementos a nuestro generador. 
 * Vamos a asignarle colores al texto y al fondo de manera aleatoria.

Introducir color de texto y fondo


          * Vamos a usar los números aleatorios para posicionar el contendor del texto en una de las esquinas del window.
        

Posicionar y rotar el texto

* Vamos a introducir una imágen aleatoria y jugar con el font-size. 
 * Para las imágenes vamos a utilizar la plataforma Unsplash: https://unsplash.com/

Insertar imagen y tamaño de letra

* Llegamos a la parte de Puppeteer. Vamos a utilizar la funcionalidad que nos permite tomar screenshots para tomarle una foto al render de nuestro index.html. 
 * Vamos a utilizar las dimensiones de una historia de Instagram.

Script para generar las imágenes

Generador de historias para Instagram

* Cualquier duda déjala en los comentarios del video en el que aplica. Si tienes otras preguntas no dudes en contactarme en daniel@appdelante.com

Introducción al proyecto: Tests de automatización de UI

* Link al repositorio: https://github.com/Appdelante/tests_clontagram 
 * Recuerda utilizar la versión más nueva disponible de Node.js

Incializar Proyecto

Tests de UI - Intro al Proyecto

* Explico porque utilizamos 'require' en lugar de 'import' 
 * Escribimos código para navegar al signup de Clontagram

Crear función para automatizar signup a Clontagram

* Automatizamos el signup a Clontagram con valores 'hardcoded'

Automatizar llenar el formulario de signup

* Escribimos una función para generar datos de usuario random que podemos usar en el signup 
 * Esto lo hacemos con el módulo nativo de Node.js 'crypto'

Generar data de usuarios para el signup

* El patrón POM nos permite crear un modelo de las acciones que se pueden tomar en una página 
 * Ese modelo tambien encapsula los selectores de la página y lógica que no queremos exponer a los clientes

Abstraer página de signup usando el patrón POM

* Creamos un módulo cuyo propósito es contener los URLs de Clontagram 
 * Los vamos a reusar en muchos lugares. Centralizarlos nos ayudará a mantenerlos ordenados

Crear módulo para centralizar URLs de Clontagram

* Rápida introducción al framework de testing creado por Facebook: Jest 
 * Jest es una herramienta que nos permite ejecutar tests y también incluye funciones para hacer validación 
 * describe() es una función para agrupar tests que están relacionados

Introducción a escribir tests con jest

* Envolvemos a la lógica de hacer signup en un test 
 * Cambiamos el timeout del test a 15,000 milisegundos. El valor default es 5,000, lo cual no es suficiente para completar la ejecución del código. Es importante que entiendas esto. Si el test no retorna en menos de 15,000 milisegundos será reportado que falló

Escribir el esqueleto del test de signup

* Movemos la lógica de inicializar el browser a beforeEach(), una función que es ejecutada antes de cada test 
 * Apagamos el browser luego de cada test mediante afterEach()

Inicializar y apagar el browser con beforeEach y afterEach

* Creamos modelo para la página del Feed 
 * Luego de hacer signup verificamos que estamos en la página del feed. Esta es la condición que nos indica que el test pasó

Verificar que hacer signup nos lleva a la página feed

* Los tests no solo deben verificar el funcionamiento correcto de nuestra aplicación. También queremos verificar que cuando hay errores son manejados de forma correcta 
 * Verificamos que hacer signup con un email o username que ya están registrados le muestra un error al usuario

Escribir tests para signup con email y username ya existentes

Tests de UI - Tests de Signup

* Creamos el modelo para la página de login usando el patrón POM

Crear modelo para la página de login

* Crear un browser y navegar a una página es algo que vamos a hacer en todos los tests. Para evitar duplicar esta lógica la podemos envolver en una función. Esto es lo que llamamos la fábrica de páginas

Crear fábrica de páginas para abstraer la creación de páginas

* Escribimos el primer test de login 
 * Hacer login con credenciales válidas debe llevar el usuario al feed

Agregar test para login con credenciales validas

* La barra donde los errores son mostrados en Clontagram es reutilizada por muchas páginas 
 * La lógica de verificar que un error es mostrado es un candidato excelente para la 'página base '
 * Nuestras otras páginas extienden a la 'página base' para heredar lógica que es común entre ellas 
 * Con este cambio verás lo fácil que escribir los tests para login con credenciales inválidas

Crear modelo para página base y escribir test para login con credenciales inválidas

* Creamos un usuario especial que solo será utilizado en el test de login con credenciales válidas 
 * Hacemos esto porque el test de login con credenciales válidas requiere que el feed del usuario este vacío 
 * Debemos asegurarnos de que este usuario no suba ninguna foto y que tampoco siga a nadie

Agregar usuario para el test de login con credenciales válidas

Tests de UI - Tests de Login

* Evaluamos las diferentes maneras en que podemos modelar a la barra de navegación 
 * Decidimos que crear un módulo dedicado para la barra de navegación es la solución más simple. Las demás opciones son complejas o no se prestan a permitir que el códio sea reutilizado 
 * Escribimos el esqueleto del test de upload. Tener que usar la lógica de login en el beforeEach() no es ideal. Esto lo vamos a mejorar más adelante en el curso

Crear esqueleto para tests de upload y explorar opciones para lógica de la barra de navegación

* Creamos el modelo básico de la página de upload foto 
 * Creamos al módulo para permitirnos usar la barra de navegación de Clontragram

Implementar barra de navegación y empezar modelo para la página upload

* Escribimos un test básico que consiste en verificar que un usuario puede navegar a la página de upload

Escribir test para verificar que navegar a la página upload funciona

* Automatizamos llenar el caption del post y elegir una foto 
 * Fíjate en como elegimos la foto: llamamos a page.waitForFileChooser() y luego hacemos el click que activa el selector de archivos del navegador. Este patrón de promesas lo vamos a usar bastante 
 * No olvides que con path.join() creamos direcciones a archivos que funcionan en todos los sistemas operativos

Automatizar el subir una imágen y escribir un caption

* Si hacemos click en el botón 'Post' antes de que la imágen haya sido subida veremos un error. Para corregir esto simplemente esperamos a que la imágen aparezca en el DOM

Verificar que la imagen fue subida antes de hacer click en post

* Luego de crear un post el usuario es llevado al feed donde lo puede ver 
 * En este video escribimos funciones en el modelo de la página feed para obtener el caption y username del post más reciente. Con esto podemos verificar que el flow de crear un post funciona correctamente

Verificar que subir una imagen hace que aparezca en el feed

* Para hacer a nuestro test más robusto usamos un caption random que generamos con el módulo crypto 
 * De esta forma evitamos validar siempre por la misma información

Randomizar el caption que usamos al subir una imagen

Tests de UI - Tests de Upload

* IMPORTANTE: El test de likes requiere que el post no tenga un like del usuario de prueba. Si esta condición no se cumple entonces el test va a fallar 
 * NO USES EL MISMO USUARIO QUE YO CREÉ. Ve a beta.clontagram.com y crea tu propio usuario para estos tests

Crear esqueleto para tests de post y agregar usuario que dará likes y comentarios

* Dar un like hace que la aplicación le agrege una clase al ícono de corazón llamada 'text-red-dark'. Esta es la condición que usamos para saber cuando el like fue dejado exitósamente

Crear modelo para la página post y navegar a ella

* Al correr el test nos damos cuenta de que luego de hacer click en 'login' no esperamos suficiente tiempo para que el token de autenticación se guarde en el navegador. Por esto nunca llegamos a la página del post 
 * Esto lo corregimos utilizando a page.waitForResponse() para solo cargar la página del post cuando nos haya llegado la respuesta de la ruta de login 
 * Nos enfrentamos a un problema similar al dar los likes: el corazón solo se vuelve rojo cuando llega la respuesta del servidor con el status code 200 
 * Para corregir esto usamos el mismo patrón: esperamos a que llegue la respuesta de la ruta /likes antes de verificar que el corazón este lleno.

Escribir test de dar y quitar like en un post

* Escribir el test de los likes nos mostró lo horrible que es tener que hacer el login en beforeEach() 
 * Esto hace que nuestro test sea lento y resulta en sobre-testear a nuestra aplicación 
 * Para mejorar esto vamos a obtener el token de autenticación directamente del API de Clontagram y se lo vamos a inyectar al navegador

Crear función para obtener token de autenticación del API de clontagram

* Creamos una nueva función en la fábrica de páginas para accesar páginas que requieren autenticación 
 * El token de autenticación de Clontagram se guarda en el Local Storage de tu navegador. Inyectarlo allí resulta en que los pedidos de nuestra página pasan la autenticación de Clontagram 
 * Esto es fantástico porque nuestros tests que requieren un usuario autenticado ya no necesitan utilizar el formulario de login

Escribir función para accesar páginas que requieren autenticación

* Utilizamos a crearPaginaQueRequiereAutenticacion() en el archivo de tests de upload

Usar fábrica de páginas que requieren autenticación en tests de upload

Agregamos funciones al modelo de la página post para dejar comentarios y obtener el texto del comentario más reciente

Agregar funcionalidad para dejar y extraer comentarios en posts

* Escribimos el test de dejar comentarios 
 * Esperamos a que llegue la respuesta de la ruta /comentarios antes de validar que el comentario aparece en la página

Escribir test para la funcionalidad de dejar comentarios en posts

* Este video lo estoy publicando un poco despues de que lanzamos el curso. Te enseño como corregir un bug en nuestros tests de dar likes y comentarios que hace que fallen por una condición de carrera.

Corregir condición de carrera en tests de dar likes y comentarios

Tests de UI - Tests de Post (Likes y Comentarios)

* Empezamos a centralizar la configuración de Jest y Puppeteer que tenemos viviendo en muchos lugares 
 * Jest nos permite exponer variables globales a todos nuestros tests. Esto es muy útil pero tambien peligroso 
 * Usamos la convención de nombrar a variables globales con dos underscores al principio y fin. Por ejemplo: __VARIABLE_GLOBAL__ 
 * IMPORTANTE: Quizás mis valores de timeout sean muy bajos para ti. Esto depende de donde vives en relación al servidor de beta.clontagram.com. Increméntalos si vez que los tests fallan por timeouts

Agregar módulo de configuración base

* Clontagram esta diseñado para desktop y móbil. En este video agregamos configuración para emular a ambos ambientes en puppeteer 
 * Hay muchas resoluciones que puedes emular. Lee la documentación Puppeteer para ver cuales están disponibles

Escribir configuración para correr tests en resoluciones desktop y mobile

* ¡Ha sido un placer tenerte como estudiante! Espero que te haya gustado este módulo 
 * Cualquier comentario o duda me lo puedes enviar a daniel@appdelante.com

Introducción al curso