ヘッドレス Chrome でスクリーンショット(画像やPDF)を取得する

ヘッドレス Chrome

Chrome 59 から Headless Chrome が搭載されました。PhantomJS の現状を考えると、早めにこちらに移行するのがいいかと思います。詳しくは以下の公式ページなどを。

スクリーンショットを取得する

上記の公式ページに書かれていますが、動作確認やチュートリアルも兼ねてスクリーンショットを取ってみるのがよいでしょう。スクリーンショットは画像とPDFで取得できます。

画像でスクリーンショットを取得する

以下のようにコマンドを実行すればよいです。結果として、画像サイズが 1920x1080 のスクリーンショットが /tmp/my_screenshot.png に保存されます。

$ google-chrome --headless --disable-gpu --screenshot="/tmp/my_screenshot.png" --window-size=1920,1080 http://dengekionline.com/

PDFでスクリーンショットを取得する

PDFでスクリーンショットを取得する場合も、画像のそれと同じです。

$ google-chrome --headless --disable-gpu --print-to-pdf="/tmp/my_screenshot.pdf" --window-size=1920,1080 http://dengekionline.com/

補足

  • スクリーンショットの保存場所を指定するには --screenshot--print-to-pdf の後ろに = で場所を指定すればよいです
  • 画像でWebページ全体のスクリーンショットを過不足無く取得するのは少々面倒で、こちらの方法 を参照してみてください*1
  • 本格的にスクレイピングやE2Eテストを行いたい場合は Puppeteer を使いましょう

参考(感謝)

*1:荒業として PDF で取得してそれを画像に変換するというのもありかもしれません

Powered by はてなブログ