/scrape - Scrape HTML elements

import { Tabs, TabItem, Render } from "~/components";

The /scrape endpoint extracts structured data from specific elements on a webpage, returning details such as element dimensions and inner HTML.

Endpoint

https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-run/scrape

Required fields

You must provide elements and exactly one of url or html:

• url (string)
• html (string)
• elements (array of objects) — each object must include selector (string)

Common use cases

• Extract headings, links, prices, or other repeated content with CSS selectors
• Collect metadata (for example, titles, descriptions, canonical links)

Basic usage

Extract headings and links from a URL

Go to https://example.com and extract metadata from all h1 and a elements in the DOM.

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-run/scrape' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
  "url": "https://example.com/",
  "elements": [{
    "selector": "h1"
  },
  {
    "selector": "a"
  }]
}'

{
	"success": true,
	"result": [
		{
			"results": [
				{
					"attributes": [],
					"height": 39,
					"html": "Example Domain",
					"left": 100,
					"text": "Example Domain",
					"top": 133.4375,
					"width": 600
				}
			],
			"selector": "h1"
		},
		{
			"results": [
				{
					"attributes": [
						{ "name": "href", "value": "https://www.iana.org/domains/example" }
					],
					"height": 20,
					"html": "More information...",
					"left": 100,
					"text": "More information...",
					"top": 249.875,
					"width": 142
				}
			],
			"selector": "a"
		}
	]
}

import Cloudflare from "cloudflare";

const client = new Cloudflare({
	apiToken: process.env["CLOUDFLARE_API_TOKEN"],
});

const scrapes = await client.browserRendering.scrape.create({
	account_id: process.env["CLOUDFLARE_ACCOUNT_ID"],
	url: "https://example.com/",
	elements: [{ selector: "h1" }, { selector: "a" }],
});

console.log(scrapes);

interface Env {
	BROWSER: BrowserRun;
}

export default {
	async fetch(request, env): Promise<Response> {
		return await env.BROWSER.quickAction("scrape", {
			url: "https://example.com/",
			elements: [{ selector: "h1" }, { selector: "a" }],
		});
	},
} satisfies ExportedHandler<Env>;

Many more options exist, like setting HTTP credentials using authenticate, setting cookies, and using gotoOptions to control page load behaviour - check the endpoint reference for all available parameters.

Response fields

• results (array of objects) - Contains extracted data for each selector.
  • selector (string) - The CSS selector used.
  • results (array of objects) - List of extracted elements matching the selector.
    • text (string) - Inner text of the element.
    • html (string) - Inner HTML of the element.
    • attributes (array of objects) - List of extracted attributes such as href for links.
    • height, width, top, left (number) - Position and dimensions of the element.

Advanced usage

:::note[Looking for more parameters?] Visit the Browser Run API reference for all available parameters, such as setting HTTP credentials using authenticate, setting cookies, and customizing load behavior using gotoOptions. :::