ARIA snímky Playwright pro AI agenty

Semantické snímky ARIA pro AI agenty ve webové automatizaci

Rané agenty spoléhaly na čistý HTML, což fungovalo pro textové úkoly, ale selhalo u složitých uživatelských rozhraní. Filtry odstraňovaly boilerplate, avšak pro interaktivní prvky byly potřeba alternativy. Snímky obrazovky se používají v desktopové automatizaci s přesností ~86 % (GPT-5.2), ale spotřebovávají mnoho tokenů a špatně sledují změny, zejména u výběru data.

E2E testy jako Playwright se obrátily k ARIA – standardu W3C (WAI-ARIA 1.0, 2014), původně určenému pro čtečky obrazovky. ARIA do HTML přidává:

• role: typ prvku (tlačítko, textové pole).
• name: čitelné jméno pro uživatele.
• state: dynamický stav ([checked], [disabled]).

Pravidla EU a USA povinná dostupnost státních webů podpořila jeho rozšíření. Google vylepšil accessibility tree v Chrome DevTools (2021).

Omezení běžného ARIA pro AI

ARIA je zaměřeno na lidi: kontext čteček obrazovek je menší než kontext LLM, důraz je na postupném čtení. Problémy:

• Krosobrowserovost: slabá v Firefoxu/WebKit.
• Inkrementální aktualizace jsou omezené.
• Závislost na Chrome API (Puppeteer).

Playwright vytvořil vlastní parser: vkládá JS do prohlížeče, staví ARIA-snímek z DOM s ohledem na speciální případy. Formát je YAML, čistý od CSS a div soup.

Struktura ARIA-snímku Playwright

Snímek představuje semantické stromové uspořádání:

- navigation [ref=e1]:
  - link "Home" [ref=e2]:
    - /url: /
  - link "Settings" [ref=e3] [active]:
    - /url: /settings
- main [ref=e4]:
  - heading "Account Settings" [level=1]
  - group "Profile":
    - textbox "Display name" [ref=e5]: John Doe
    - textbox "Email" [ref=e6]: [email protected]
      - /placeholder: [email protected]
  - group "Preferences":
    - checkbox "Email notifications" [ref=e7] [checked]
    - checkbox "Dark mode" [ref=e8]
  - button "Save Changes" [ref=e9] [cursor=pointer]

Role určuje interakci: tlačítko – kliknutí, textové pole – zadání.

Jméno se počítá podle priority: aria-labelledby > aria-label > label > content > title > placeholder. Bez jména prvek není viditelný:

<button><svg class="icon-save"/></button>  <!-- neviditelný -->
<button aria-label="Save"><svg class="icon-save"/></button>  <!-- viditelný -->

Stav zachycuje [checked], [expanded].

Každý uzel má ref pro akce:

{
  "name": "browser_click",
  "arguments": { "element": "Save Changes button", "ref": "e9" }
}

Inkrementální aktualizace pro optimalizaci

Plný snímek pro složité stránky – tisíce prvků, náročný na tokeny. Playwright posílá delta:

- <changed> main [ref=e4]:
  - ref=e5 [unchanged]
  - textbox "Email" [ref=e6]: [email protected]
  - ref=e7 [unchanged]
  - checkbox "Dark mode" [ref=e8] [checked]
  - ref=e9 [unchanged]

[unchanged] odkazuje na kontext modelu, redukuje data o 94 % (z 5 KB na 300 B pro 100+ prvků). To umožňuje vícekrokové workflow bez opakovaného popisu.

Složitosti implementace semantického parseru

Playwright zpracovává:

• template/slot: konečný vykreslený vzhled.
• aria-owns: virtuální vazby v DOM.
• ::before/::after: generovaný obsah.
• Viditelnost: filtr display:none, aria-hidden, nulová velikost.

Problémy zůstávají: modální okna ne vždy skrývají pole.

Slepé zóny ARIA:

• Vizuál: barvy, ikony.
• Prostor: bounding boxes (experimentálně).
• Canvas/WebGL: bez ARIA – neviditelné.
• Nepřímá semantika: výběr pouze pomocí CSS.

Pro formuláře a navigaci stačí; pro vizuální úkoly je nutný fallback.

Srovnání nástrojů agentů

| Agent/Nástroj | Přístup |

|------------------|--------|

| Claude (MCP) | Playwright ARIA + delta |

| Cursor | Podobně jako Claude |

| GitHub Copilot | Playwright ARIA (od 2026) |

| ChatGPT Browsing | Analýza DOM |

| Anthropic Computer Use | Snímky obrazovky |

| Stagehand | HTML |

| LaVague | Snímky obrazovky + HTML |

Trend: migrace na Playwright ARIA.

Důležité informace

• ARIA-snímky standardizují pozorování pro LLM, snižují tokeny o 94 % díky delta.
• Ref-identifikátory zjednodušují akce bez XPath/CSS.
• Parser bere v úvahu template, aria-owns, ::before pro přesné stromy.
• Omezení: žádný vizuál/pozice; fallback na snímky obrazovky je nezbytný.
• Ekonomika AI zrychluje přijetí semantického HTML.

— Editorial Team