# Screenshot-Tool für Mitarbeiterschulungen

## Überblick

Das automatische Screenshot-Tool erstellt systematisch Screenshots aller Seiten Ihrer Webanwendung für Schulungszwecke und Präsentationsmaterial. Es ist speziell für die Ausarbeitung von Mitarbeiterschulungen und IHK-Präsentationen entwickelt worden.

## Funktionen

### 🎯 Kernfunktionen
- **Automatische Routenerkennung**: Erkennt alle verfügbaren Seiten der Webanwendung
- **Multi-Auflösung**: Screenshots in Desktop-, Tablet- und Mobile-Auflösungen
- **Kategorisierung**: Organisiert Screenshots nach Benutzergruppen (Admin, Benutzer, Öffentlich)
- **Automatischer Login**: Meldet sich automatisch als Administrator an
- **Detaillierte Berichte**: Erstellt umfassende Berichte über erstellte Screenshots

### 📱 Unterstützte Auflösungen
- **Desktop**: 1920x1080 (Standard)
- **Tablet**: 1024x768
- **Mobile**: 375x667 (iPhone-Format)
- **Large Desktop**: 2560x1440 (4K-Display)

### 📂 Ordnerstruktur
```
docs/schulung/screenshots/
├── admin/          # Administrator-Bereich
│   ├── desktop/    # Desktop-Auflösung
│   ├── tablet/     # Tablet-Auflösung
│   └── mobile/     # Mobile-Auflösung
├── benutzer/       # Allgemeiner Benutzerbereich
│   ├── desktop/
│   ├── tablet/
│   └── mobile/
├── oeffentlich/    # Öffentlich zugängliche Seiten
│   ├── desktop/
│   ├── tablet/
│   └── mobile/
├── berichte/       # Berichte und Statistiken
└── wartung/        # Wartung und System-Tools
```

## Installation

### Voraussetzungen
- **Python 3.7+** installiert
- **Google Chrome** oder **Firefox** Browser
- **Flask-Webanwendung** läuft lokal

### 1. Abhängigkeiten installieren
```bash
pip install selenium webdriver-manager
```

### 2. ChromeDriver (automatisch)
Das Tool installiert ChromeDriver automatisch über `webdriver-manager`.

### 3. Tool-Dateien
Die folgenden Dateien sollten im `scripts/` Ordner vorhanden sein:
- `screenshot_tool.py` - Hauptprogramm
- `screenshot_config.json` - Konfigurationsdatei
- `run_screenshot_tool.ps1` - PowerShell-Skript für Windows

## Verwendung

### Methode 1: PowerShell-Skript (Windows - Empfohlen)

```powershell
# Einfache Ausführung
.\scripts\run_screenshot_tool.ps1

# Interaktiver Modus
.\scripts\run_screenshot_tool.ps1 -Interactive

# Quick-Run mit benutzerdefinierten Parametern
.\scripts\run_screenshot_tool.ps1 -QuickRun -ServerUrl "http://localhost:5000"
```

### Methode 2: Direkter Python-Aufruf

```bash
cd scripts
python screenshot_tool.py
```

### Methode 3: Mit Konfigurationsdatei

1. **Konfiguration anpassen**:
   ```json
   {
     "server": {
       "base_url": "http://localhost:5000",
       "admin_email": "admin@example.com",
       "admin_password": "admin123"
     }
   }
   ```

2. **Tool ausführen**:
   ```bash
   python screenshot_tool.py --config screenshot_config.json
   ```

## Konfiguration

### Server-Einstellungen
```json
{
  "server": {
    "base_url": "http://localhost:5000",
    "admin_email": "admin@example.com",
    "admin_password": "admin123"
  }
}
```

### Browser-Einstellungen
```json
{
  "browser": {
    "type": "chrome",              // "chrome" oder "firefox"
    "headless": true,              // Ohne GUI (für Server)
    "page_load_timeout": 15,       // Sekunden
    "screenshot_delay": 2          // Wartezeit vor Screenshot
  }
}
```

### Erweiterte Einstellungen
```json
{
  "advanced": {
    "take_full_page_screenshots": true,
    "wait_for_dynamic_content": true,
    "generate_thumbnails": true,
    "compress_images": false
  }
}
```

## Ausgabe und Berichte

### Screenshot-Dateien
- **Format**: PNG (verlustfrei)
- **Benennung**: `seitenname_auflösung_zeitstempel.png`
- **Beispiel**: `dashboard_desktop_20250116_143022.png`

### Automatische Berichte

#### 1. JSON-Bericht (`screenshot_report.json`)
```json
{
  "session_info": {
    "start_time": "2025-01-16T14:30:22",
    "duration_seconds": 125.5,
    "total_screenshots": 48
  },
  "statistics": {
    "successful_screenshots": 45,
    "failed_screenshots": 3,
    "skipped_routes": 12
  }
}
```

#### 2. Markdown-Bericht (`screenshot_bericht.md`)
- Übersichtliche Darstellung aller Ergebnisse
- Verwendungshinweise für Schulungen
- Empfehlungen für Präsentationen

## Verwendung für Schulungen

### 1. IHK-Präsentationen
- **Desktop-Screenshots** für Hauptpräsentationen verwenden
- **Admin-Ordner** für Administrative Funktionen zeigen
- **Benutzer-Ordner** für alltägliche Arbeitsabläufe

### 2. Mitarbeiterschulungen
- **Schritt-für-Schritt-Anleitungen** mit Screenshots erstellen
- **Verschiedene Auflösungen** für Responsive-Design-Demonstrationen
- **Kategorisierte Ordner** für zielgruppenspezifische Schulungen

### 3. PowerPoint-Integration
```
1. Screenshots aus docs/schulung/screenshots/ importieren
2. Desktop-Auflösung für Folien verwenden
3. Mobile-Screenshots für Responsive-Design-Folien
4. Admin-Screenshots für Administratoren-Schulungen
5. Benutzer-Screenshots für allgemeine Mitarbeiterschulungen
```

### 4. Schulungshandbuch
- Screenshots als Illustrationen verwenden
- Schritt-für-Schritt-Anleitungen visuell unterstützen
- Verschiedene Benutzerrollen demonstrieren

## Fehlerbehebung

### Häufige Probleme

#### 1. "Selenium nicht verfügbar"
```bash
pip install selenium
```

#### 2. "ChromeDriver nicht gefunden"
```bash
pip install webdriver-manager
```

#### 3. "Login fehlgeschlagen"
- Admin-Zugangsdaten in Konfiguration prüfen
- Server-URL korrekt?
- Flask-App läuft?

#### 4. "Keine Screenshots erstellt"
- Browser startet nicht → Headless-Modus deaktivieren
- Zeitüberschreitung → Timeouts erhöhen
- Routen nicht gefunden → Flask-App-Verbindung prüfen

### Debug-Modus
```bash
# Ausführlicher Logging
export SCREENSHOT_DEBUG=true
python screenshot_tool.py

# Nicht-Headless-Modus (zeigt Browser)
export SCREENSHOT_HEADLESS=false
python screenshot_tool.py
```

### Log-Dateien
- **screenshot_tool.log**: Detaillierte Ausführungslogs
- **selenium.log**: Browser-spezifische Logs

## Erweiterte Verwendung

### 1. Benutzerdefinierte Routen
```json
{
  "routes": {
    "custom_routes": [
      {
        "url": "/special-demo",
        "category": "benutzer",
        "description": "Spezielle Demo-Seite"
      }
    ]
  }
}
```

### 2. Geplante Ausführung
```bash
# Windows Task Scheduler
schtasks /create /tn "Screenshot Tool" /tr "powershell.exe .\scripts\run_screenshot_tool.ps1 -QuickRun" /sc weekly

# Linux Cron
0 2 * * 0 cd /path/to/project && python scripts/screenshot_tool.py
```

### 3. CI/CD-Integration
```yaml
# GitHub Actions Beispiel
- name: Create Screenshots
  run: |
    pip install selenium webdriver-manager
    python scripts/screenshot_tool.py --headless --output docs/screenshots
```

## Best Practices

### 1. Vor der Ausführung
- ✅ Server läuft und ist erreichbar
- ✅ Admin-Account funktioniert
- ✅ Alle Seiten sind vollständig geladen
- ✅ Test-Daten sind vorhanden

### 2. Für Schulungen
- 📸 Verwenden Sie konsistente Auflösungen
- 📚 Organisieren Sie Screenshots thematisch
- 🎯 Erstellen Sie zielgruppenspezifische Ordner
- 📝 Dokumentieren Sie jeden Screenshot

### 3. Qualitätssicherung
- 🔍 Überprüfen Sie Screenshots auf Vollständigkeit
- 🎨 Achten Sie auf einheitliche Darstellung
- 📊 Verwenden Sie Berichte zur Qualitätskontrolle
- 🔄 Automatisieren Sie regelmäßige Updates

## Support und Weiterentwicklung

### Bei Problemen
1. **Log-Dateien prüfen**: `screenshot_tool.log`
2. **Konfiguration validieren**: `screenshot_config.json`
3. **Browser-Kompatibilität testen**: Chrome vs. Firefox
4. **Netzwerk-Konnektivität prüfen**: Server erreichbar?

### Erweiterungsmöglichkeiten
- **Annotation-Tool**: Automatische Markierungen auf Screenshots
- **Video-Recording**: Automatische Bildschirmaufnahmen
- **Multi-Language**: Screenshots in verschiedenen Sprachen
- **A/B-Testing**: Vergleichsscreenshots verschiedener Versionen

---

**Erstellt für**: Mitarbeiterschulungen und IHK-Präsentationen  
**Version**: 1.0  
**Datum**: 16.01.2025  
**Kompatibilität**: Windows 10+, Python 3.7+, Chrome/Firefox