Web-App-Testing

Testen von Webanwendungen

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

Verfügbare Hilfsskripte:

• scripts/with_server.py – Verwaltet den Serverlebenszyklus (unterstützt mehrere Server)

Führen Sie Skripte immer zuerst mit --help aus, um die Verwendung zu sehen. Lesen Sie den Quellcode erst, wenn Sie das Skript zuerst ausgeführt haben und feststellen, dass eine angepasste 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 Ihres 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 (siehe unten)
    │
    └─ Nein (dynamische Web-App) → Läuft der Server bereits?
        ├─ Nein → Ausführen: python scripts/with_server.py --help
        │        Dann den Helfer verwenden + vereinfachtes Playwright-Skript schreiben
        │
        └─ Ja → Erkundung-dann-Aktion:
            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 den Helfer:

Einzelner Server:

python scripts/with_server.py --server "npm run dev" --port 5173 -- python Ihre_automatisierung.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 Ihre_automatisierung.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: Warten, bis JS ausgeführt wurde
    # ... Ihre Automatisierungslogik
    browser.close()

Erkundung-dann-Aktion-Muster

1. Gerenderten DOM inspizieren:

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

2. Selektoren aus den Inspektionsergebnissen identifizieren

3. Aktionen mit den entdeckten Selektoren ausführen

Häufiger Fehler

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

Best Practices

• Verwenden Sie gebündelte Skripte als Blackboxen – Überlegen Sie bei einer Aufgabe, ob eines der in scripts/ verfügbaren Skripte helfen kann. Diese Skripte behandeln häufige, komplexe Workflows zuverlässig, ohne den Kontextfenster zu überladen. Verwenden Sie --help, um die Verwendung 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 geeignete Wartezeiten hinzu: page.wait_for_selector() oder page.wait_for_timeout()

Referenzdateien

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