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

1. Dev Server muss laufen

   bashCopy

   yarn dev
   

   • Falls nicht: Server im Hintergrund starten
   • Warten bis Server auf http://localhost:4321 erreichbar ist

2. Playwright MCP muss verfuegbar sein

   • Tools: mcp__playwright__browser_navigate, mcp__playwright__browser_console_messages, etc.

Test-Ablauf

1. Dev Server pruefen/starten

# 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

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

b) Console-Errors pruefen

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)

mcp__playwright__browser_snapshot

• Visuelle Pruefung ob Elemente korrekt gerendert wurden

4. Spezifische Tests je nach Task

5. Ergebnis-Report

Nach allen Tests:

Erfolgreich:

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

Fehlgeschlagen:

{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"