Puppeteer Go

I love Puppeteer - it lets me play around with the ideas of The Headless Web - that is running the web in a browser without a visible browser and even build tools like DOM-curl (Curl that runs JavaScript). Specifically I love scripting the browser to scrape, manipulate and interact with pages.

One demo I wanted to make was inspired by Ire’s Capturing 422 live images post where she ran a puppeteer script that would navigate to many pages and take a screenshot. Instead of going to many pages, I wanted to take many screenshots of elements on the page.

The problem that I have with Puppeteer is the opening stanza that you need to do anything. Launch, Open tab, navigate - it’s not complex, it’s just more boilerplate than I want to create for simple scripts. That’s why I created Puppeteer Go. It’s just a small script that helps me build CLI utilities easily that opens the browser, navigates to a page, performs your action and then cleans up after itself.

Check it out.

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

The above code will find the h1 element in my blog and take a screenshot. This is nowhere near as good as Ire’s work, but I thought it was neat to see if we can quickly pull screenshots from canisuse.com directly from the 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

Enjoy!

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium

Likes

Y.I pachi そな太@Swift始めました Judah ‘austere religious scholar’ Gabriel Riccardo Erra Vikram is hiring! 👩‍💻 👨‍💻 👾 Ринат Валиуллов Hiro Tejúmádé Dion Almaer jimboy eat world Ukpai Chukwuemeka Jens Grochtdreis Martin Schierle Akuma Isaac Akuma Ivan dovyden Nutricious 🍉 🍏 Jecelyn Yeen Ire Aderinokun Henry Lim ✈️ 🇲🇾 🇹🇼 mike geyser ⟨ 🐘 ⁄ ⟩ Thomas Steiner Awais Saurabh Rajpal #WeAreWebinion Jabran Rafique ⚡️ Rihanna Kedir 💙 Majid Hajian Stefan Fejes Jul Kinuko Yasuda / 安田絹子 Brenton Mohamed Jbeli Lucas Rosa Noel Andre 🦄 Yohan Totting

Reposts

Priya Ranjan ⚛ jose luis yana Martin Schierle Satya Kresna Henry Lim ✈️ 🇲🇾🇹🇼 Ire Aderinokun Max Filacchioni Comandeer Dan Jenkins Miguel Carlos Martínez Díaz, queue jumper Yang Guo

Comments and Replies

Ire AderinokunIre Aderinokun
This is such a neat library!
Yoshi Yamaguchi 🇮🇳Yoshi Yamaguchi 🇮🇳
I thought it was "puppeteer for Go programming language" that I have been looking for like chromedp. github.com/chromedp/chrom…
Paul KinlanPaul Kinlan
:) you're not the first person to say that. I blame golang for picking a good name :)