Capture DOM element screenshot using Chrome headless

index.js

const puppeteer = require('puppeteer');

(async () => {

    const browser = await puppeteer.launch();
    const page = await browser.newPage();
// Adjustments particular to this page to ensure we hit desktop breakpoint.
    page.setViewport({width: 1000, height: 600, deviceScaleFactor: 1});

    await page.goto('https://www.chromestatus.com/samples', {waitUntil: 'networkidle'});

    /**
     * Takes a screenshot of a DOM element on the page, with optional padding.
     *
     * @param {!{path:string, selector:string, padding:(number|undefined)}=} opts
     * @return {!Promise<!Buffer>}
     */
    async function screenshotDOMElement(opts = {}) {
        const padding = 'padding' in opts ? opts.padding : 0;
        const path = 'path' in opts ? opts.path : null;
        const selector = opts.selector;

        if (!selector)
            throw Error('Please provide a selector.');

        const rect = await page.evaluate(selector => {
            const element = document.querySelector(selector);
            if (!element)
                return null;
            const {x, y, width, height} = element.getBoundingClientRect();
            return {left: x, top: y, width, height, id: element.id};
        }, selector);

        if (!rect)
            throw Error(`Could not find element that matches selector: ${selector}.`);

        return await page.screenshot({
            path,
            clip: {
                x: rect.left - padding,
                y: rect.top - padding,
                width: rect.width + padding * 2,
                height: rect.height + padding * 2
            }
        });
    }

    await screenshotDOMElement({
        path: 'element.png',
        selector: 'header aside',
        padding: 16
    });

    browser.close();
})();

References:
cyrus-and/chrome-remote-interface#253 (comment)
https://github.com/GoogleChrome/puppeteer/pull/452/files

thanks a lot. 😃
It helped me achieve my current task .

The option {waitUntil: 'networkidle'} of page.goto will cause error on puppeteer@^1.4.0:

ERROR: "networkidle" option is no longer supported. Use "networkidle2" instead.

But after I change to "networkidle2", another error show up:

Error: Protocol error (Runtime.callFunctionOn): Cannot find context with specified id undefined

So I remove the option and everything works fine.

worked perfectly!

This could be rewritten (simplified?) now that elementHandle.screenshot([options]) exists.

it not take screenshot from dom and result for me is a screenshot forom another section of page?

it not take screenshot from dom and result for me is a screenshot forom another section of page?

Can you please provide more details?

Thanks, @malyw. It works.

This could be rewritten (simplified?) now that elementHandle.screenshot([options]) exists.

Excelent!!

const el = await page.$('#miDiv');
el.screenshot({ path: 'capture.png'});

Wow thank you @malyw

This could be rewritten (simplified?) now that elementHandle.screenshot([options]) exists.

Excelent!!

const el = await page.$('#miDiv');
el.screenshot({ path: 'capture.png'});

I love it!

thanks @malyw