跳转到内容
搜索文档

与 Playwright 配合使用(CDP)

最后更新 查看 MarkdownAgent 设置

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

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

前提条件

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

安装 Playwright

安装 playwright-core 包(不含捆绑浏览器的版本):

npm i 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 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. Playwright API - 连接后,使用标准 Playwright API 控制浏览器

故障排除

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

这篇文档对您有帮助吗?