Puppeteer で使う（CDP）

Puppeteer ↗ を使うと、任意の Node.js 環境から Browser Run セッションに接続し、CDP 経由でブラウザー操作をプログラムから自動化できます。ローカルマシン、CI/CD パイプライン、外部サーバーで動くスクリプトに向いています。

始める前に、Browser Rendering - Edit 権限付きの カスタム API トークンを作成 してください。

• マシンに Node.js がインストールされていること
• Browser Run が有効な Cloudflare アカウント
• Browser Rendering - Edit 権限を持つ Browser Run の API トークン

Chrome 同梱版ではない puppeteer-core パッケージをインストールします。

npm i puppeteer-core

yarn add puppeteer-core

pnpm add puppeteer-core

bun add puppeteer-core

次のスクリプトは、Browser Run セッションに接続し、ページへ移動してタイトルを取得し、スクリーンショットを撮る流れを示します。

script.js という名前のファイルを作成します。

const puppeteer = require("puppeteer-core");

const ACCOUNT_ID = process.env.CF_ACCOUNT_ID || "<ACCOUNT_ID>";
const API_TOKEN = process.env.CF_API_TOKEN || "<API_TOKEN>";

const browserWSEndpoint = `wss://api.cloudflare.com/client/v4/accounts/${ACCOUNT_ID}/browser-rendering/devtools/browser?keep_alive=600000`;

async function main() {
	const browser = await puppeteer.connect({
		browserWSEndpoint,
		headers: {
			Authorization: `Bearer ${API_TOKEN}`,
		},
	});

	const page = await browser.newPage();
	await page.goto("https://developers.cloudflare.com");

	const title = await page.title();
	console.log(`Page title: ${title}`);

	await page.screenshot({ path: "screenshot.png" });

	await browser.close();
}

main().catch(console.error);

ACCOUNT_ID を Cloudflare のアカウント ID に、API_TOKEN を Browser Run の API トークンに置き換えるか、環境変数として設定します。

export CF_ACCOUNT_ID="<ACCOUNT_ID>"
export CF_API_TOKEN="<API_TOKEN>"

node script.js

コンソールにページタイトルが表示され、screenshot.png としてスクリーンショットが保存されます。

このスクリプトは、CDP を使って WebSocket で Browser Run に直接接続します。

1. WebSocket エンドポイント - browserWSEndpoint の URL で新しいブラウザーセッションを取得し、WebSocket で接続します
2. 認証 - Authorization ヘッダーに API トークンを付けてリクエストを認証します
3. Keep-alive - keep_alive パラメーター（ミリ秒）で、セッションが有効な時間を指定します
4. Puppeteer API - 接続後は、標準の Puppeteer API でブラウザーを操作します

質問がある場合やエラーが発生した場合は、Browser Run の FAQ とトラブルシューティングガイド を参照してください。