Migawki ARIA Playwright dla agentów AI

Schematyczne zrzuty ARIA dla agentów AI w automatyzacji webowej

Wcześniejsze agenty opierały się na czystym HTML, co działało dla zadań tekstowych, ale zawodziło przy skomplikowanych interfejsach. Filtry usuwały szablonowy kod, jednak dla elementów interaktywnych potrzebne były alternatywy. Zrzuty ekranu stosuje się w automatyzacji stacjonarnej z dokładnością ok. 86% (GPT-5.2), ale zużywają dużo tokenów i słabo śledzą zmiany, zwłaszcza w wyborach dat.

Testy E2E typu Playwright odwołały się do ARIA — standardu W3C (WAI-ARIA 1.0, 2014), pierwotnie przeznaczonego dla czytników ekranu. ARIA dodaje do HTML:

• role: typ elementu (przycisk, pole tekstowe).
• name: czytelna nazwa dla użytkownika.
• state: stan dynamiczny ([zaznaczony], [wyłączony]).

Regulacje UE i USA nakazały dostępność stron rządowych, co przyspieszyło wdrożenie. Google poprawił drzewo dostępności w Chrome DevTools (2021).

Ograniczenia standardowego ARIA dla AI

ARIA jest skierowane na ludzi: kontekst czytników ekranu jest mniejszy niż u LLM, a uwaga skupiona na kolejnym czytaniu. Problemy:

• Przenośność między przeglądarkami: słaba w Firefox/WebKit.
• Aktualizacje inkrementalne są ograniczone.
• Zależność od API Chrome (Puppeteer).

Playwright stworzył własny parser: wstrzuca JS do przeglądarki, buduje zrzut ARIA z DOM-u z uwzględnieniem wyjątków. Format to YAML, oczyszczony z CSS i nadmiaru div-ów.

Struktura zrzutu ARIA Playwright

Zrzut przedstawia drzewo semantyczne:

- 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]

Rola określa interakcję: przycisk — kliknięcie, pole tekstowe — wpisywanie.

Nazwa obliczana według priorytetu: aria-labelledby > aria-label > label > content > title > placeholder. Bez nazwy element nie jest widoczny:

<button><svg class="icon-save"/></button>  <!-- niewidoczny -->
<button aria-label="Save"><svg class="icon-save"/></button>  <!-- widoczny -->

Stan rejestruje [zaznaczony], [rozwinięty].

Każdy węzeł ma ref do działań:

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

Aktualizacje inkrementalne do optymalizacji

Pełny zrzut dla złożonych stron to tysiące elementów — kosztowne pod względem tokenów. Playwright wysyła deltę:

- <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] odnosi się do kontekstu modelu, skracając dane o 94% (z 5KB do 300B dla 100+ elementów). To umożliwia wieloetapowe workflow bez powtarzania opisu.

Trudności implementacji parsera semantycznego

Playwright obsługuje:

• template/slot: końcowy wygląd renderowany.
• aria-owns: wirtualne połączenia w DOM.
• ::before/::after: generowany kontent.
• Widoczność: filtr display:none, aria-hidden, zero-size.

Problemy pozostałe: okna modalne nie zawsze ukrywają pola.

Ślepe zony ARIA:

• Wizualne: kolory, ikony.
• Przestrzeń: bounding boxes (eksperymentalnie).
• Canvas/WebGL: bez ARIA — niewidoczne.
• Niejawna semantyka: wyróżnienie tylko przez CSS.

Dla formularzy i nawigacji wystarczy; dla zadań wizualnych wymagany fallback.

Porównanie narzędzi agentów

| Agent/Narzędzie | Podejście |

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

| Claude (MCP) | Playwright ARIA + delta |

| Cursor | Podobnie jak Claude |

| GitHub Copilot | Playwright ARIA (od 2026) |

| ChatGPT Browsing | Analiza DOM |

| Anthropic Computer Use | Zrzuty ekranu |

| Stagehand | HTML |

| LaVague | Zrzuty + HTML |

Trend: migracja na Playwright ARIA.

Co ważne

• Zrzuty ARIA standaryzują obserwacje dla LLM, redukując tokeny o 94% dzięki doltom.
• Identyfikatory ref upraszczają działania bez XPath/CSS.
• Parser uwzględnia template, aria-owns, ::before do precyzyjnego drzewa.
• Ograniczenia: brak wizualizacji/pozycji; fallback na zrzuty obowiązkowy.
• Ekonomia AI przyspiesza przyjęcie semantycznego HTML.

— Editorial Team