ARIA-Snapshots Playwright für KI-Agenten

ARIA-Semantische Snapshots für KI-Agenten in der Web-Automatisierung

Frühe KI-Agenten basierten auf rohem HTML, was für textbasierte Aufgaben gut funktionierte, aber bei komplexen Benutzeroberflächen versagte. Boilerplate-Filter halfen zwar, interaktive Elemente erforderten jedoch Alternativen. Screenshot-basierte Ansätze erreichen in Desktop-Automatisierung eine Genauigkeit von etwa 86 % (GPT-5.2), verbrauchen aber viele Tokens und haben Schwierigkeiten, Änderungen zu verfolgen – besonders bei Datumsauswahlfeldern.

E2E-Testwerkzeuge wie Playwright wandten sich der ARIA-Standardisierung zu – einem W3C-Standard (WAI-ARIA 1.0, 2014), ursprünglich für Screenreader entwickelt. ARIA erweitert HTML um:

• Rollen: Art des Elements (z. B. Button, Textfeld).
• Bezeichnungen: menschlich lesbare Labels.
• Zustände: dynamische Bedingungen ([angeklickt], [deaktiviert]).

EU- und US-Regulierungen zur Barrierefreiheit öffentlicher Websites beschleunigten die Verbreitung. Google verbesserte 2021 den Zugriff auf die Accessibility Tree in Chrome DevTools.

Grenzen der Standard-ARIA für KI

ARIA ist für Menschen konzipiert: Kontextfenster von Screenreadern sind kleiner als LLM-Kontexte, und der Fokus liegt auf sequenzieller Lektüre. Wichtige Probleme:

• Schwache Cross-Browser-Konsistenz in Firefox/WebKit.
• Eingeschränkte Inkrementalupdates.
• Starke Abhängigkeit von Chrome-APIs (Puppeteer).

Playwright entwickelte eigenen Parser: injiziert JavaScript in den Browser, baut aus dem DOM ein ARIA-Snapshot und berücksichtigt Sonderfälle. Das Ausgabeformat ist YAML – ohne CSS und div-Soup.

Aufbau von Playwrights ARIA-Snapshots

Der Snapshot repräsentiert einen semantischen Baum:

- navigation [ref=e1]:
  - link "Home" [ref=e2]:
    - /url: /
  - link "Einstellungen" [ref=e3] [active]:
    - /url: /settings
- main [ref=e4]:
  - heading "Kontoeinstellungen" [level=1]
  - group "Profil":
    - textbox "Anzeigename" [ref=e5]: John Doe
    - textbox "E-Mail" [ref=e6]: [email protected]
      - /placeholder: [email protected]
  - group "Einstellungen":
    - checkbox "E-Mail-Benachrichtigungen" [ref=e7] [checked]
    - checkbox "Dunkler Modus" [ref=e8]
  - button "Änderungen speichern" [ref=e9] [cursor=pointer]

Rolle definiert die Interaktion: Button = Klicken, Textfeld = Eingabe.

Name wird nach Priorität gelöst: aria-labelledby > aria-label > label > Inhalt > title > placeholder. Ein Element ohne Name ist unsichtbar:

<button><svg class="icon-save"/></button>  <!-- unsichtbar -->
<button aria-label="Speichern"><svg class="icon-save"/></button>  <!-- sichtbar -->

Zustand erfasst [angeklickt], [erweitert].

Jeder Knoten hat eine ref für Aktionen:

{
  "name": "browser_click",
  "arguments": { "element": "Änderungen speichern Button", "ref": "e9" }
}

Inkrementelle Updates zur Optimierung

Vollständige Snapshots komplexer Seiten können Tausende Elemente enthalten – teuer in Tokens. Playwright sendet stattdessen Delta-Updates:

- <changed> main [ref=e4]:
  - ref=e5 [unchanged]
  - textbox "E-Mail" [ref=e6]: [email protected]
  - ref=e7 [unchanged]
  - checkbox "Dunkler Modus" [ref=e8] [checked]
  - ref=e9 [unchanged]

[unchanged] bezieht sich auf den Modellkontext und reduziert die Datenmenge um 94 % (von 5 KB auf 300 B bei über 100 Elementen). So lassen sich mehrschrittige Workflows ohne Neubeschreibung aller Teile realisieren.

Herausforderungen beim Aufbau eines semantischen Parsers

Playwright berücksichtigt:

• Template/Slot: endgültige gerenderte Ansicht.
• aria-owns: virtuelle DOM-Beziehungen.
• ::before/::after: generierte Inhalte.
• Sichtbarkeit: Filter für display:none, aria-hidden, nullgröße.

Verbleibende Probleme: Modals verstecken Felder nicht immer.

ARIA-Schwachpunkte:

• Visuelle Aspekte: Farben, Symbole.
• Raumanordnung: Begrenzungsboxen (experimentell).
• Canvas/WebGL: ohne ARIA unsichtbar.
• Implizite Semantik: Nur CSS-basierte Stilisierung.

Ausreichend für Formulare und Navigation; visuelle Aufgaben erfordern Rückfallmechanismen.

Vergleich von Agenten-Tools

| Agent/Tool | Ansatz |

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

| Claude (MCP) | Playwright ARIA + Deltas |

| Cursor | Ähnlich wie Claude |

| GitHub Copilot | Playwright ARIA (ab 2026) |

| ChatGPT Browsing | DOM-Analyse |

| Anthropic Computer Use | Screenshots |

| Stagehand | HTML |

| LaVague | Screenshots + HTML |

Trend: Migration hin zu Playwright ARIA.

Wichtige Erkenntnisse

• ARIA-Snapshots standardisieren Beobachtungen für LLMs und senken den Tokenverbrauch um 94 % durch Delta-Updates.
• Ref-Identifikatoren vereinfachen Aktionen ohne XPath/CSS.
• Parser berücksichtigt Templates, aria-owns, ::before für präzise Bäume.
• Einschränkungen: Keine visuellen oder positionsbezogenen Daten; Screenshot-Fallback ist essenziell.
• Die KI-Wirtschaft treibt die schnelle Akzeptanz semantischer HTML-Strukturen voran.

— Editorial Team