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!

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