cloudflare-browser-rendering

Cloudflare Browser Rendering - 完全リファレンス

Cloudflare Browser Rendering を使用してブラウザー自動化ワークフローを構築するための、本番環境対応のナレッジドメインです。

ステータス：本番環境対応 ✅ 最終更新日：2025-11-23 依存関係：cloudflare-worker-base（Worker のセットアップ用） 最新バージョン：@cloudflare/[email protected]（2025 年 7 月）、@cloudflare/[email protected]（Playwright v1.55 GA 2025 年 9 月）、[email protected]

最近の更新（2025 年）：

• 2025 年 9 月：Playwright v1.55 GA、Stagehand フレームワークのサポート（Workers AI）、/links の excludeExternalLinks パラメーター
• 2025 年 8 月：課金 GA（8 月 20 日）、ローカル開発での /sessions エンドポイント、X-Browser-Ms-Used ヘッダー
• 2025 年 7 月：Playwright v1.54.1 + MCP v0.0.30、Playwright のローカル開発サポート（[email protected]+）、Puppeteer v22.13.1 との同期、/content が title を返すように変更、/json の custom_ai パラメーター、/screenshot のデフォルトのビューポートが 1920x1080 に変更
• 2025 年 6 月：Web Bot Auth ヘッダーが自動的に含まれるように変更
• 2025 年 4 月：Playwright のサポートを開始、無料プランを導入

---

目次

1. クイックスタート（5 分）
2. Browser Rendering の概要
3. Puppeteer API リファレンス
4. Playwright API リファレンス
5. セッション管理
6. 一般的なパターン
7. 料金と制限
8. 既知の問題の防止
9. 本番環境チェックリスト

---

クイックスタート（5 分）

1. Browser Binding を追加する

wrangler.jsonc:

{
  "name": "browser-worker",
  "main": "src/index.ts",
  "compatibility_date": "2023-03-14",
  "compatibility_flags": ["nodejs_compat"],
  "browser": {
    "binding": "MYBROWSER"
  }
}

nodejs_compat が必要な理由：Browser Rendering では Node.js API とポリフィルが必要です。

2. Puppeteer をインストールする

npm install @cloudflare/puppeteer

3. 最初のスクリーンショットを撮影する

import puppeteer from "@cloudflare/puppeteer";

interface Env {
  MYBROWSER: Fetcher;
}

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const { searchParams } = new URL(request.url);
    const url = searchParams.get("url") || "https://example.com";

    // Launch browser
    const browser = await puppeteer.launch(env.MYBROWSER);
    const page = await browser.newPage();

    // Navigate and capture
    await page.goto(url);
    const screenshot = await page.screenshot();

    // Clean up
    await browser.close();

    return new Response(screenshot, {
      headers: { "content-type": "image/png" }
    });
  }
};

4. デプロイする

npx wrangler deploy

テスト先：https://your-worker.workers.dev/?url=https://example.com

重要：

• 必ず env.MYBROWSER を puppeteer.launch() に渡してください（undefined ではなく）。
• 処理が終わったら必ず browser.close() を呼び出してください（セッションを再利用する場合は browser.disconnect() を使用します）。
• nodejs_compat 互換性フラグを使用してください。

---

Browser Rendering の概要

Browser Rendering とは？

Cloudflare Browser Rendering は、Cloudflare のグローバルネットワーク上で動作するヘッドレス Chromium ブラウザーを提供します。Puppeteer や Playwright などの使い慣れたツールを使用して、ブラウザータスクを自動化できます。

• スクリーンショット - Web ページの表示状態をキャプチャします
• PDF 生成 - HTML／URL を PDF に変換します
• Web スクレイピング - 動的な Web サイトからコンテンツを抽出します
• テスト - フロントエンドのテストを自動化します
• クロール - 複数ページにわたるワークフローを移動します

2 つの統合方法

方法	最適な用途	複雑さ
Workers Bindings	複雑な自動化、カスタムワークフロー、セッション管理	高度
REST API	シンプルなスクリーンショット／PDF タスク	シンプル

このスキルでは Workers Bindings を扱います（Puppeteer／Playwright の全 API を利用できる高度な方法）。

Puppeteer と Playwright の比較

機能	Puppeteer	Playwright
API の使いやすさ	最も広く利用されています	利用が拡大しています
パッケージ	@cloudflare/[email protected]	@cloudflare/[email protected]
セッション管理	✅ 高度な API	⚠️ 基本的な機能
ブラウザーのサポート	Chromium のみ	Chromium のみ（Firefox／Safari は未対応）
最適な用途	スクリーンショット、PDF、スクレイピング	テスト、フロントエンドの自動化

推奨：ほとんどの用途では Puppeteer を使用してください。テストですでに Playwright を使用している場合は、Playwright が適しています。

---

Puppeteer API リファレンス

コア API（完全なリファレンス：https://pptr.dev/api/）：

グローバル関数：

• puppeteer.launch(env.MYBROWSER, options?) - 新しいブラウザーを起動します（重要：バインディングを渡す必要があります）
• puppeteer.connect(env.MYBROWSER, sessionId) - 既存のセッションに接続します
• puppeteer.sessions(env.MYBROWSER) - 実行中のセッションを一覧表示します
• puppeteer.history(env.MYBROWSER) - 最近のセッション（開いているものと閉じているもの）を一覧表示します
• puppeteer.limits(env.MYBROWSER) - アカウントの上限を確認します

ブラウザーメソッド：

• browser.newPage() - 新しいタブを作成します（新しいブラウザーの起動よりも推奨）
• browser.sessionId() - 再利用するためのセッション ID を取得します
• browser.close() - セッションを終了します
• browser.disconnect() - セッションを再利用できる状態で維持します
• browser.createBrowserContext() - 分離されたシークレットコンテキスト（Cookie／キャッシュを個別に管理）

ページメソッド：

• page.goto(url, { waitUntil, timeout }) - 移動します（動的コンテンツには "networkidle0" を使用します）
• page.screenshot({ fullPage, type, quality, clip }) - 画像をキャプチャします
• page.pdf({ format, printBackground, margin }) - PDF を生成します
• page.evaluate(() => ...) - ブラウザー内で JS を実行します（データ抽出、XPath の回避策）
• page.content() / page.setContent(html) - HTML を取得／設定します
• page.waitForSelector(selector) - 要素が表示されるまで待機します
• page.type(selector, text) / page.click(selector) - フォームを操作します

重要なパターン：

// Must pass binding
const browser = await puppeteer.launch(env.MYBROWSER); // ✅
// const browser = await puppeteer.launch(); // ❌ Error!

// Session reuse for performance
const sessions = await puppeteer.sessions(env.MYBROWSER);
const freeSessions = sessions.filter(s => !s.connectionId);
if (freeSessions.length > 0) {
  browser = await puppeteer.connect(env.MYBROWSER, freeSessions[0].sessionId);
}

// Keep session alive
await browser.disconnect(); // Don't close

// XPath workaround (not directly supported)
const data = await page.evaluate(() => {
  return new XPathEvaluator()
    .createExpression("/html/body/div/h1")
    .evaluate(document, XPathResult.FIRST_ORDERED_NODE_TYPE)
    .singleNodeValue.innerHTML;
});

---

Playwright API リファレンス

ステータス：GA（2025 年 9 月）- Playwright v1.55、MCP v0.0.30 のサポート、ローカル開発のサポート（[email protected] 以降）

インストール：

npm install @cloudflare/playwright

設定要件（2025 年更新）：

{
  "compatibility_flags": ["nodejs_compat"],
  "compatibility_date": "2025-09-15"  // Required for Playwright v1.55
}

基本的な使い方：

import { chromium } from "@cloudflare/playwright";

const browser = await chromium.launch(env.BROWSER);
const page = await browser.newPage();
await page.goto("https://example.com");
const screenshot = await page.screenshot();
await browser.close();

Puppeteer と Playwright の比較：

• インポート：puppeteer と "@cloudflare/playwright" からの { chromium }
• セッション API：Puppeteer には高度なセッション管理（sessions/history/limits）があり、Playwright は基本的な機能を提供します
• 自動待機：Playwright には自動待機機能が組み込まれており、Puppeteer では手動で waitForSelector() を呼び出す必要があります
• MCP サポート：Playwright MCP v0.0.30（2025 年 7 月）、Playwright MCP サーバーを利用できます

推奨：セッション再利用パターンには Puppeteer を使用してください。既存のテストを移行する場合や MCP 統合が必要な場合は、Playwright を使用してください。

公式ドキュメント：https://developers.cloudflare.com/browser-rendering/playwright/

---

セッション管理

理由：新しいブラウザーの起動には時間がかかり、同時実行数の上限を消費します。セッションを再利用すると、応答が速くなり、同時実行数の使用を抑え、リソースをより効率的に活用できます。

セッション再利用パターン（重要）

async function getBrowser(env: Env): Promise<Browser> {
  const sessions = await puppeteer.sessions(env.MYBROWSER);
  const freeSessions = sessions.filter(s => !s.connectionId);

  if (freeSessions.length > 0) {
    try {
      return await puppeteer.connect(env.MYBROWSER, freeSessions[0].sessionId);
    } catch (e) {
      console.log("Failed to connect, launching new browser");
    }
  }

  return await puppeteer.launch(env.MYBROWSER);
}

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const browser = await getBrowser(env);

    try {
      const page = await browser.newPage();
      await page.goto("https://example.com");
      const screenshot = await page.screenshot();

      await browser.disconnect(); // ✅ Keep alive for reuse

      return new Response(screenshot, {
        headers: { "content-type": "image/png" }
      });
    } catch (error) {
      await browser.close(); // ❌ Close on error
      throw error;
    }
  }
};

主なルール：

• ✅ browser.disconnect() - セッションを再利用できる状態で維持します
• ❌ browser.close() - エラーが発生した場合、または本当に終了するときにのみ使用します
• ✅ 接続の失敗には必ず対処してください

ブラウザーコンテキスト（Cookie／キャッシュの分離）

browser.createBrowserContext() を使用して、ブラウザーを共有しながら Cookie／キャッシュを分離します：

const browser = await puppeteer.launch(env.MYBROWSER);
const context1 = await browser.createBrowserContext(); // User 1
const context2 = await browser.createBrowserContext(); // User 2

const page1 = await context1.newPage();
const page2 = await context2.newPage();
// Separate cookies/cache per context

複数タブのパターン

❌ 悪い例：10 個の URL に対してブラウザーを 10 個起動する（同時実行数を無駄に消費します） ✅ 良い例：1 つのブラウザーで Promise.all() と browser.newPage() を使って 10 個のタブを開く

const browser = await puppeteer.launch(env.MYBROWSER);
const results = await Promise.all(
  urls.map(async (url) => {
    const page = await browser.newPage();
    await page.goto(url);
    const data = await page.evaluate(() => ({ title: document.title }));
    await page.close();
    return { url, data };
  })
);
await browser.close();

---

よくあるパターン

KV キャッシュを使ったスクリーンショット

スクリーンショットをキャッシュして、ブラウザーの使用量を減らし、パフォーマンスを向上させます：

interface Env {
  MYBROWSER: Fetcher;
  CACHE: KVNamespace;
}

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const { searchParams } = new URL(request.url);
    const url = searchParams.get("url");
    if (!url) return new Response("Missing ?url parameter", { status: 400 });

    const normalizedUrl = new URL(url).toString();

    // Check cache first
    let screenshot = await env.CACHE.get(normalizedUrl, { type: "arrayBuffer" });

    if (!screenshot) {
      const browser = await puppeteer.launch(env.MYBROWSER);
      const page = await browser.newPage();
      await page.goto(normalizedUrl);
      screenshot = await page.screenshot();
      await browser.close();

      // Cache for 24 hours
      await env.CACHE.put(normalizedUrl, screenshot, { expirationTtl: 60 * 60 * 24 });
    }

    return new Response(screenshot, { headers: { "content-type": "image/png" } });
  }
};

AI で強化したスクレイピング

Browser Rendering と Workers AI を組み合わせて、構造化データを抽出します：

interface Env {
  MYBROWSER: Fetcher;
  AI: Ai;
}

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const { searchParams } = new URL(request.url);
    const url = searchParams.get("url");

    // Scrape page content
    const browser = await puppeteer.launch(env.MYBROWSER);
    const page = await browser.newPage();
    await page.goto(url!, { waitUntil: "networkidle0" });
    const bodyContent = await page.$eval("body", el => el.innerHTML);
    await browser.close();

    // Extract structured data with AI
    const response = await env.AI.run("@cf/meta/llama-3.1-8b-instruct", {
      messages: [{
        role: "user",
        content: `Extract product info as JSON from this HTML. Include: name, price, description.\n\nHTML:\n${bodyContent.slice(0, 4000)}`
      }]
    });

    return Response.json({ url, product: JSON.parse(response.response) });
  }
};

その他のよくあるパターン：PDF の生成（page.pdf()）、構造化スクレイピング（page.evaluate()）、フォームの自動化（page.type() + page.click()）。同梱の templates/ ディレクトリを参照してください。

---

料金と上限

課金 GA：2025 年 8 月 20 日

無料プラン：1 日あたり 10 分、同時実行数 3、起動数 1 分あたり 3 回、タイムアウト 60 秒
有料プラン：月あたり 10 時間を含む（超過分は 1 時間あたり $0.09）、平均同時実行数 10（超過分はブラウザー 1 台あたり $2.00）、起動数 1 分あたり 30 回、タイムアウト 60 秒～10 分

同時実行数の計算：日ごとのピーク使用量の月平均（例：ブラウザー 15 台の平均 = (15 - 含まれる 10 台) × $2.00 = 月額 $10.00）

レート制限：秒単位で適用されます（1 分あたり 180 リクエスト = 1 秒あたり 3 リクエストであり、バーストはできません）。起動前に puppeteer.limits(env.MYBROWSER) を確認してください：

const limits = await puppeteer.limits(env.MYBROWSER);
if (limits.allowedBrowserAcquisitions === 0) {
  const delay = limits.timeUntilNextAllowedBrowserAcquisition || 1000;
  await new Promise(resolve => setTimeout(resolve, delay));
}

---

既知の問題の予防

このスキルでは、文書化されている6つの問題を予防します。

---

問題 #1：XPath セレクターがサポートされていない

エラー：「XPath selector not supported」またはセレクターの失敗 出典： https://developers.cloudflare.com/browser-rendering/faq/#why-cant-i-use-an-xpath-selector-when-using-browser-rendering-with-puppeteer 発生する理由： XPath は Workers にセキュリティリスクをもたらします 予防策： CSS セレクター、または XPathEvaluator を使用した page.evaluate() を使います

解決策：

// ❌ Don't use XPath directly (not supported)
// await page.$x('/html/body/div/h1')

// ✅ Use CSS selector
const heading = await page.$("div > h1");

// ✅ Or use XPath in page.evaluate()
const innerHtml = await page.evaluate(() => {
  return new XPathEvaluator()
    .createExpression("/html/body/div/h1")
    .evaluate(document, XPathResult.FIRST_ORDERED_NODE_TYPE)
    .singleNodeValue.innerHTML;
});

---

問題 #2：ブラウザーのバインディングが渡されていない

エラー：「Cannot read properties of undefined (reading 'fetch')」 出典： https://developers.cloudflare.com/browser-rendering/faq/#cannot-read-properties-of-undefined-reading-fetch 発生する理由： ブラウザーのバインディングを指定せずに puppeteer.launch() が呼び出されています 予防策： 常に env.MYBROWSER を launch に渡します

解決策：

// ❌ Missing browser binding
const browser = await puppeteer.launch(); // Error!

// ✅ Pass binding
const browser = await puppeteer.launch(env.MYBROWSER);

---

問題 #3：ブラウザーのタイムアウト（60秒）

エラー： 60秒後にブラウザーが予期せず閉じます 出典： https://developers.cloudflare.com/browser-rendering/platform/limits/#note-on-browser-timeout 発生する理由： デフォルトでは、操作がない状態が60秒続くとタイムアウトします 予防策： keep_alive オプションを使って、最大10分まで延長します

解決策：

// Extend timeout to 5 minutes for long-running tasks
const browser = await puppeteer.launch(env.MYBROWSER, {
  keep_alive: 300000 // 5 minutes = 300,000 ms
});

注： 指定した時間内に devtools コマンドが実行されない場合、ブラウザーは閉じます。

---

問題 #4：同時実行数の上限に到達した

エラー：「Rate limit exceeded」または新しいブラウザーの起動に失敗します 出典： https://developers.cloudflare.com/browser-rendering/platform/limits/ 発生する理由： 同時実行できるブラウザーの上限（無料プランは3、有料プランは10～30）を超えています 予防策： セッションを再利用し、複数のブラウザーの代わりにタブを使い、起動前に上限を確認します

解決策：

// 1. Check limits before launching
const limits = await puppeteer.limits(env.MYBROWSER);
if (limits.allowedBrowserAcquisitions === 0) {
  return new Response("Concurrency limit reached", { status: 429 });
}

// 2. Reuse sessions
const sessions = await puppeteer.sessions(env.MYBROWSER);
const freeSessions = sessions.filter(s => !s.connectionId);
if (freeSessions.length > 0) {
  const browser = await puppeteer.connect(env.MYBROWSER, freeSessions[0].sessionId);
}

// 3. Use tabs instead of multiple browsers
const browser = await puppeteer.launch(env.MYBROWSER);
const page1 = await browser.newPage();
const page2 = await browser.newPage(); // Same browser, different tabs

---

問題 #5：ローカル開発時のリクエストサイズ上限

エラー： wrangler dev で1MBを超えるリクエストが失敗します 出典： https://developers.cloudflare.com/browser-rendering/faq/#does-local-development-support-all-browser-rendering-features 発生する理由： ローカル開発環境の制限です 予防策： ローカル開発では、ブラウザーのバインディングで remote: true を使います

解決策：

// wrangler.jsonc for local development
{
  "browser": {
    "binding": "MYBROWSER",
    "remote": true  // Use real headless browser during dev
  }
}

---

問題 #6：ボット対策が常に作動する

エラー： ウェブサイトがリクエストをボットのトラフィックとしてブロックします 出典： https://developers.cloudflare.com/browser-rendering/faq/#will-browser-rendering-bypass-cloudflares-bot-protection 発生する理由： Browser Rendering からのリクエストは常にボットとして識別されます 予防策： 回避することはできません。自身のゾーンをスクレイピングする場合は、WAF のスキップルールを作成します

解決策：

// ❌ Cannot bypass bot protection
// Requests will always be identified as bots

// ✅ If scraping your own Cloudflare zone:
// 1. Go to Security > WAF > Custom rules
// 2. Create skip rule with custom header:
//    Header: X-Custom-Auth
//    Value: your-secret-token
// 3. Pass header in your scraping requests

// Note: Automatic headers are included:
// - cf-biso-request-id
// - cf-biso-devtools

---

本番環境へのデプロイ前チェックリスト

Browser Rendering Workers を本番環境にデプロイする前に確認してください。

設定

• wrangler.jsonc でブラウザーのバインディングを設定済み
• nodejs_compat フラグを有効化済み（Browser Rendering に必須）
• タスクに60秒を超える時間がかかる場合、キープアライブのタイムアウトを設定済み
• 必要に応じて、ローカル開発用にリモートバインディングを有効化済み

エラー処理

• レート制限に対する再試行ロジックを実装済み
• page.goto() のタイムアウト処理を実装済み
• try-finally ブロックでのブラウザーのクリーンアップを実装済み
• ブラウザーの起動前に同時実行数の上限チェックを実装済み
• ブラウザーを利用できない場合のグレースフルデグラデーションを実装済み

パフォーマンス

• トラフィックの多いルートでセッションの再利用を実装済み
• 複数のブラウザーの代わりに複数のタブを使用
• セッション分離にシークレットコンテキストを使用
• 繰り返し生成されるスクリーンショット／PDF にKV キャッシュを使用
• ブラウザーの利用効率を最大化するためにバッチ処理を実施

モニタリング

• デバッグ用にブラウザーのセッション ID をログに記録
• 課金額の見積もり用にブラウザーの実行時間を追跡
• puppeteer.limits() を使用して同時実行数の使用状況を監視
• レート制限エラーが発生した場合にアラート
• https://dash.cloudflare.com/?to=/:account/workers/browser-rendering でダッシュボードを監視

セキュリティ

• URL の入力検証（SSRF を防止）
• 不正利用を防ぐタイムアウト制限
• 公開エンドポイントのレート制限
• 機密性の高いスクレイピングエンドポイントの認証
• 独自のゾーンをスクレイピングする場合はWAF ルール

テスト

• さまざまなページサイズでスクリーンショットの取得をテスト
• カスタム HTML でPDF 生成をテスト
• 動的コンテンツ（networkidle0）でスクレイピングをテスト
• エラーシナリオをテスト（無効な URL、タイムアウト）
• 同時実行数の制限を負荷テスト

---

エラー処理のベストプラクティス

本番環境のパターン - 適切なクリーンアップを行う try-catch を使用します。

async function withBrowser<T>(env: Env, fn: (browser: Browser) => Promise<T>): Promise<T> {
  let browser: Browser | null = null;

  try {
    // 1. Check limits before launching
    const limits = await puppeteer.limits(env.MYBROWSER);
    if (limits.allowedBrowserAcquisitions === 0) {
      throw new Error("Rate limit reached");
    }

    // 2. Try session reuse first
    const sessions = await puppeteer.sessions(env.MYBROWSER);
    const freeSessions = sessions.filter(s => !s.connectionId);
    browser = freeSessions.length > 0
      ? await puppeteer.connect(env.MYBROWSER, freeSessions[0].sessionId)
      : await puppeteer.launch(env.MYBROWSER);

    // 3. Execute user function
    const result = await fn(browser);

    // 4. Disconnect (keep alive)
    await browser.disconnect();
    return result;
  } catch (error) {
    // 5. Close on error
    if (browser) await browser.close();
    throw error;
  }
}

主な原則：制限を確認 → セッションを再利用 → 実行 → 成功時は切断、エラー時は閉じる

---

バンドルされたリソースの使用

テンプレート（templates/）

一般的なパターンですぐに使えるコードテンプレートです。

• basic-screenshot.ts - 最小限のスクリーンショット例
• screenshot-with-kv-cache.ts - KV キャッシュを使用したスクリーンショット
• pdf-generation.ts - HTML または URL から PDF を生成
• web-scraper-basic.ts - 基本的なウェブスクレイピングパターン
• web-scraper-batch.ts - 複数の URL を一括スクレイピング
• session-reuse.ts - パフォーマンス向上のためのセッション再利用
• ai-enhanced-scraper.ts - Workers AI を使用したスクレイピング
• playwright-example.ts - Playwright の代替例
• wrangler-browser-config.jsonc - ブラウザバインディングの設定

使用方法：

# Copy template to your project
cp ~/.claude/skills/cloudflare-browser-rendering/templates/basic-screenshot.ts src/index.ts

リファレンス（references/）

詳細なドキュメントです。

• session-management.md - セッション再利用の完全ガイド
• pricing-and-limits.md - 料金の詳細
• common-errors.md - 既知の問題と解決策の一覧
• puppeteer-vs-playwright.md - 機能比較と移行

読み込むタイミング： 高度なパターンを実装するときや、特定の問題をデバッグするときに参照してください。

---

依存関係

必須：

• @cloudflare/[email protected] - Workers 向け Puppeteer
• [email protected]+ - Cloudflare CLI

任意：

• @cloudflare/[email protected] - Workers 向け Playwright（代替）
• @cloudflare/[email protected]+ - TypeScript 型定義

関連スキル：

• cloudflare-worker-base - Hono を使用した Worker のセットアップ
• cloudflare-kv - スクリーンショットの KV キャッシュ
• cloudflare-r2 - 生成ファイル用の R2 ストレージ
• cloudflare-workers-ai - AI を活用したスクレイピング

---

公式ドキュメント

• Browser Rendering ドキュメント: https://developers.cloudflare.com/browser-rendering/
• Puppeteer API: https://pptr.dev/api/
• Playwright API: https://playwright.dev/docs/api/class-playwright
• Cloudflare Puppeteer フォーク: https://github.com/cloudflare/puppeteer
• Cloudflare Playwright フォーク: https://github.com/cloudflare/playwright
• 料金: https://developers.cloudflare.com/browser-rendering/platform/pricing/
• 制限: https://developers.cloudflare.com/browser-rendering/platform/limits/

---

パッケージのバージョン（2025-10-22 確認済み）

{
  "dependencies": {
    "@cloudflare/puppeteer": "^1.0.4"
  },
  "devDependencies": {
    "@cloudflare/workers-types": "^4.20251014.0",
    "wrangler": "^4.43.0"
  }
}

代替（Playwright）：

{
  "dependencies": {
    "@cloudflare/playwright": "^1.0.0"
  }
}

---

トラブルシューティング

問題：「Cannot read properties of undefined (reading 'fetch')」

解決策： puppeteer.launch() にブラウザバインディングを渡します。

const browser = await puppeteer.launch(env.MYBROWSER); // Not just puppeteer.launch()

問題：XPath セレクターが動作しない

解決策： CSS セレクターを使用するか、XPathEvaluator を使用した page.evaluate() を使います（Issue #1 を参照）。

問題：60 秒後にブラウザが閉じる

解決策： keep_alive を使用してタイムアウトを延長します。

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

問題：レート制限に達した

解決策： セッションを再利用し、タブを使用して、起動前に制限を確認します（Issue #4 を参照）。

問題：ローカル開発で 1MB を超えるリクエストが失敗する

解決策： wrangler.jsonc でリモートバインディングを有効にします。

{ "browser": { "binding": "MYBROWSER", "remote": true } }

問題：ウェブサイトにボットとしてブロックされる

解決策： 回避できません。ご自身のゾーンであれば、WAF のスキップルールを作成してください（Issue #6 を参照）

---

ご質問・問題はありますか？

1. 詳細な解決策については、references/common-errors.md を確認してください
2. パフォーマンスの最適化については、references/session-management.md を確認してください
3. wrangler.jsonc でブラウザバインディングが設定されていることを確認してください
4. 公式ドキュメントを確認してください：https://developers.cloudflare.com/browser-rendering/
5. nodejs_compat 互換性フラグが有効になっていることを確認してください