← Browser Run / browser-run / quick-actions

/accessibilityTree - Zachycení stromu přístupnosti

/accessibilityTree endpoint dá prohlížeči pokyn, aby přešel na web a po spuštění JavaScriptu zachytil strom přístupnosti stránky. Strom přístupnosti obsahuje informace související s přístupností, jako jsou role, názvy, hodnoty, stavy a hierarchie.

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

Musíte zadat buď url nebo html:

• url (řetězec)
• html (řetězec)

• Poskytněte AI agentům strukturovanou reprezentaci stránky pro navigaci a pracovní postupy automatizace prohlížeče
• Zkontrolujte role, přístupné názvy, hodnoty a stavy zpřístupněné asistivním technologiím
• Identifikujte interaktivní prvky, jako jsou tlačítka, odkazy, nabídky a pole formulářů, se kterými může pracovat automatizovaný postup

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-run/accessibilityTree' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "url": "https://example.com/"
}'

{
	"success": true,
	"result": {
		"accessibilityTree": {
			"role": "RootWebArea",
			"name": "Example Domain",
			"children": [
				{
					"role": "heading",
					"name": "Example Domain",
					"level": 1
				},
				{
					"role": "StaticText",
					"name": "This domain is for use in documentation examples without needing permission. Avoid use in operations."
				},
				{
					"role": "link",
					"name": "Learn more"
				}
			]
		}
	},
	"meta": {
		"status": 200,
		"title": "Example Domain"
	}
}

import Cloudflare from "cloudflare";

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

const accessibilityTree = await client.browserRendering.accessibilityTree.create({
	account_id: process.env["CLOUDFLARE_ACCOUNT_ID"],
	url: "https://example.com/",
});

console.log(accessibilityTree.accessibilityTree);

interface Env {
	BROWSER: BrowserRun;
}

export default {
	async fetch(request, env): Promise<Response> {
		return await env.BROWSER.quickAction("accessibilityTree", {
			url: "https://example.com/",
		});
	},
} satisfies ExportedHandler<Env>;

Následující volitelné parametry lze použít ve vašem /accessibilityTree požadavek, kromě povinného url nebo html .

Standardně interestingOnly je true, která filtruje odpověď na sémanticky významné uzly. Nastavte interestingOnly na false k zahrnutí každého uzlu do stromu přístupnosti, včetně obecných a prezentačních uzlů.

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-run/accessibilityTree' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "url": "https://example.com/",
    "interestingOnly": false
}'

{
	"success": true,
	"result": {
		"accessibilityTree": {
			"role": "RootWebArea",
			"name": "Example Domain",
			"children": [
				{
					"role": "generic",
					"name": "",
					"children": [
						{
							"role": "heading",
							"name": "Example Domain",
							"level": 1
						},
						{
							"role": "paragraph",
							"name": "",
							"children": [
								{
									"role": "StaticText",
									"name": "This domain is for use in documentation examples without needing permission. Avoid use in operations."
								}
							]
						},
						{
							"role": "paragraph",
							"name": "",
							"children": [
								{
									"role": "link",
									"name": "Learn more"
								}
							]
						}
					]
				}
			]
		}
	},
	"meta": {
		"status": 200,
		"title": "Example Domain"
	}
}

Nastavte root na řetězec CSS selektoru, aby se vrátil strom přístupnosti pro konkrétní část stránky.

Když root je nastaveno a interestingOnly není zadáno, interestingOnly má výchozí hodnotu false. Chcete-li podstrom filtrovat na sémanticky významné uzly, nastavte interestingOnly na true explicitně.

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-run/accessibilityTree' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "url": "https://example.com/",
    "root": "h1",
    "interestingOnly": true
}'

{
	"success": true,
	"result": {
		"accessibilityTree": {
			"role": "heading",
			"name": "Example Domain",
			"level": 1
		}
	},
	"meta": {
		"status": 200,
		"title": "Example Domain"
	}
}

Pokud root neodpovídá žádnému prvku na stránce, požadavek vrátí HTTP 200 a accessibilityTree je null.

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-run/accessibilityTree' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
    "url": "https://example.com/",
    "root": "#does-not-exist"
}'

{
	"success": true,
	"result": {
		"accessibilityTree": null
	},
	"meta": {
		"status": 200,
		"title": "Example Domain"
	}
}

U stránek s velkým množstvím JavaScriptu nebo jednostránkových aplikací (SPA) může výchozí chování při načítání stránky vracet prázdné nebo neúplné výsledky. Je to dáno tím, že prohlížeč považuje stránku za načtenou dříve, než JavaScript dokončí vykreslení obsahu.

Nejjednodušším řešením je použít gotoOptions.waitUntil parametr nastavený na networkidle0 nebo networkidle2:

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

Pro rychlejší odezvu mohou pokročilí uživatelé použít waitForSelector k čekání na konkrétní prvek namísto čekání na zastavení veškeré síťové aktivity. To vyžaduje znalost, který CSS selektor signalizuje, že se požadovaný obsah načetl. Další podrobnosti najdete v Časové limity Quick Actions.

User agent můžete změnit na úrovni stránky předáním userAgent jako parametr nejvyšší úrovně v těle JSON. To je užitečné, pokud cílový web zobrazuje různý obsah podle uživatelského agenta.

Pokud máte dotazy nebo narazíte na chybu, podívejte se na Časté dotazy a průvodce řešením problémů Browser Run.