Capture DOM elements screenshot using Chrome headless

index.js

const puppeteer = require('puppeteer')

// Related Issues:
// 3118 - https://github.com/GoogleChrome/puppeteer/issues/3118#issuecomment-417754246

async function main() {
    const browser = await puppeteer.launch({
        args: ['--start-maximized'],
        headless: false,
        defaultViewport: null
    })

    const page = (await browser.pages())[0]
    await page.goto('https://coinmarketcap.com/', { waitUntil: 'networkidle0' })

    await screenshotDOMElements({
        page,
        selector: 'table.dataTable > tbody > tr:nth-child(-n+50)',
        deleteSelector: '.banner-alert-fixed-bottom',
        path: 'element-1.png',
        sumHeight: true
    }),
    await screenshotDOMElements({
        page,
        selector: 'table.dataTable > tbody > tr:nth-child(n+50)',
        deleteSelector: '.banner-alert-fixed-bottom',
        path: 'element-2.png',
        sumHeight: true
    })

    console.log('Done!')
}

main()
    .then(() => process.exit(0))
    .catch(error => {
        console.error(error)
        process.exit(1)
    })

async function screenshotDOMElements({
    page,
    padding = 0,
    path = null,
    selector,
    deleteSelector,
    sumWidth = false,
    sumHeight = false
} = {}) {

    await page.evaluate(
        deleteSelector => deleteSelector && document.querySelectorAll(deleteSelector).forEach(x => x.remove()),
        deleteSelector
    )

    if (!selector) {
        throw Error('Please provide a selector.')
    }
    
    const rect = await page.evaluate((selector, sumWidth, sumHeight) => {
        let minX = Infinity
        let minY = Infinity
        let maxWidth = 0
        let maxHeight = 0
        const elements = document.querySelectorAll(selector)
        if (elements) {
            for (const element of elements) {
                const {x, y, width, height} = element.getBoundingClientRect()
                minX = Math.min(minX, x)
                minY = Math.min(minY, y)
                maxWidth = sumWidth
                    ? maxWidth + width
                    : Math.max(maxWidth, width)
                maxHeight = sumHeight
                    ? maxHeight + height
                    : Math.max(maxHeight, height)
            }
            return {
                left: minX,
                top: minY, 
                width: maxWidth, 
                height: maxHeight 
            }
        }
        return null
    }, selector, sumWidth, sumHeight)

    if (!rect) {
        throw Error(`Could not find element that matches selector: ${selector}.`)
    }
        
    return page.screenshot({
        path,
        clip: {
            x: rect.left - padding,
            y: rect.top - padding,
            width: rect.width + padding * 2,
            height: rect.height + padding * 2
        }
    })
}