NightmareJSの基本的な使い方、スクリーンショットの撮り方

2017/09/26

Node

NightmareJSとは、事前に設定した動作を全自動で行ってくれるライブラリです。
Electronベース(ver.2以降)でNodeのインストールが必須。
初歩的な動作確認として、
Yahooにアクセス → ENDLABで検索 → 検索結果画面のスクリーンショットを保存する所まで実装。

※Node v8.4.0、nightmare v2.10.0で確認しています。


目次

  1. 動作サンプル(動画)
  2. 基本的な使い方
  3. YahooでENDLABを検索、その結果をスクリーンショットで保存する

動作サンプル(動画)

※動画容量:1.46MB


基本的な使い方

  • インストール

npm install nightmare

  • 実装例

YahooでENDLABを検索、その結果をスクリーンショットで保存する

Nightmareインスタンスの引数、enableLargerThanScreen を true にしています。
ページ全体のスクリーンショットを撮る場合、ほとんどの環境でこの設定が必要です。
この設定をしないと、ブラウザがモニターサイズよりも大きくなりません。
※ Electronと同じオプションが使えます。

goto()で yahoo.co.jp にアクセス、検索欄(#srchtxt)にENDLABと入力。
検索ボタン(#srchbtn)をクリックさせて、結果ページのコンテンツ(#mIn)が現れるのを待ちます。

#mInを確認出来たタイミングで、javascriptを実行。
内容は、bodyの背景色を白に設定。
ページ全体の幅と高さを取得。

bodyの背景色がない場合、スクリーンショットの背景色も透明になります。

関数 screenShot() を呼び出すと、最初に viewport(width, height) が実行されます。
ここでブラウザのサイズを、ページ全体のサイズと同じ数値に変更します。
最後に screenshot.png というファイル名でスクリーンショットを保存します。

以上です。


SNSでシェアする

コメントを残す