Puppeteer Go

मुझे The Headless Web पसंद है - यह मुझे The Headless Web के विचारों के साथ खेलने की सुविधा देता है - जो कि एक दृश्यमान ब्राउज़र के बिना वेब में चल रहा है और यहां तक कि DOM-curl (कर्ल जो जावास्क्रिप्ट चलाता है) जैसे उपकरण भी बनाता है। विशेष रूप से मुझे ब्राउज़र को स्क्रीप्ट करने, हेरफेर करने और पृष्ठों के साथ सहभागिता करने में स्क्रिप्टिंग पसंद है।

एक डेमो जो मैं बनाना चाहता था, वह Capturing 422 live images के Capturing 422 live images पोस्ट से प्रेरित था जहाँ उसने एक कठपुतली की स्क्रिप्ट चलाई थी जो कई पृष्ठों पर नेविगेट करेगी और एक स्क्रीनशॉट लेगी। कई पृष्ठों पर जाने के बजाय, मैं पृष्ठ पर तत्वों के कई स्क्रीनशॉट लेना चाहता था।

मेरे पास कठपुतली के साथ जो समस्या है, वह एक प्रारंभिक श्लोक है जिसे आपको कुछ भी करने की आवश्यकता है। लॉन्च, ओपन टैब, नेविगेट करें - यह जटिल नहीं है, यह सरल स्क्रिप्ट के लिए बनाने की तुलना में सिर्फ अधिक बॉयलरप्लेट है। इसलिए मैंने Puppeteer Go बनाया। यह सिर्फ एक छोटी सी स्क्रिप्ट है जो सीएलआई उपयोगिताओं को आसानी से बनाने में मदद करती है जो ब्राउज़र को खोलती है, एक पेज पर नेविगेट करती है, your एक्शन करती है और उसके बाद खुद को साफ करती है।

इसकी जांच - पड़ताल करें।

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

उपरोक्त कोड मेरे ब्लॉग में h1 तत्व को खोजेगा और स्क्रीनशॉट लेगा। यह कहीं नहीं के रूप में पास के काम के रूप में अच्छा है, लेकिन मैंने सोचा कि यह देखने के लिए साफ था कि क्या हम पेज से सीधे canisuse.com से स्क्रीनशॉट खींच सकते हैं।

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

का आनंद लें!

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