Verify Tasks Skill

Automatisiertes Browser-Testing mit Playwright MCP nach Abschluss von Implementation-Tasks.

Wann ausfuehren

•Nach Abschluss aller Tasks in einer Session
•Wenn User explizit "verify", "teste", oder "pruefe" sagt
•Vor dem Deployment um Fehler fruehzeitig zu erkennen

Voraussetzungen

•
Dev Server muss laufen
bash
```
yarn dev
```
- •Falls nicht: Server im Hintergrund starten
- •Warten bis Server auf http://localhost:4321 erreichbar ist
•
Playwright MCP muss verfuegbar sein
- •Tools: mcp__playwright__browser_navigate, mcp__playwright__browser_console_messages, etc.

Test-Ablauf

1. Dev Server pruefen/starten

bash

# Pruefen ob Server laeuft
curl -s -o /dev/null -w "%{http_code}" http://localhost:4321 || yarn dev &

2. Betroffene Seiten identifizieren

Aus den abgeschlossenen Tasks die relevanten URLs ableiten:

•ContactForm.tsx geaendert → /kontakt, /bestellen
•Youtube.tsx geaendert → /ressourcen/videoanleitungen
•Plan.astro geaendert → /preise
•Base.astro geaendert → Alle Seiten (Startseite genuegt)

3. Pro Seite testen

Fuer jede betroffene URL:

a) Seite navigieren

code

mcp__playwright__browser_navigate: url=http://localhost:4321{path}

b) Console-Errors pruefen

code

mcp__playwright__browser_console_messages: level=error

•Keine Errors = OK
•Hydration Errors = FAIL
•400/500 Errors = FAIL
•Externe Service-Errors (tawk.to, etc.) = WARNUNG (nicht kritisch)

c) Snapshot pruefen (optional)

code

mcp__playwright__browser_snapshot

•Visuelle Pruefung ob Elemente korrekt gerendert wurden

4. Spezifische Tests je nach Task

Task	Test
Hydration Fix	Console auf "Hydration" oder "Error #418" pruefen
Submit-Button Spinner	Formular absenden, Spinner sichtbar?
Cursor Styling	Snapshot pruefen, Features nicht klickbar
YouTube Fix	Video-Tab wechseln, kein Error
Usercentrics	Keine 400-Fehler fuer autoblocker.js

5. Ergebnis-Report

Nach allen Tests:

Erfolgreich:

code

Alle {n} Tests bestanden:
- /kontakt: Keine Console-Errors
- /preise: Keine Console-Errors
- /ressourcen/videoanleitungen: Keine Console-Errors

Fehlgeschlagen:

code

{n} von {m} Tests fehlgeschlagen:

FAIL: /kontakt
  - Error: Hydration failed because...

OK: /preise
  - Keine Errors

Empfehlung: {Konkreter Fix-Vorschlag}

Playwright MCP Tools Referenz

•mcp__playwright__browser_navigate - Seite aufrufen
•mcp__playwright__browser_console_messages - Console-Logs abrufen
•mcp__playwright__browser_snapshot - DOM-Snapshot fuer visuelle Pruefung
•mcp__playwright__browser_click - Element klicken
•mcp__playwright__browser_fill_form - Formular ausfuellen
•mcp__playwright__browser_close - Browser schliessen

Wichtige Regeln

•Dev Server muss laufen (localhost:4321)
•Timeout von 10 Sekunden pro Seite
•Externe Fehler (Tawk.to, externe APIs) sind Warnungen, keine Fails
•Usercentrics-Fehler fuer Services sind ok (Consent nicht gegeben)
•Nach Tests: Browser mit browser_close schliessen

Typische Nutzung

User: /verify-tasks oder: "teste ob die aenderungen funktionieren" oder: "pruefe die seiten mit playwright"