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!

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium