Tests d'applications Web

Pour tester des applications web locales, écrivez des scripts Python Playwright natifs.

Scripts d'assistance disponibles :

scripts/with_server.py - Gère le cycle de vie du serveur (supporte plusieurs serveurs)

Exécutez toujours les scripts avec --help en premier pour voir l'utilisation. NE LISEZ PAS le code source jusqu'à avoir essayé d'exécuter le script et constaté qu'une solution personnalisée est absolument nécessaire. Ces scripts peuvent être très volumineux et polluer votre context window. Ils sont conçus pour être appelés directement comme des boîtes noires plutôt que d'être ingérés dans votre context window.

Arbre de décision : choisir votre approche

Tâche utilisateur → Est-ce du HTML statique ?
    ├─ Oui → Lisez le fichier HTML directement pour identifier les sélecteurs
    │         ├─ Succès → Écrivez un script Playwright utilisant les sélecteurs
    │         └─ Échoue/Incomplet → Traitez comme dynamique (ci-dessous)
    │
    └─ Non (webapp dynamique) → Le serveur est-il déjà en cours d'exécution ?
        ├─ Non → Exécutez : python scripts/with_server.py --help
        │        Puis utilisez l'assistant + écrivez un script Playwright simplifié
        │
        └─ Oui → Reconnaissance puis action :
            1. Naviguez et attendez networkidle
            2. Prenez une capture d'écran ou inspectez le DOM
            3. Identifiez les sélecteurs à partir de l'état rendu
            4. Exécutez les actions avec les sélecteurs découverts

Exemple : utiliser with_server.py

Pour démarrer un serveur, exécutez d'abord --help, puis utilisez l'assistant :

Serveur unique :

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

Plusieurs serveurs (ex. 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

Pour créer un script d'automatisation, incluez uniquement la logique Playwright (les serveurs sont gérés automatiquement) :

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True) # Lancez toujours chromium en mode headless
    page = browser.new_page()
    page.goto('http://localhost:5173') # Serveur déjà en cours d'exécution et prêt
    page.wait_for_load_state('networkidle') # CRITIQUE : Attendez l'exécution du JS
    # ... votre logique d'automatisation
    browser.close()

Modèle de reconnaissance puis action

Inspectez le DOM rendu :

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

Identifiez les sélecteurs à partir des résultats d'inspection
Exécutez les actions en utilisant les sélecteurs découverts

Piège courant

❌ Ne inspectez pas le DOM avant d'attendre networkidle sur les apps dynamiques ✅ Faites attendre page.wait_for_load_state('networkidle') avant l'inspection

Bonnes pratiques

Utilisez les scripts intégrés comme des boîtes noires - Pour accomplir une tâche, demandez-vous si l'un des scripts disponibles dans scripts/ peut vous aider. Ces scripts gèrent les workflows courants et complexes de manière fiable sans encombrer le context window. Utilisez --help pour voir l'utilisation, puis invoquez directement.
Utilisez sync_playwright() pour les scripts synchrones
Fermez toujours le navigateur quand vous avez terminé
Utilisez des sélecteurs descriptifs : text=, role=, sélecteurs CSS, ou IDs
Ajoutez les attentes appropriées : page.wait_for_selector() ou page.wait_for_timeout()

Fichiers de référence

examples/ - Exemples montrant les modèles courants :
- element_discovery.py - Découverte de boutons, liens et entrées sur une page
- static_html_automation.py - Utilisation d'URLs file:// pour le HTML local
- console_logging.py - Capture des journaux console lors de l'automatisation

webapp-testing