← Browser Run / browser-run / quick-actions

/scrape - Извлечение HTML-элементов

/scrape эндпоинт извлекает структурированные данные из отдельных элементов страницы, возвращая такие сведения, как размеры элемента и его внутренний HTML.

Этот эндпоинт можно использовать двумя способами:

• REST API: Создайте пользовательский API Token с Browser Rendering - Edit разрешение.
• Workers Bindings: вызывайте конечную точку напрямую из Cloudflare Worker с помощью Workers Bindings. API-токен не требуется.

Подробнее см. в Quick Actions: прежде чем начать.

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

Необходимо указать elements и ровно один из url или html:

• url (строка)
• html (строка)
• elements (массив объектов), при этом каждый объект должен содержать selector (строка)

• Извлечение заголовков, ссылок, цен и другого повторяющегося контента с помощью CSS-селекторов
• Сбор метаданных (например, заголовков, описаний, canonical-ссылок)

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/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>;

Доступно много других параметров, например задание учетных данных HTTP с помощью authenticate, задав cookies, а также с использованием gotoOptions чтобы управлять поведением загрузки страницы. Подробнее см. в описании конечной точки справочник обо всех доступных параметрах.

• results (массив объектов) - содержит извлечённые данные для каждого селектора.
  • selector (строка) - использованный селектор CSS.
  • results (массив объектов) - список извлечённых элементов, соответствующих селектору.
    • text (строка) - внутренний текст элемента.
    • html (строка) - внутренний HTML элемента.
    • attributes (массив объектов) - список извлечённых атрибутов, например href для ссылок.
    • height, width, top, left (число) - положение и размеры элемента.

Для страниц с большим количеством JavaScript и одностраничных приложений (SPA) поведение загрузки по умолчанию может давать пустые или неполные результаты. Дело в том, что браузер считает страницу загруженной ещё до того, как JavaScript закончит рендеринг контента.

Проще всего использовать gotoOptions.waitUntil параметр со значением networkidle0 или networkidle2:

{
	"url": "https://example.com",
	"gotoOptions": {
		"waitUntil": "networkidle0"
	}
}

Для более быстрого отклика опытные пользователи могут использовать waitForSelector чтобы дожидаться появления конкретного элемента вместо ожидания остановки всей сетевой активности. Для этого нужно знать, какой CSS-селектор указывает на загрузку нужного контента. Подробнее см. в Тайм-ауты Quick Actions.

User-Agent можно изменить на уровне страницы, передав userAgent в качестве параметра верхнего уровня в теле JSON. Это полезно, если целевой сайт показывает разный контент в зависимости от User-Agent.

Если у вас есть вопросы или возникла ошибка, см. Часто задаваемые вопросы и руководство по устранению неполадок Browser Run.