Files

Till Tomczak 9a03e52209 🎉 Added new form testing tools and examples to the backend 📚

2025-06-18 07:24:27 +02:00

9.8 KiB

Raw Blame History

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

# Setup-Skript ausführen
./form_tester_setup.sh

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

Manuelle Installation

# Dependencies installieren
pip install playwright faker beautifulsoup4 rich

# Browser installieren
playwright install chromium firefox webkit

📋 Verwendung

CLI-Interface

Alle Formulare auf einer Seite testen

python form_test_automator.py --url http://localhost:5000/register --test-all

Spezifisches Formular testen

python form_test_automator.py --url http://localhost:5000/contact --form "#contact-form"

Multi-Step Formular testen

python form_test_automator.py --url http://localhost:5000/signup --multi-step --steps "step1,step2,step3"

Responsive Testing

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

Umfassende Tests mit allen Szenarien

python form_test_automator.py --url http://localhost:5000/application --comprehensive

Mit sichtbarem Browser (für Debugging)

python form_test_automator.py --url http://localhost:5000/login --test-all --headed

Python-API

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

# 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:

# 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

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

# Mehrstufige Formulare
results = await automator.test_multi_step_form(
    start_url="/registration",
    steps=["personal-info", "address", "payment", "confirmation"]
)

2. File-Upload-Testing

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

3. Cross-Browser-Testing

browsers = ["chromium", "firefox", "webkit"]
for browser in browsers:
    async with HTMLFormTestAutomator(browser=browser) as automator:
        # Tests für jeden Browser

4. Performance-Monitoring

# 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

# 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

# Browser neu installieren
playwright install chromium

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

Formular nicht gefunden

# Erweiterte Selektoren verwenden
form_selector = "form[action*='login'], #login-form, .login-form"

JavaScript-Timing-Probleme

# Längere Wartezeiten
await page.wait_for_timeout(2000)
await page.wait_for_load_state("networkidle")

Debug-Modus

# 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

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

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

# In FormInteractionEngine
async def test_custom_scenario(self, form: FormStructure) -> List[TestResult]:
    # Custom Test-Logik
    pass

Custom Validators

# 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

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

9.8 KiB Raw Blame History