Puppeteer Go

Saya suka Puppeteer - ini memungkinkan saya bermain-main dengan ide-ide The Headless Web - yang menjalankan web di browser tanpa browser yang terlihat dan bahkan membangun alat-alat seperti DOM-curl (Curl yang menjalankan JavaScript). Secara khusus saya suka membuat skrip pada browser untuk mengikis, memanipulasi, dan berinteraksi dengan halaman.

Satu demo yang ingin saya buat terinspirasi oleh posting Capturing 422 live images Ire di mana ia menjalankan skrip dalang yang akan menavigasi ke banyak halaman dan mengambil tangkapan layar. Alih-alih pergi ke banyak halaman, saya ingin mengambil banyak screenshot elemen di halaman.

Masalah yang saya miliki dengan Dalang adalah bait pembuka yang perlu Anda lakukan apa pun. Luncurkan, Buka tab, navigasi - ini tidak rumit, hanya lebih sederhana daripada yang ingin saya buat untuk skrip sederhana. Itu sebabnya saya membuat Puppeteer Go . Itu hanya skrip kecil yang membantu saya membangun utilitas CLI dengan mudah yang membuka browser, menavigasi ke halaman, melakukan tindakan your dan kemudian membersihkan sendiri.

Saksikan berikut ini.

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

Kode di atas akan menemukan elemen h1 di blog saya dan mengambil tangkapan layar. Ini sama sekali tidak sebagus karya Ire, tapi saya pikir itu rapi untuk melihat apakah kita dapat dengan cepat menarik tangkapan layar dari canisuse.com langsung dari halaman.

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

Nikmati!

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium