Puppeteer Go

Adoro o Puppeteer - ele me permite brincar com as idéias do The Headless Web - que estão rodando a web em um navegador sem um navegador visível e até mesmo construir ferramentas como o DOM-curl (Curl que executa JavaScript). Adoro especificamente o script do navegador para raspar, manipular e interagir com as páginas.

Uma demonstração que eu queria fazer foi inspirada no post Capturing 422 live images de Ire, onde ela executava um script de marionetista que navegava por muitas páginas e fazia uma captura de tela. Em vez de ir para muitas páginas, eu queria tirar muitas capturas de tela de elementos na página.

O problema que tenho com o Puppeteer é a estrofe de abertura de que você precisa fazer qualquer coisa. Iniciar, abrir guia, navegar - não é complexo, é apenas mais um padrão do que eu quero criar para scripts simples. Por isso criei o Puppeteer Go . É apenas um pequeno script que me ajuda a criar utilitários CLI facilmente, que abre o navegador, navega para uma página, executa sua ação e depois limpa-se.

Confira.

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);
      }
    }
});

O código acima encontrará o elemento h1 no meu blog e fará uma captura de tela. Isso não é nem de longe tão bom quanto o trabalho de Ire, mas achei que era legal ver se conseguimos obter rapidamente capturas de tela do canisuse.com diretamente da 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

Apreciar!

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