Edited at

Puppeteerを使って指定したDOMのみのスクリーンショットを取得する

噂のHeadless Chrome ライブラリ Puppeteer を使って

指定したDOMのみのスクリーンショットを取得してみました。

実は以前同じことを Nigthmare.jsを使ってやろうとしたのですが

うまく行かず諦めてしまいましたが

Puppeteerで試してみたらすんなり実現できました :ok_hand:


コード


app.js

const puppeteer = require('puppeteer');

(async () => {
const browser = await puppeteer.launch({headless: true});
const page = await browser.newPage();

const targetElementSelector = '#tw-container'

await page.goto('https://google.co.jp')
await page.type('pupperteer 翻訳')
await page.click('#tsf > div.tsf-p > div.jsb > center > input[type="submit"]:nth-child(1)')

await page.waitFor(targetElementSelector)

await page.screenshot({path: 'page-ss.png'})

const clip = await page.evaluate(s => {
const el = document.querySelector(s)

// エレメントの高さと位置を取得
const { width, height, top: y, left: x } = el.getBoundingClientRect()
return { width, height, x, y }
}, targetElementSelector)

// スクリーンショットに位置と大きさを指定してclipする
await page.screenshot({ clip, path: 'tw-container-ss.png' })

browser.close();
})();


googleでpuppeteer 翻訳 と検索し、

検索結果画面の翻訳結果を表示している部分のみのスクリーンショットを取得するコードになります

ウィンドウのスクロールはAPIでは提供されていないようなので

evalueate 内で実行しています

(2017/09/18 追記)

@akameco さんにコメントで情報いただいて

画面内でスクロールさせて大きさを変更するのではなく

スクリーンショットから指定したDOMの位置と大きさを指定するように

修正しました。

参考: http://qiita.com/akameco/items/2bb90da68deb0e67d9a2#_reference-d4735b07e7ac27ea55b4


取得したスクリーンショット

▽page-ss.png
▽tw-container-ss.png

page-ss.png
tw-container-ss.png

指定したところだけキレイにスクリーンショットがとれています:sparkles:

(どうでもいいですけどpuppeteerの日本語訳かっけぇ!)