Frontend & UI testen

Frontend-Tests in XAIO sind primär Vitest für Logik-Komponenten und Playwright für End-to-End-Klick-Pfade. Der Agent kann beides schreiben und gegen die laufende Live-Vorschau ausführen.

Smoke-Tests (häufigster Fall)

> Klick durch die wichtigsten Seiten meiner App. Pro Seite: prüf dass sie ohne Console-Errors lädt, dass der Hauptbutton existiert und klickbar ist.

Der Agent öffnet headless Chromium via Playwright, navigiert zu jeder Route, fängt console.error ab und meldet Fail wenn etwas crasht oder fehlt.

Form-Tests

> Teste das Bewerbungsformular auf der Beta-Landing. Prüf:

> 1. Submit ohne Pflichtfelder zeigt Fehler

> 2. Ungültige E-Mail wird abgelehnt

> 3. Erfolg-State erscheint nach gültigem Submit

> 4. POST-Payload enthält alle erwarteten Felder (Network-Tab abfangen)

Visuelle Regression

> Mach Screenshots von Login, Dashboard und Settings — vergleich sie mit den Baseline-PNGs in tests/snapshots/. Wenn ein Pixel-Diff über 0.5% ist, fail den Test.

Playwright + expect(page).toHaveScreenshot() erledigt das.

Accessibility

> Lass axe-core gegen alle Seiten laufen. Sag mir welche Buttons keine aria-label haben, welche Bilder kein alt-Attribut, welche Form-Inputs ohne Label sind.

Mobile-Layouts

> Test im iPhone-15-Viewport: prüf dass das Hamburger-Menü öffnet, Modals scrollbar sind, alle Buttons mit dem Daumen erreichbar (44×44 minimum).

Live-Preview-basiert

Tests laufen gegen die echte Live-Vorschau im Workspace, nicht gegen einen Mock. Das heißt:

• Backend-Calls gehen wirklich an dein Workspace-Backend
• Daten werden in der echten Workspace-DB angelegt (Test-Daten werden danach aufgeräumt)
• Bilder, Fonts, Animationen alle echt — Layout-Probleme werden sichtbar

Auto-Run nach Code-Änderung

> Lass die Smoke-Tests automatisch nach jedem Commit laufen. Bei Fail: stop, zeig mir was kaputt ist, schlag einen Fix vor.

Der Agent verbindet das mit einem Pre-Commit-Hook oder einem Watcher der auf *.tsx reagiert.