跳转到内容
搜索文档

与 Puppeteer 配合使用(CDP)

最后更新 查看 MarkdownAgent 设置

你可以使用 Puppeteer 从任何 Node.js 环境连接到 Browser Run 会话,通过 CDP 以编程方式自动化浏览器任务。这适用于本地机器、CI/CD 流水线或外部服务器上运行的脚本。

开始之前,请创建自定义 API Token,并授予 Browser Rendering - Edit 权限。

前提条件

  • 机器上已安装 Node.js
  • 已启用 Browser Run 的 Cloudflare 账户
  • 具有 Browser Rendering - Edit 权限的 Browser Run API token

安装 Puppeteer

安装 puppeteer-core 包(不含捆绑 Chrome 的版本):

npm i puppeteer-core

连接到 Browser Run

以下脚本演示如何连接到 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 token,或将其设置为环境变量:

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. 身份验证 - 带有 API token 的 Authorization 请求头对请求进行身份验证
  3. Keep-alive - keep_alive 参数(毫秒)指定会话保持活动的时间
  4. Puppeteer API - 连接后,使用标准 Puppeteer API 控制浏览器

故障排除

如有疑问或遇到错误,请参阅 Browser Run 常见问题与故障排除指南

这篇文档对您有帮助吗?