Puppeteer

Puppeteerは、Googleの Chrome チームが保守しているオープンソースのNode.jsライブラリです。Chrome DevTools ProtocolまたはWebDriver BiDiを通じて、ChromeとChromiumを制御します。Firefoxも制御できます。既定ではヘッドレスで実行されるため、表示されるウィンドウなしでページを読み込んで描画します。

Puppeteerのスクリプトはブラウザを起動し、ページを開き、ユーザーと同じように操作します。移動、クリック、入力、コンテンツの待機を行います。このライブラリは、スクリーンショット、PDFの生成、スクレイピング、パフォーマンスの確認、ChromeベースのWebアプリの自動テストによく使われます。

Puppeteerでできること

• Chrome、Chromium、Firefoxを起動する、または実行中のブラウザに接続する。
• ビューポート、ユーザーエージェント、位置情報、ネットワーク条件を設定する。
• クリック、入力、フォームの送信を行い、セレクターまたはネットワークの停止を待つ。
• リクエストを傍受し、広告、画像、トラッカーをブロックする。
• page.screenshot() でスクリーンショットを、page.pdf() でPDFを保存する。

スクリーンショットでのPuppeteer

page.screenshot() は、PNG、JPEG、WebPの出力を保存します。fullPage オプションはスクロール可能なドキュメント全体を撮影し、clip は長方形の範囲を撮影し、要素のハンドルは1つの要素を撮影します。page.setViewport() は幅、高さ、deviceScaleFactor を設定します。この値によって、出力が1倍か2倍の解像度になるかが決まります。

page.pdf() はスクリーンショットとは異なります。ブラウザの印刷レイアウトと印刷用のCSSを使うため、ページが分割されたり要素が非表示になったりすることがあります。一方、page.screenshot() は描画された画面を記録します。

PuppeteerとPlaywrightの比較

Puppeteerは、Chromeを中心としたJavaScriptのライブラリです。Playwrightは、Chromium、Firefox、WebKitに対応し、JavaScript、Python、Java、.NETのバインディングと、組み込みのテストランナーを提供します。Puppeteerは、Chromeだけが必要なNode.jsのプロジェクトに向いています。Playwrightは、SafariのWebKitエンジンや別の言語が必要なチームに向いています。

よくある間違い

• 移動の直後に、フォントと画像が読み込まれる前にスクリーンショットを撮る。
• page.pdf() の結果が、画面と同じに見えることを期待する。
• 多数のブラウザインスタンスを同時に実行し、メモリが不足する。
• ブラウザを閉じ忘れ、プロセスが残る。

同じスクリーンショットを繰り返し撮りますか？

Temposhotの Website Capture は、管理されたローカルブラウザでURLのリストを読み込み、URLごとに1枚の画像を保存します。範囲は Viewport または Full page を選べます。詳しくは Webサイトのスクリーンショット自動化 をご覧ください。

よくある質問

Puppeteerは Chrome 専用ですか？

Chromeが主な対象です。Puppeteerは、WebDriver BiDiを通じてFirefoxにも対応しています。

PuppeteerでRetinaのスクリーンショットを撮影できますか？

はい。page.setViewport() で deviceScaleFactor を2に設定すると、ピクセルの幅と高さが2倍になります。

Puppeteerにはコードを書く必要がありますか？

はい。Node.jsで動くJavaScriptまたはTypeScriptのコードから使うライブラリです。

出典

• Puppeteer documentation
• Chrome DevTools Protocol

関連リソース

• Website Captureのクイックスタート: コードなしで多数のURLを撮影します。
• Chrome拡張機能: 現在のタブのフルページのPNGを1枚保存します。
• スクリーンショットを結合: ブラウザで撮影結果を1枚の画像に結合します。