Playwright での利用（CDP）

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

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

前提条件

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

Playwright をインストールする

ブラウザー同梱なしの playwright-core パッケージをインストールします。

npm i playwright-core

yarn add playwright-core

pnpm add playwright-core

bun add playwright-core

Browser Run に接続する

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

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

const { chromium } = require("playwright-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 chromium.connectOverCDP(browserWSEndpoint, {
		headers: {
			Authorization: `Bearer ${API_TOKEN}`,
		},
	});

	const context = browser.contexts()[0];
	const page = context.pages()[0] || (await context.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 に直接接続します。

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

トラブルシューティング

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