8.0 KiB
8.0 KiB
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
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
- Hauptprogrammscreenshot_config.json
- Konfigurationsdateirun_screenshot_tool.ps1
- PowerShell-Skript für Windows
Verwendung
Methode 1: PowerShell-Skript (Windows - Empfohlen)
# 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
cd scripts
python screenshot_tool.py
Methode 3: Mit Konfigurationsdatei
-
Konfiguration anpassen:
{ "server": { "base_url": "http://localhost:5000", "admin_email": "admin@example.com", "admin_password": "admin123" } }
-
Tool ausführen:
python screenshot_tool.py --config screenshot_config.json
Konfiguration
Server-Einstellungen
{
"server": {
"base_url": "http://localhost:5000",
"admin_email": "admin@example.com",
"admin_password": "admin123"
}
}
Browser-Einstellungen
{
"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
{
"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
)
{
"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"
pip install selenium
2. "ChromeDriver nicht gefunden"
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
# 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
{
"routes": {
"custom_routes": [
{
"url": "/special-demo",
"category": "benutzer",
"description": "Spezielle Demo-Seite"
}
]
}
}
2. Geplante Ausführung
# 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
# 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
- Log-Dateien prüfen:
screenshot_tool.log
- Konfiguration validieren:
screenshot_config.json
- Browser-Kompatibilität testen: Chrome vs. Firefox
- 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