How to invoke Chrome Node Screenshot from the console?

Question

I know you can capture a single html node vial the command prompt, but is it possible to do this programmatically from the console similar to Puppeteer? I'd like to loop all elements on a page and capture them for occasional one-off projects where I don't want to set up a full auth process in puppeteer.

I'm referring to this functionality:

But executed from the console like during a foreach or something like that.

See the puppeteer reference here.

Something to the effect of this:

$x("//*[contains(@class, 'special-class-name')]").forEach((el)=> el.screenshot())

Answer 1

I just made a script that take a screenshot every submit button in Google main page. Just take a look and take some inspiration from it.

const puppeteer = require('puppeteer')

;(async () => {
    const browser = await puppeteer.launch({
        headless:false,
        defaultViewport:null,
        devtools: true,
        args: ['--window-size=1920,1170','--window-position=0,0']
    })

    const page = (await browser.pages())[0]

    const open = await page.goto ( 'https://www.google.com' )

    const submit = await page.$$('input[type="submit"]')

    const length = submit.length

    let num = 0

    const shot = submit.forEach( async elemHandle => {
        num++
        await elemHandle.screenshot({
            path : `${Date.now()}_${num}.png`
        })
    })

})()