Cómo automatizar tareas de Google Chrome con Node

¿Sabías que ahora Chrome cuenta con un nuevo modo llamado headless? Este nuevo modo nos permite ejecutar Chrome sin necesidad de una interfaz gráfica y, claro eso nos viene de perlas a los desarrolladores. Podremos realizar pruebas y automatizar distintas tareas del navegador con unas cuentas líneas de código.

Headless Chrome, como he dicho antes, nos permite ejecutar el navegador desde línea de comandos sin tener que abrir ni una sola de sus ventanas. El navegador simulado cuenta con las mismas características que nuestro Chrome de siempre. Es decir, tiene sus mismas funciones y es capaz de abrir páginas webs, ejecutar los distintos procesos, albergar caché... Y no solo eso, esta simulación nos permite interactuar con la web a través de distintos controles. Podremos hacer clic sobre elementos, redimensionar el navegador, introducir texto en campos, seleccionar contenido... Como podrás imaginar, podremos hacer uso de estos controles para realizar nuestras fechorías.

En este tutorial te mostraremos un sencilo ejemplo de cómo realizar una captura de pantalla (algo básico) y te explicaremos por encima como hacer uso de los distintos controles que nos ofrece Headless Chrome.

Debido a que Headless Chrome cuenta con una low-level API, accederemos a él mediante Puppeteer, una librería que nos ayudará a gestionar el navegador.

¿Cómo instalarlo?

Antes que nada, necesitamos tener instalado Node.js para utilizar Puppetter. Y no cualquier Node, debes tenerlo actualizado a las últimas versiones. Así que asegúrate de estar utilizando una versión superior a la 7.6.0.

node --version
v8.3.0

Ahora, inicializa npm e instala Puppetter.

npm init
npm i puppeteer

La instalación te llevará un par de minutillos. Esto se debe a que, a diferencia de otros frameworks para testing headless, lo que hace Puppeteer es descargar una versión de Chromium enterita. Esto te vendrá de perlas ya que no tendrás que configurarlo ni iniciar una instancia local con Chrome a mano.

Vamos a lo que vamos. Crea un fichero index.js con el que trabajar y sigue atento a este tutorial...

Captura de pantalla

Si lo que quieres es capturar la pantalla, con Puppeteer es coser y cantar. Cuenta con un montón de opciones disponibles con los que podrás obtener la captura perfecta que necesitas. Empecemos con un ejemplo básico. Para ello, iniciamos el navegador, abrimos una página y realizamos una captura de todo su contenido.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://programacion.net');
  await page.screenshot({
    path: 'landing-page.png',
    fullPage: true
  });

  browser.close();
})();

Para ejecutar nuestra app de Puppeteer solamente tenemos que llamar al fichero index.js con node. En un proyecto real posiblemente tendrías que contar con scripts npm para automatizar el proceso aún más.

node index.js

Si todo ha ido correctamente, nos aparecerá un archivo llamado landing-page.php en el directorio actual. Por defecto, la captura tiene un tamaño de 800px por 600px, pero si establecemos el parámetro fullPage a true, la imagen resultante tendrá un ancho de 800px y un alto proporcional al contenido total de la página. Vamos, una captura de pantalla completa limitada a 800px de ancho.

Cuando capturamos la pantalla, Puppeteer simula una ventana del navegador con el ancho que le hemos indicado. Si la página que estamos visitando es responsive, obtendremos una captura de lo que se ve en el viewport. Podemos cambiar las dimensiones del viewport mediante el método setViewport.

await page.setViewport({
  width: 1600, 
  height: 1000
});

Podremos modificar nuestro script para realizar más capturas de pantalla de diversos tamaños de dispositivos a través de este método. Es decir, podrás ver de un plumazo si el responsive de tu página es válido o no.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Ann array of viewport sizes for different devices.
  const viewports = [1600, 1000, 800, 600, 500];

  await page.goto('https://programacion.net');

  for(let i=0; i < viewports.length; i++) {
    let vw = viewports[i];

    // The height doesn't matter since we are screenshotting the full page.
    await page.setViewport({
      width: vw,
      height: 1000
    });

    await page.screenshot({
      path: `screen-${vw}.png`,
      fullPage: true
    });
  }

  browser.close();
})();

Al ejecutar este script generaremos cinco imágenes, una por cada viewport que hayamos definido.

Interacción con la UI

Como te he comentado antes, con Puppeteer podremos acceder y controlar todos los elementos de la página. Desde contenido estático como texto e imágenes, hasta elementos interactivos como enlaces, botones, campos... Por lo tanto, mediante estos controles podremos rastrear una página, validar un formulario o copiar todo el texto de una sección concreta.

A continuación puedes ver un ejemplo en el que cargamos un sitio web, abre el formulario de búsqueda y busca por el término Javascript.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false
  });
  const page = await browser.newPage();

  // Open page.
  await page.goto('https://programacion.net');

  // Show search form.
  await page.click('.buscador');

  // Focus input field.
  await page.focus('#buscador input');

  // Type in query.
  await page.type('JavaScript', {delay: 200});

  // Submit the form.
  const searchForm = await page.$('#buscador');
  await searchForm.evaluate(searchForm => searchForm.submit());

  // Keep the browser open.
  // browser.close();
})();