Puppeteer

Puppeteerは、Googleが開発するオープンソースのNode.jsライブラリです。高水準APIからChromeとFirefoxを操作し、スクリーンショット自動化、テスト、Webスクレイピングなどに広く使われます。

Puppeteerでできること

Puppeteerは、Chrome DevTools ProtocolとWebDriver BiDiを通じて対応ブラウザを操作します。人がブラウザで行う操作の多くに加え、自動化向けの処理もAPIから実行できます。

主な機能は次のとおりです。

• ページ移動： URLを開き、指定したネットワーク状態やDOM要素を待ち、リダイレクトと認証を処理します
• スクリーンショット撮影： ページを描画し、PNG、JPEG、WebPで保存します。表示中のビューポートまたはスクロールできるページ全体を撮影できます
• PDF生成： 描画したページをPDFへ書き出し、用紙サイズ、余白、ヘッダー、フッターを設定します
• DOM操作： 要素のクリック、フォーム入力、ドロップダウンの選択、文字入力を行います。撮影前に利用者の操作が必要なワークフローも自動化できます
• ネットワークのインターセプト： ネットワークリクエストを監視、変更、遮断します。エラー状態のテスト、広告の遮断、リソースサイズの測定などに使えます
• JavaScriptの評価： ページのコンテキストで任意のJavaScriptを実行し、データを抽出したり、撮影前にDOMを変更したりします

実際のブラウザエンジンを操作するため、CSSレイアウト、Webフォント、アニメーション、JavaScriptで生成する内容を含め、対応ブラウザで利用者が見るものに近い結果を描画できます。OS、フォント、GPUなど実行環境による差は考慮してください。

Puppeteerによるスクリーンショット撮影

スクリーンショットはPuppeteerでよく使われる機能です。page.screenshot()メソッドから細かく制御できます。

ビューポート寸法とデバイススケール係数を指定し、スマートフォンから4Kモニターまで任意の画面サイズを再現できます。fullPageオプションでは、表示領域だけでなく、スクロールできる書類全体を撮影します。クリップ領域を指定すれば、ページ内の長方形の範囲だけを撮れます。

遅延読み込みを使うページでは、撮影前にPuppeteerのスクリプトでページをスクロールし、延期された画像を読み込ませます。Cookieバナーやポップアップをプログラムで閉じ、独自CSSを挿入して不要な要素を隠すこともできます。

スクリーンショットツールやAPIの内部では、Puppeteerまたは同種のライブラリが使われることがあります。これらの機能を簡単な画面で包み、ブラウザ自動化のコードを書かなくてもページを撮影できるようにします。

実務では、Chromeを使ってページを撮影するスクリプトを短時間で作りやすい選択肢です。ビューポート、待機処理、出力形式を1か所で設定し、監査、レポート、定期撮影へ同じスクリプトを使い回せます。

PuppeteerとPlaywrightの違い

PuppeteerとPlaywrightは、ヘッドレスブラウザ自動化で広く使われる2つのライブラリです。Playwrightチームの複数のメンバーは、以前Puppeteerの開発に携わっていました。

ブラウザ対応： 現在のPuppeteerはChrome for Testingと安定版Firefoxに対応します。Playwrightは1つのAPIでChromium、Firefox、WebKitを扱うため、WebKitの撮影とテストも対象にできます。

API設計： 共通点は多いものの、Playwrightには標準の自動待機、分離セッション用のブラウザコンテキスト、複数ページやフレームへの組み込み対応などがあります。Puppeteerでも対応できる機能がありますが、APIと標準動作が異なります。

性能： 多くの処理では同程度です。Chromeだけを扱う場合は、DevTools Protocolへ直接つながるPuppeteerがわずかに有利な場合があります。Playwrightの複数ブラウザ抽象化による負荷は小さいものです。

コミュニティと周辺ツール： Puppeteerは提供期間が長く、プラグインやチュートリアルが豊富です。Playwrightも継続して成長し、複数ブラウザを必要とする新しいプロジェクトでよく選ばれます。

よくある失敗

• ページの内容を待たない： page.goto()の直後にpage.screenshot()を呼ぶと、読み込み途中のページを撮る場合があります。waitUntil: 'networkidle0'を使うか、特定のセレクターを待って、必要な内容が描画されたことを確認します
• 標準のビューポート寸法を使う： Puppeteerの標準ビューポートは800×600で、実際によく使う画面とは異なります。目的の出力に合わせてビューポート寸法とデバイススケール係数を明示します
• Cookie同意バナーを無視する： 自動撮影は新規訪問者としてページを開きます。同意オーバーレイを閉じなければ、ページ内容よりバナーが目立つ画像になります
• サーバーでヘッド付きモードを使う： Puppeteerは標準でヘッドレスですが、スクリプトが明示的にヘッド付きへ変えると、ディスプレイのないサーバーで失敗します。サーバーとCIではヘッドレスモードを使います
• ページ移動のエラーを処理しない： ページはタイムアウト、エラー応答、予期しないリダイレクトを起こす場合があります。1ページの失敗でスクリプト全体が停止しないよう、移動と撮影をエラー処理で囲みます