Web-App-Tests

Webanwendung testen

Zum Testen lokaler Webanwendungen schreiben Sie native Python Playwright-Skripte.

Verfügbare Hilfsskripte:

• scripts/with_server.py - Verwaltet den Server-Lebenszyklus (unterstützt mehrere Server)

Führen Sie Skripte immer zuerst mit --help aus, um die Nutzung zu sehen. Lesen Sie den Quellcode NICHT, bevor Sie nicht versucht haben, das Skript auszuführen, und festgestellt haben, dass eine maßgeschneiderte Lösung absolut notwendig ist. Diese Skripte können sehr groß sein und somit Ihren Kontextfenster verschmutzen. Sie existieren, um direkt als Blackbox-Skripte aufgerufen zu werden, anstatt in Ihren Kontext aufgenommen zu werden.

Entscheidungsbaum: Wahl des Ansatzes

Benutzeraufgabe → Ist es statisches HTML?
    ├─ Ja → HTML-Datei direkt lesen, um Selektoren zu identifizieren
    │         ├─ Erfolg → Playwright-Skript mit Selektoren schreiben
    │         └─ Fehlschlag/Unvollständig → Als dynamisch behandeln (unten)
    │
    └─ Nein (dynamische Webanwendung) → Läuft der Server bereits?
        ├─ Nein → Ausführen: python scripts/with_server.py --help
        │        Dann das Hilfsskript verwenden + vereinfachtes Playwright-Skript schreiben
        │
        └─ Ja → Aufklärungs-Handlungs-Muster:
            1. Navigieren und auf networkidle warten
            2. Screenshot machen oder DOM inspizieren
            3. Selektoren aus dem gerenderten Zustand identifizieren
            4. Aktionen mit den entdeckten Selektoren ausführen

Beispiel: Verwendung von with_server.py

Um einen Server zu starten, führen Sie zuerst --help aus, dann verwenden Sie das Hilfsskript:

Einzelner Server:

python scripts/with_server.py --server "npm run dev" --port 5173 -- python your_automation.py

Mehrere Server (z. B. Backend + Frontend):

python scripts/with_server.py \
  --server "cd backend && python server.py" --port 3000 \
  --server "cd frontend && npm run dev" --port 5173 \
  -- python your_automation.py

Um ein Automatisierungsskript zu erstellen, fügen Sie nur Playwright-Logik ein (Server werden automatisch verwaltet):

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True) # Chromium immer im Headless-Modus starten
    page = browser.new_page()
    page.goto('http://localhost:5173') # Server läuft bereits und ist bereit
    page.wait_for_load_state('networkidle') # KRITISCH: Auf Ausführung von JS warten
    # ... Ihre Automatisierungslogik
    browser.close()

Aufklärungs-Handlungs-Muster

1. Gerenderten DOM inspizieren:

   page.screenshot(path='/tmp/inspect.png', full_page=True)
   content = page.content()
   page.locator('button').all()
   

2. Selektoren aus Inspektionsergebnissen identifizieren

3. Aktionen mit den entdeckten Selektoren ausführen

Häufige Fehler

❌ Nicht den DOM inspizieren, bevor auf networkidle bei dynamischen Apps gewartet wurde ✅ Doch vor der Inspektion auf page.wait_for_load_state('networkidle') warten

Best Practices

• Verwenden Sie gebündelte Skripte als Blackboxen - Überlegen Sie, ob eines der Skripte in scripts/ bei der Aufgabe helfen kann. Diese Skripte behandeln häufige, komplexe Workflows zuverlässig, ohne das Kontextfenster zu überladen. Verwenden Sie --help, um die Nutzung zu sehen, und rufen Sie sie dann direkt auf.
• Verwenden Sie sync_playwright() für synchrone Skripte
• Schließen Sie den Browser immer, wenn Sie fertig sind
• Verwenden Sie beschreibende Selektoren: text=, role=, CSS-Selektoren oder IDs
• Fügen Sie angemessene Wartezeiten hinzu: page.wait_for_selector() oder page.wait_for_timeout()

Referenzdateien

• examples/ - Beispiele, die häufige Muster zeigen:
  • element_discovery.py - Entdecken von Buttons, Links und Eingabefeldern auf einer Seite
  • static_html_automation.py - Verwendung von file:// URLs für lokales HTML
  • console_logging.py - Erfassen von Konsolen-Logs während der Automatisierung