Puppeteer: Una API para controlar Chrome programáticamente

puppeteer-una-api-para-controlar-chrome-programaticamente


Puppeteer es una librería de Node que proporciona una API de alto nivel para controlar Chrome o Chromium a través del protocolo DevTools de manera Headless; lo que significa que interactuamos con Chrome sin la interfaz gráfica, es decir  sin un navegador como tal. Puppeteer está disponible en Javascript, en Python y como servicio web.

Algunas Funcionalidades:

  • Probar características modernas como: módulos ES6, css grid, service worker, push notifications, real DOM vs JSDOM.
  • Acceso al Devtools: network throttling, device emulation, code coverage.
  • Escribir scripts automáticos para: tomar screenshots, crear PDF.
  • Inyectar estilos y scripts en la página.
  • Formularios automatizados, probar entradas de teclado.
  • Probar interfaz de usuario

Para Javascript, la librería está soportada desde la versión 6 de node. Al descargar Puppeteer desde npm, automáticamente se descarga Chromium. Chromium es un navegador open source, en el que Chrome está basado, pero con características adicionales.

Una de las características más interesantes de Puppeteer es poder hacer pre-renderizado y ayudar a ejecutar server side rendering (SSR). El objetivo del pre renderizado es tomar una página web de tipo client-side single page y convertirla a una versión estática.

Para completar el proceso del SSR, después de que Puppeteer retorna la página estática, se envía el resultado a un servidor Web que se encarga de renderizarlo. Esto puede ayudar al SEO así como a suministrar metadatos a los canales de redes sociales.

Algunas optimizaciones del pre-renderizado con Puppeteer son:

  • No esperar a que toda la página cargue.
  • Se puede hacer pre-renderizado y activar la cache, para cargar la página aún más rápido.

Otra funcionalidad  es la posibilidad de analizar  qué características de tu sitio web no están disponibles para la búsqueda de Google Bot.  Esta es una señal de advertencia para identificar qué cosas no se renderizarán correctamente en Google Search.

Por su parte, Puppeteer puede ser usado para Web scraping. Esta es una técnica que se utiliza para extraer información de un sitio Web para diferentes propósitos, como obtener datos de personas, correo electrónicos, números telefónicos, información masiva de un gremio especìfico para hacer marketing, entre otros.

Hay que resaltar que a través de Puppeteer se pueden automatizar tareas que manualmente podrían requerir mucho esfuerzo y tiempo. Por ejemplo, una de mis tareas en el área de mantenimiento es actualizar periódicamente los sitios de los clientes, a continuación se  revisa que los estilos y el diseño siga intacto, sin ningún tipo de inconsistencia visual.

Para evitar las visitas a los sitios y disminuir el tiempo invertido en ese proceso, se implementó un script que permite automatizarlo:

  1. Ingresa a n enlaces internos de una página.
  2. Toma una captura de pantalla por cada enlace.
  3. Ejecuta la actualización respectiva.
  4. Nuevamente realiza la captura y compara el antes y después de la actualización.

Este script arroja una advertencia cuando un sitio ha cambiado, solo en dicho caso me dirijo a revisarlo.

Estas son solo algunas anotaciones de las funcionalidades de Puppeteer, una herramienta interesante que puedes empezar a utilizar en tu entorno de trabajo, pues te permite ahorrar tiempo en diversas tareas. Si tienes algún proceso manual donde intervenga el navegador, puedes echar un vistazo a Puppeteer y solucionarlo.