Testing funcional con Puppeteer

1
12384

En este tutorial veremos las funciones más básicas de la herramienta Puppeteer y la integraremos con Jest para crear una suite de testing funcional.

¿Qué es Puppeteer?

Puppeteer es una herramienta, desarrollada principalmente por Google, que nos permite utilizar un navegador Chromium/Chrome headless a través del protocolo DevTools. Se ejecuta sobre NodeJS y se instala a través de npm.

Headless
Un navegador headless se ejecuta dentro de un proceso del terminal. Por lo que no es necesario que haya un navegador «real» abierto.

DevTools
El protocolo que permite a Puppeteer instrumentar, inspeccionar y debuggear Chromium.
Este protocolo expone una API que permite utilizar el navegador desde fuera del mismo.

Gráfico que muestra la interacción entre Puppeteer, el protocolo Devtools, chrome, y una aplicación web

Puppeteer puede usarse para:

  • Automatización de procesos web.
  • Testing de extensiones de Chrome.
  • Testing funcional de aplicaciones web.

Este último será el foco de este tutorial.

Instalación

Puppeteer se instala como una dependencia en un proyecto de npm.

Hay que tener en cuenta que la librería viene empaquetada con un ejecutable de Chromium. Por lo que ocupa bastante espacio en el disco (~280 MB).

Si no queremos que se descargue el ejecutable, podemos instalar puppeteer-core, que solo incluye la librería de Puppeteer. En este caso deberemos especificar la ubicación del ejecutable que utilizará.

Uso de la API

En esta sección crearemos algunos scripts sencillos con Puppeteer.
Cada ejemplo estará en un archivo JavaScript que podemos ejecutar con Node:

Creando un navegador

Todos los ejemplos tienen esta estructura:

Si ejecutamos este script con node script.js https://google.com , veremos que aparentemente no hace nada. Esto es porque actualmente se está ejecutando en modo headless.

Ahora, si añadimos estos parámetros a la función de launch:

Podemos ver el proceso en tiempo real y con un delay de un segundo entre comandos.

Obtener el título de la página

Si ejecutamos este script con node script.js https://google.com  deberíamos tener esta respuesta:

Modificando el Viewport

Hasta ahora, estamos utilizando el Viewport por defecto. Si queremos modificarlo para, digamos, simular un dispositivo móvil, podemos hacerlo con:

Esto daría al Viewport una resolución de 1080p.

También existe la posibilidad de sobrescribir el Viewport por defecto con:

Y si queremos probar sobre un dispositivo específico, existe el objeto devices dentro de puppeteer que contiene muchos dispositivos:

Capturando la pantalla

Una vez en una página, podemos usar la función screenshot para capturar la página en una imagen y guardarla en el disco:

evaluate()

La función evaluate nos permite ejecutar código en el contexto de la página del navegador de Puppeteer.

Con este código obtenemos el HTML de la página:

Selectores

$  y $$  funcionan como document.querySelector y document.querysSelectorAll  respectivamente. Nos devuelven la referencia de los elementos seleccionados.

Este código devuelve la referencia al primer enlace y las referencias a todos los parrafos respectivamente:

$eval  y $$eval se parecen a los anteriores, pero en lugar de devolver las referencias, las pasan como parámetro al callback provisto:

Este código devuelve el texto del primer enlace y todos los párrafos respectivamente.

Click

Para hacer click sobre un elemento, tenemos varias opciones disponibles:

Por lo general, la primera opción suele ser la más robusta.

Keyboard

En el siguiente ejemplo, se introducen las credenciales en un formulario de login:

Si quieres aprender en profundidad sobre la API de Puppeteer, échale un vistazo a la documentación oficial (pptr.dev).

Integración con Jest

Para integrar Puppeteer con Jest, utilizaremos la librería jest-puppeteer que se encarga de conectar el navegador con la ejecución de los tests. Para instalar las dependencias:

En la carpeta raíz del proyecto, creamos los archivos de configuración jest.config.js  y jest-puppeteer.config.js :

Y en el package.json  se configura:

jest-puppeteer  se encarga de lanzar el navegador y la página por nosotros y expone un browser y page  global.

Nuestro primer test con Puppeteer probará que el título de google.com  es el correcto. En google-title.test.js:

Si ahora ejecutamos los tests, veremos su resultado:

Cuando la suite de tests acaba, se nos presenta un resumen.

En este tutorial hemos visto las funciones básicas de Puppeteer y cómo integrarla con Jest para nuestros tests funcionales.

1 Comentario

  1. evaluate()
    La función evaluate nos permite ejecutar código en el contexto de la página del navegador de Puppeteer.

    Con este código obtenemos el HTML de la página:

    await page.screenshot({ «/directorio/nombre_fichero.png», type: «png» });

    Creo que page.screenshot no tiene nada que ver con evaluate()… no?

Dejar respuesta

Please enter your comment!
Please enter your name here