Puppeteer: una biblioteca de Node.js para controlar Chrome sin interfaz grafica

Descubre Puppeteer, la API de nodo de Chrome sin interfaz grafica de código abierto.

En la última vez, han aparecido muchos navegadores sin cabeza basados ââen Chromium como Chromeless, Chrominator, Navalia, Lambdium y otros, lo que dificulta la decisión de qué marco de prueba de navegador elegir. Es por eso que hoy, queremos compartir con ustedes uno de los marcos de prueba de navegadores más increíbles para elegir con Node.js, estamos hablando de Puppeteer, un proyecto liderado por el equipo de Herramientas para desarrolladores de Google Chrome.

Que es Puppeteer

Básicamente, Puppeteer es una biblioteca de nodo que proporciona una API de alto nivel para controlar un Chrome sin cabeza a través del protocolo DevTools. También se puede configurar para usar Chrome completo. La mayoría de las cosas que puede hacer manualmente en el navegador se pueden hacer utilizando Puppeteer y su API, por ejemplo:

Genere capturas de pantalla y PDF de páginas.
Rastrear un SPA y generar contenido pre-renderizado (es decir, "SSR").
Extraer contenido de sitios web.
Automatice el envío de formularios, las pruebas de IU, la entrada de teclado, etc.
Cree un entorno de pruebas automatizado y actualizado. Ejecute sus pruebas directamente en la última versión de Chrome utilizando las últimas funciones de JavaScript y del navegador.
Capture un seguimiento cronológico de su sitio para ayudar a diagnosticar problemas de rendimiento.

Instalación de Puppeteer

Cuando instalas Puppeteer usando un administrador de paquetes como NPM o Yarn, descarga una versión reciente de Chromium (que pesa aproximadamente ~ 71Mb en Mac, ~ 90Mb en Linux, ~ 110Mb en Windows) que está garantizado para funcionar con la API. Eso significa que, a diferencia de otros marcos de prueba de navegadores, no se preocupará por mantener su propia instancia de chrome / chromium y ejecutar el servidor sin cabeza con la línea de comandos.

Como se mencionó, puede instalar Puppeteer usando NPM o Yarn con Node.js. Simplemente ejecute cualquiera de los siguientes comandos en la terminal:

REM Si usas NPM:
npm i puppeteer

REM O con yarn
yarn add puppeteer

Después de la instalación, podrá controlar el navegador sin cabeza requiriendo el módulo titiritero en algún archivo JS. Para obtener más información sobre la biblioteca y su código fuente, no olvide visitar el repositorio oficial en Github aquí .

Requisitos

Originalmente, Puppeteer requería que Node.js 7.x funcionara, ya que usa la palabra clave await en el código fuente, lo que hace que el código asincrónico sea más fácil de leer y comprender. Sin embargo, para proporcionar compatibilidad con versiones anteriores de Node.js (y LTS), puppeteer ahora se puede usar con Node.js Versión 6.x (desde la versión v0.10.0 ), eso significa que puede usarlo con una versión LTS de node. instalado:

REM Necesita imprimir al menos la versión 6
node -v

Con Puppeteer podrás crear capturas de pantalla, generar archivos PDF, pruebas automatizadas y muchas otras tareas.

Ejecución de un guión con Puppeteer

Para ejecutar algunas tareas con Puppeteer, solo necesita conocimientos básicos de Node.js. Instale el módulo titiritero en su proyecto, cree un archivo de script script.jsy escriba el código que usa Puppeteer en su interior, en este caso vamos a crear una captura de pantalla de Our Code World con el siguiente código (copie y pegue el código dentro del script.jsarchivo) :

// Requerir puppeteer
const puppeteer = require('puppeteer');

(async () => {
    // Crea una instancia del navegador Chrome
    const browser = await puppeteer.launch();

    // Crea una nueva pagina
    const page = await browser.newPage();

    // Establecer algunas dimensiones a la pantalla
    page.setViewport({
        width: 1920,
        height: 1080
    });

    // Navegar a Our Code World
    await page.goto('http://ourcodeworld.com');

    // Cree una captura de pantalla del sitio web Our Code World
    await page.screenshot({
        path: 'screenshot.png'
    });

    // Cerar explorador
    browser.close();
})();

Finalmente, simplemente ejecute el script con Node usando:

node script.js

Y solo tendrías que esperar hasta que finalice la tarea, luego encontrará una captura de pantalla de Our Code World en el mismo directorio del archivo script.js.

Usar las herramientas de desarrollo

¡Lo más asombroso de Puppeteer es la posibilidad de usar las herramientas de desarrollo de Chrome mientras usa Chrome bajo el capó! No olvide deshabilitar el modo de navegador sin cabeza en su secuencia de comandos de inicialización:

// Requerir puppeteer
const puppeteer = require('puppeteer');

(async () => {
    // Crea una instancia del navegador Chrome
    // Pero activando interfaz grafica
    const browser = await puppeteer.launch({
        headless: false
    });

    // Crea una nueva pagina
    const page = await browser.newPage();

    // Establecer algunas dimensiones a la pantalla
    page.setViewport({
        width: 1920,
        height: 1080
    });

    // Navegue a Our Code World
    await page.goto('http://ourcodeworld.com');

    // Cree una captura de pantalla del sitio web Our Code World
    await page.screenshot({
        path: 'screenshot.png'
    });

    // No cierre mediante script, sino manualmente
    // cerrando la ventana de chromium!
    // browser.close();
})();

El script iniciaría el proceso de chrome y podrás usar las herramientas de desarrollo como de costumbre, simplemente increíble, ¿verdad?

Contribuyendo a Puppeteer

Puppeteer es un proyecto de código abierto, por lo que los informes de problemas y las contribuciones de código son bienvenidos en el repositorio oficial de Github . El equipo de Chrome DevTools mantiene la biblioteca, sin embargo, si puede ayudar, puede hacerlo, así que no olvide consultar las pautas de contribución del proyecto aquí .