Puppeteer Go

J'adore Puppeteer - cela me permet de jouer avec les idées de The Headless Web - c'est-à-dire faire tourner le Web dans un navigateur sans navigateur visible et même construire des outils comme DOM-curl (Curl DOM-curl JavaScript). En particulier, j'adore écrire des scripts dans le navigateur pour gratter, manipuler et interagir avec des pages.

Une démo que je voulais faire était inspirée par le message Capturing 422 live images d'Ire, Capturing 422 live images lequel elle Capturing 422 live images un script de marionnettiste qui permettait de parcourir plusieurs pages et de prendre une capture d'écran. Au lieu d'aller sur plusieurs pages, je voulais prendre de nombreuses captures d'écran des éléments de la page.

Le problème que j'ai avec Puppeteer est la strophe d'ouverture sur laquelle vous devez faire quelque chose. Lancement, onglet Ouvrir, navigation - ce n’est pas complexe, c’est plus que ce que je veux créer pour de simples scripts. C'est pourquoi j'ai créé Puppeteer Go . C'est juste un petit script qui m'aide à créer facilement des utilitaires CLI qui ouvrent le navigateur, accèdent à une page, effectuent l'action votre et se nettoient ensuite.

Vérifiez-le.

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

Le code ci-dessus va trouver l'élément h1 dans mon blog et prendre une capture d'écran. C’est loin d’être aussi bon que le travail d’Ire, mais j’ai pensé qu’il était intéressant de voir si nous pouvons rapidement extraire des captures d’écran de canisuse.com directement à partir de la page.

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

Prendre plaisir!

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium