ComposioHQ/webapp-testing

Webanwendungstests

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 Nutzung zu sehen. Lesen Sie den Quelltext NICHT, bis Sie versucht haben, das Skript auszuführen, und festgestellt haben, dass eine angepasste Lösung unbedingt erforderlich ist. Diese Skripte können sehr groß sein und Ihren Kontextfenster verschmutzen. Sie sind dafür da, direkt als Blackbox-Skripte aufgerufen zu werden, anstatt in Ihr Kontextfenster aufgenommen zu werden.

Entscheidungsbaum: Auswahl des Ansatzes

Benutzeraufgabe → Ist es statisches HTML?
    ├─ Ja → HTML-Datei direkt lesen, um Selektoren zu identifizieren
    │         ├─ Erfolg → Playwright-Skript mit Selektoren schreiben
    │         └─ Fehler/Unvollständig → Als dynamisch behandeln (siehe 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 → Reconnaissance-Then-Action:
            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) # Starten Sie Chromium immer im Headless-Modus
    page = browser.new_page()
    page.goto('http://localhost:5173') # Server läuft bereits und ist bereit
    page.wait_for_load_state('networkidle') # KRITISCH: Warten auf JS-Ausführung
    # ... Ihre Automatisierungslogik
    browser.close()

Reconnaissance-Then-Action-Muster

1. Gerendertes 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 das DOM inspizieren, bevor Sie auf networkidle bei dynamischen Anwendungen warten ✅ Doch auf page.wait_for_load_state('networkidle') warten, bevor Sie inspizieren

Best Practices

• Verwenden Sie gebündelte Skripte als Blackboxen - Überlegen Sie bei einer Aufgabe, ob eines der Skripte in scripts/ 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 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 gängige Muster zeigen:
  • element_discovery.py - Auffinden 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 Konsolenlogs während der Automatisierung