Screenshot-Generierung

Dieses Verzeichnis enthält Screenshots für die Benutzer-Dokumentation.

Verzeichnisstruktur

screenshots/
├── desktop/{de,en}/{role}/  # Desktop-Screenshots (1280x720)
└── mobile/{de,en}/{role}/   # Mobile-Screenshots (375x667)

Screenshots generieren

Voraussetzungen

1. App mit Testdaten starten:

   cd /home/qwc/source/Wippidu/app
   docker compose up -d
   cd backend && go run ./cmd/init-testdata/main.go
   

2. Playwright MCP verwenden (über Claude Code)

Test-Accounts

Rolle	Account	Passwort
Parent	emma.mueller@wippidu.app	password123
Employee	employee.bees1@wippidu.app	employee123
GroupLead	teacher.bees@wippidu.app	teacher123
LocationLead	teacher.alpha@wippidu.app	teacher123
Admin	admin@wippidu.app	adminsecret

Screenshot-Workflow (mit Playwright MCP)

1. Navigieren: playwright_navigate → http://localhost:8080/
2. Login: playwright_fill + playwright_click
3. Viewport setzen: playwright_resize
4. Desktop: 1280x720
5. Mobile: 375x667
6. Zielseite öffnen: playwright_navigate
7. Screenshot: playwright_screenshot mit savePng: true

Benötigte Screenshots

Parent (parent/)

• login.png - Login-Seite
• home.png - Startseite nach Login
• settings.png - Einstellungen
• absence-menu.png - Abwesenheit-Menü
• absence-save.png - Abwesenheit speichern
• messages-menu.png - Nachrichten öffnen
• message-detail.png - Nachricht lesen
• letter-open.png - Elternbrief öffnen
• letter-reply.png - Elternbrief beantworten

Employee (employee/)

• children-menu.png - Kinder-Menü
• children-list.png - Kinder-Liste
• absences-menu.png - Abwesenheiten-Menü
• absence-confirm.png - Abwesenheit bestätigen
• message-compose.png - Nachricht schreiben
• chat-menu.png - Chat-Menü
• chat-message.png - Chat-Nachricht

GroupLead (grouplead/)

• letters-menu.png - Elternbriefe-Menü
• letter-create.png - Brief erstellen
• letter-responses.png - Antworten einsehen
• news-menu.png - News-Menü
• news-create.png - News erstellen
• invitations-menu.png - Einladungen-Menü
• invitation-create.png - Code erstellen

LocationLead (locationlead/)

• access-times-menu.png - Zugriffszeiten-Menü
• access-times-edit.png - Zeiten bearbeiten
• settings-menu.png - Einstellungen-Menü
• settings-overview.png - Einstellungs-Übersicht

Admin (admin/)

• users-menu.png - Benutzer-Menü
• user-create.png - Benutzer erstellen
• children-menu.png - Kinder-Menü
• child-create.png - Kind erstellen
• sync-dashboard.png - Sync-Dashboard

Namenskonvention

assets/screenshots/{device}/{lang}/{role}/{feature}.png

Beispiel: assets/screenshots/mobile/de/parent/notify.png