Puppeteer Go

Ich liebe Puppenspieler - hier kann ich mit den Ideen von The Headless Web - der das Web in einem Browser ohne sichtbaren Browser DOM-curl und sogar Tools wie DOM-curl (Curl, der JavaScript DOM-curl ) erstellt. Ich liebe es, Skripte für den Browser zu erstellen, um Seiten zu bearbeiten und mit ihnen zu interagieren.

Eine Demo, die ich machen wollte, wurde von Capturing 422 live images Post inspiriert, in dem sie ein Puppenspielskript Capturing 422 live images , das zu vielen Seiten navigierte und einen Screenshot machte. Anstatt auf viele Seiten zu gehen, wollte ich viele Screenshots von Elementen auf der Seite machen.

Das Problem, das ich mit Puppeteer habe, ist die Eröffnungs-Strophe, die Sie brauchen, um etwas zu tun. Starten, Tab öffnen, navigieren - es ist nicht komplex, es ist nur mehr Boilerplate, als ich für einfache Skripte erstellen möchte. Deshalb habe ich Puppeteer Go . Es ist nur ein kleines Skript, mit dem ich auf einfache Weise CLI-Dienstprogramme erstellen kann. Es öffnet den Browser, navigiert zu einer Seite, führt Ihre Aktion aus und bereinigt sich anschließend von selbst.

Hör zu.

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

Der obige Code findet das Element h1 in meinem Blog und macht einen Screenshot. Dies ist bei weitem nicht so gut wie die Arbeit von Ire, aber ich fand es klasse zu sehen, ob wir Screenshots von canisuse.com schnell direkt von der Seite ziehen können.

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

Genießen!

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium