Puppeteer で指定した要素だけスクリーンショットを撮る方法

Ⅰ. はじめに

タイトルの通り「Puppeteer で指定した要素だけスクリーンショットを撮る方法」です。

Ⅱ. やり方

1. サンプルプログラムを書く

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('http://example.com')
  let element = await page.$('h1')
  // 指定した要素だけスクリーンショットを撮る
  await element.screenshot({ path: 'out1.png' })
  // 比較用にページ全体のスクリーンショットを撮る
  await page.screenshot( { path: 'out2.png' })

  await browser.close()
})()

実行結果

out1.png	out2.png

参考

https://github.com/GoogleChrome/puppeteer