Puppeteer Go

Me encanta Puppeteer, me permite jugar con las ideas de The Headless Web , que es ejecutar la web en un navegador sin un navegador visible e incluso crear herramientas como DOM-curl (Curl que ejecuta JavaScript). Específicamente, me encanta crear scripts en el navegador para raspar, manipular e interactuar con las páginas.

Una demostración que quería hacer se inspiró en la publicación Capturing 422 live images de Ire, donde ejecutó un guión titiritero que Capturing 422 live images por muchas páginas y tomaría una captura de pantalla. En lugar de ir a muchas páginas, quería tomar muchas capturas de pantalla de elementos en la página.

El problema que tengo con Puppeteer es la estrofa de apertura que necesitas para hacer cualquier cosa. Iniciar, abrir pestaña, navegar: no es complejo, es más repetitivo de lo que quiero crear para scripts simples. Por eso creé Puppeteer Go . Es solo un pequeño script que me ayuda a crear utilidades CLI fácilmente que abre el navegador, navega a una página, realiza su acción y luego se limpia después de sí mismo.

Echale un vistazo.

const { go } = require('puppeteer-go');

go('https://paul.kinlan.me', async (page) => {
    const elements = await page.$$("h1");
    let count = 0;
    for(let element of elements) {
      try {
        await element.screenshot({ path: `${count++}.png`});
      } catch (err) {
        console.log(count, err);
      }
    }
});

El código anterior encontrará el elemento h1 en mi blog y tomará una captura de pantalla. Esto no es tan bueno como el trabajo de Ire, pero pensé que era bueno ver si podemos obtener rápidamente capturas de pantalla de canisuse.com directamente desde la página.

const { go } = require('puppeteer-go');

go('https://caniuse.com/#search=css', async (page) => {
    const elements = await page.$$("article.feature-block.feature-block--feature");
    let count = 0;
    for(let element of elements) {
      try {
        await element.screenshot({ path: `${count++}.png`});
      } catch (err) {
        console.log(count, err);
      }
    }
});
4.png
3.png
2.png
1.png
0.png

¡Disfrutar!

Picture of me smiling.

Paul Kinlan

I lead the Chrome Developer Relations team at Google.

We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.

Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.

RSS Github Medium