# Flask HTML-Formular Test Automator 🧪

Ein umfassender Frontend-fokussierter Test-Automator für HTML-Formulare in Flask-Anwendungen. Simuliert echte Browser-Interaktionen und testet die tatsächliche Benutzeroberfläche mit JavaScript-Validierungen, dynamischen Elementen und realistischen User-Interaktionen.

## 🎯 Hauptmerkmale

### ✅ **Browser-basiertes Testing**
- Echte Browser-Interaktionen (Playwright)
- Realistische Mausbewegungen und Tipp-Geschwindigkeiten
- JavaScript-Validierungen werden mitgetestet
- Dynamische Inhalte und AJAX-Requests

### ✅ **Intelligente Formular-Erkennung**
- Automatisches Scannen aller Formulare auf einer Seite
- Erkennung von Feld-Typen und Validierungsregeln
- Multi-Step-Formular-Unterstützung
- CSRF-Token-Behandlung

### ✅ **Realistische Test-Daten**
- Intelligente Daten-Generierung basierend auf Feld-Attributen
- Pattern-basierte Generierung (RegEx-Support)
- Edge-Case-Generierung für robuste Tests
- Locale-spezifische Daten (Deutsch, Englisch, etc.)

### ✅ **Umfassende Validierung**
- HTML5-Validierungen
- Client-Side JavaScript-Validierungen
- Visual Feedback (Fehlermeldungen, Icons)
- Server-Side Validierung-Tests

### ✅ **Accessibility-Testing**
- ARIA-Attribute-Validierung
- Label-Zuordnungs-Tests
- Keyboard-Navigation
- Farbkontrast-Prüfung
- Screen-Reader-Kompatibilität

### ✅ **Responsive Design Tests**
- Multi-Device-Testing (iPhone, iPad, Desktop)
- Touch-Interaktions-Tests
- Viewport-spezifische Validierung
- Layout-Stabilitäts-Tests

### ✅ **Visual Documentation**
- Screenshots aller Test-Phasen
- Video-Aufzeichnung (optional)
- HTML-Reports mit visuellen Beweisen
- JSON-Export für Automation

## 🚀 Installation

### Schnell-Setup
```bash
# Setup-Skript ausführen
./form_tester_setup.sh

# Oder mit Virtual Environment
./form_tester_setup.sh --venv
```

### Manuelle Installation
```bash
# Dependencies installieren
pip install playwright faker beautifulsoup4 rich

# Browser installieren
playwright install chromium firefox webkit
```

## 📋 Verwendung

### CLI-Interface

#### Alle Formulare auf einer Seite testen
```bash
python form_test_automator.py --url http://localhost:5000/register --test-all
```

#### Spezifisches Formular testen
```bash
python form_test_automator.py --url http://localhost:5000/contact --form "#contact-form"
```

#### Multi-Step Formular testen
```bash
python form_test_automator.py --url http://localhost:5000/signup --multi-step --steps "step1,step2,step3"
```

#### Responsive Testing
```bash
python form_test_automator.py --url http://localhost:5000/order --responsive --devices "iPhone 12,iPad,Desktop"
```

#### Umfassende Tests mit allen Szenarien
```bash
python form_test_automator.py --url http://localhost:5000/application --comprehensive
```

#### Mit sichtbarem Browser (für Debugging)
```bash
python form_test_automator.py --url http://localhost:5000/login --test-all --headed
```

### Python-API

```python
import asyncio
from form_test_automator import HTMLFormTestAutomator

async def test_my_forms():
    async with HTMLFormTestAutomator(
        base_url="http://localhost:5000",
        browser="chromium",
        headless=True
    ) as automator:
        
        # Einfacher Formular-Test
        results = await automator.test_form(
            url="/login",
            form_selector="#login-form",
            test_data={
                "username": "admin",
                "password": "admin123"
            },
            test_scenarios=["valid", "invalid", "accessibility"]
        )
        
        # Report generieren
        report_path = automator.generate_report("my_test_report")
        print(f"Report: {report_path}")

# Test ausführen
asyncio.run(test_my_forms())
```

## 🧪 Test-Szenarien

### Standard-Szenarien
- **`valid`**: Gültige Daten, erwartete erfolgreiche Submission
- **`invalid`**: Ungültige Daten, Validierung sollte greifen
- **`edge_cases`**: XSS, SQL-Injection, Unicode, extreme Längen
- **`accessibility`**: ARIA, Labels, Keyboard-Navigation
- **`validations`**: Client-Side Validierungs-Tests
- **`responsive`**: Multi-Device-Tests
- **`dynamic`**: Conditional Fields, JavaScript-Verhalten
- **`error_display`**: Fehlermeldungs-Anzeige-Tests

### Erweiterte Tests
```bash
# Alle Szenarien
python form_test_automator.py --url http://localhost:5000 --comprehensive

# Spezifische Szenarien
python form_test_automator.py --url http://localhost:5000 --scenarios "valid,accessibility,responsive"
```

## 📊 Reports

### HTML-Report
- Visuelle Übersicht aller Tests
- Screenshots der Formular-Zustände
- Interaktive Statistiken
- Filtermöglichkeiten nach Status

### JSON-Report
- Maschinell lesbare Ergebnisse
- Integration in CI/CD-Pipelines
- Datenanalyse und Metriken
- API-kompatibles Format

### Screenshot-Dokumentation
- Vor/Nach-Vergleiche
- Fehler-Zustände
- Responsive-Ansichten
- Validierungs-Meldungen

## 🎪 MYP-spezifische Tests

Für das MYP (Manage Your Printers) System sind spezielle Test-Beispiele verfügbar:

```bash
# MYP-Beispiele ausführen
python test_forms_example.py

# Oder interaktiv wählen:
# 1. Umfassende Tests (alle Formulare)
# 2. Demo Einzeltest (mit sichtbarem Browser)
# 3. Nur Login-Test
# 4. Nur Responsive-Test
```

### Getestete MYP-Formulare
- **Login & Authentifizierung**
- **Drucker-Registrierung & -Verwaltung**
- **Druckauftrags-Erstellung**
- **Gast-Zugangs-System (OTP)**
- **Einstellungen & Konfiguration**
- **Tapo-Controller-Integration**

## ⚙️ Konfiguration

### form_tester_config.json
```json
{
    "base_url": "http://localhost:5000",
    "browser": "chromium",
    "headless": true,
    "viewport": {
        "width": 1280,
        "height": 720
    },
    "default_scenarios": [
        "valid",
        "invalid", 
        "accessibility"
    ],
    "test_devices": [
        "iPhone SE",
        "iPhone 12",
        "iPad",
        "Desktop 1280x720"
    ],
    "output_directory": "form_test_reports",
    "screenshot_on_failure": true,
    "video_recording": false
}
```

## 🔧 Erweiterte Features

### 1. Multi-Step-Form-Testing
```python
# Mehrstufige Formulare
results = await automator.test_multi_step_form(
    start_url="/registration",
    steps=["personal-info", "address", "payment", "confirmation"]
)
```

### 2. File-Upload-Testing
```python
# Datei-Upload-Tests
test_data = {
    "file": "/path/to/test-file.pdf",
    "description": "Test-Upload"
}
```

### 3. Cross-Browser-Testing
```python
browsers = ["chromium", "firefox", "webkit"]
for browser in browsers:
    async with HTMLFormTestAutomator(browser=browser) as automator:
        # Tests für jeden Browser
```

### 4. Performance-Monitoring
```python
# Execution-Time wird automatisch gemessen
for result in results:
    print(f"Test: {result.test_type}, Zeit: {result.execution_time:.2f}s")
```

### 5. Custom Test Data Generators
```python
# Eigene Daten-Generatoren
class CustomDataGenerator(FrontendTestDataGenerator):
    def _generate_company_id(self, field):
        return f"MB-{random.randint(1000, 9999)}"
```

## 🐛 Debugging & Troubleshooting

### Häufige Probleme

#### Playwright Installation
```bash
# Browser neu installieren
playwright install chromium

# System-Dependencies (Linux)
sudo apt-get install libnss3 libatk-bridge2.0-0 libx11-xcb1
```

#### Formular nicht gefunden
```python
# Erweiterte Selektoren verwenden
form_selector = "form[action*='login'], #login-form, .login-form"
```

#### JavaScript-Timing-Probleme
```python
# Längere Wartezeiten
await page.wait_for_timeout(2000)
await page.wait_for_load_state("networkidle")
```

### Debug-Modus
```bash
# Mit sichtbarem Browser
python form_test_automator.py --url http://localhost:5000 --headed

# Mit Console-Output
python form_test_automator.py --url http://localhost:5000 --verbose
```

## 📈 Integration in CI/CD

### GitHub Actions
```yaml
name: Form Tests
on: [push, pull_request]
jobs:
  test-forms:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Python
        uses: actions/setup-python@v4
        with:
          python-version: '3.9'
      - name: Install dependencies
        run: |
          pip install -r requirements_form_tester.txt
          playwright install chromium
      - name: Run form tests
        run: |
          python form_test_automator.py --url http://localhost:5000 --comprehensive
      - name: Upload reports
        uses: actions/upload-artifact@v3
        with:
          name: form-test-reports
          path: form_test_reports/
```

### Jenkins Pipeline
```groovy
pipeline {
    agent any
    stages {
        stage('Form Tests') {
            steps {
                sh 'python form_test_automator.py --url $TEST_URL --comprehensive'
                publishHTML([
                    allowMissing: false,
                    alwaysLinkToLastBuild: true,
                    keepAll: true,
                    reportDir: 'form_test_reports/reports',
                    reportFiles: '*.html',
                    reportName: 'Form Test Report'
                ])
            }
        }
    }
}
```

## 🤝 Contributing

### Neue Test-Szenarien hinzufügen
```python
# In FormInteractionEngine
async def test_custom_scenario(self, form: FormStructure) -> List[TestResult]:
    # Custom Test-Logik
    pass
```

### Custom Validators
```python
# In VisualFormValidator
async def validate_custom_aspect(self, form: FormStructure) -> List[TestResult]:
    # Custom Validierung
    pass
```

## 📝 Lizenz

Dieses Tool wurde als Teil der Mercedes-Benz Projektarbeit MYP entwickelt.

**Autor**: Till Tomczak  
**Projekt**: MYP (Manage Your Printers)  
**Version**: 1.0  

## 🔗 Links

- [Playwright Documentation](https://playwright.dev/python/)
- [Faker Documentation](https://faker.readthedocs.io/)
- [BeautifulSoup Documentation](https://www.crummy.com/software/BeautifulSoup/bs4/doc/)
- [Rich Documentation](https://rich.readthedocs.io/)

---

**🎯 Frontend-fokussiertes Testing für Flask-Anwendungen - Teste wie deine Benutzer es sehen!**