Puppeteer

Puppeteer ↗ は、開発者から低レベルの DevTools プロトコルを抽象化し、Chrome/Chromium を簡単に操作し、ブラウジングセッションを自動化するために使用できる高レベルの API を提供する最も人気のあるライブラリの一つです。Puppeteer は、スクリーンショットの作成、ページのクロール、ウェブアプリケーションのテストなどのタスクに使用されます。

Puppeteer は通常、DevTools ポートを使用してローカルの Chrome または Chromium ブラウザに接続します。詳細については、Puppeteer の Puppeteer.connect() メソッドに関する API ドキュメント ↗を参照してください。

Workers チームは Puppeteer のバージョンをフォークし、Workers Browser Rendering API に接続するようにパッチを当てました。Workers Puppeteer フォークと Puppeteer コアの変更点 ↗は最小限です。接続後、開発者は標準のセットアップと同様に完全なPuppeteer API ↗を使用できます。

私たちのバージョンはオープンソースであり、Cloudflare の Puppeteer フォーク ↗で見つけることができます。npm は npmjs ↗ から @cloudflare/puppeteer ↗ としてインストールできます：

npm install @cloudflare/puppeteer --save-dev

Worker で Puppeteer を使用する

browser binding が設定され、@cloudflare/puppeteer ライブラリがインストールされると、Puppeteer を Worker で使用できます：

JavaScript
TypeScript

import puppeteer from "@cloudflare/puppeteer";

export default {
  async fetch(request, env) {
    const browser = await puppeteer.launch(env.MYBROWSER);
    const page = await browser.newPage();
    await page.goto("https://example.com");
    const metrics = await page.metrics();
    await browser.close();
    return Response.json(metrics);
  },
};

import puppeteer from "@cloudflare/puppeteer";

interface Env {
  MYBROWSER: Fetcher;
}

export default {
  async fetch(request, env): Promise<Response> {
    const browser = await puppeteer.launch(env.MYBROWSER);
    const page = await browser.newPage();
    await page.goto("https://example.com");
    const metrics = await page.metrics();
    await browser.close();
    return Response.json(metrics);
  },
} satisfies ExportedHandler<Env>;

このスクリプトは、env.MYBROWSER ブラウザを起動 ↗し、新しいページ ↗を開き、https://example.com/ ↗に移動 ↗し、ページの読み込みメトリクス ↗を取得し、ブラウザを閉じ ↗て、メトリクスを JSON 形式で出力します。

Keep Alive

ユーザーが browser.close() ステートメントを省略すると、ブラウザは開いたままになり、再接続して再利用できますが、デフォルトでは 1 分間の非アクティブ状態の後に自動的に閉じます。ユーザーは、ミリ秒単位で設定された keep_alive オプションを使用して、このアイドル時間を最大 10 分まで延長できます：

const browser = await puppeteer.launch(env.MYBROWSER, { keep_alive: 600000 });

上記を使用すると、ブラウザは非アクティブでも最大 10 分間開いたままになります。

セッション管理

ブラウザセッション管理を容易にするために、puppeteer に新しいメソッドを追加しました：

開いているセッションのリスト

puppeteer.sessions() は、現在実行中のセッションをリストします。出力は次のようになります：

[
   {
      "connectionId": "2a2246fa-e234-4dc1-8433-87e6cee80145",
      "connectionStartTime": 1711621704607,
      "sessionId": "478f4d7d-e943-40f6-a414-837d3736a1dc",
      "startTime": 1711621703708
   },
   {
      "sessionId": "565e05fb-4d2a-402b-869b-5b65b1381db7",
      "startTime": 1711621703808
   }
]

セッション 478f4d7d-e943-40f6-a414-837d3736a1dc はアクティブなワーカー接続 (connectionId=2a2246fa-e234-4dc1-8433-87e6cee80145) を持っているのに対し、セッション 565e05fb-4d2a-402b-869b-5b65b1381db7 は空いています。接続がアクティブな間は、他のワーカーがそのセッションに接続することはできません。

最近のセッションのリスト

puppeteer.history() は、最近のセッション（開いているものと閉じたものの両方）をリストします。現在の使用状況を把握するのに便利です。

[
   {
      "closeReason": 2,
      "closeReasonText": "BrowserIdle",
      "endTime": 1711621769485,
      "sessionId": "478f4d7d-e943-40f6-a414-837d3736a1dc",
      "startTime": 1711621703708
   },
   {
      "closeReason": 1,
      "closeReasonText": "NormalClosure",
      "endTime": 1711123501771,
      "sessionId": "2be00a21-9fb6-4bb2-9861-8cd48e40e771",
      "startTime": 1711123430918
   }
]

セッション 2be00a21-9fb6-4bb2-9861-8cd48e40e771 はクライアントによって browser.close() で明示的に閉じられたのに対し、セッション 478f4d7d-e943-40f6-a414-837d3736a1dc は最大アイドル時間に達したために閉じられました（制限を確認してください）。

この情報はダッシュボードでもアクセスできるはずですが、少し遅れることがあります。

アクティブな制限

puppeteer.limits() は、現在のアクティブな制限をリストします：

{
   "activeSessions": ["478f4d7d-e943-40f6-a414-837d3736a1dc", "565e05fb-4d2a-402b-869b-5b65b1381db7"],
   "allowedBrowserAcquisitions": 1,
   "maxConcurrentSessions": 2,
   "timeUntilNextAllowedBrowserAcquisition": 0
}

activeSessions は現在のオープンセッションの ID をリストします
maxConcurrentSessions は同時に開くことができるブラウザの数を定義します
allowedBrowserAcquisitions は、現在のレート制限に従って新しいブラウザセッションを開くことができるかどうかを指定します
timeUntilNextAllowedBrowserAcquisition は、新しいブラウザを起動する前の待機時間を定義します。

Puppeteer API

完全な Puppeteer API は、Cloudflare の Puppeteer フォーク ↗で見つけることができます。

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings