test-webapp

Test d'Application Web

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

Scripts d'aide disponibles :

• scripts/with_server.py - Gère le cycle de vie du serveur (prend en charge plusieurs serveurs)

Exécutez toujours les scripts avec --help en premier pour voir leur utilisation. NE lisez PAS le code source avant d'avoir d'abord 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 fenêtre de contexte. Ils existent pour être appelés directement en tant que scripts boîtes noires, plutôt que d'être ingérés dans votre contexte.

Arbre de Décision : Choisir Votre Approche

Tâche utilisateur → Est-ce du HTML statique ?
    ├─ Oui → Lire le fichier HTML directement pour identifier les sélecteurs
    │         ├─ Succès → Écrire le script Playwright en utilisant les sélecteurs
    │         └─ Échec/Incomplet → Traiter comme dynamique (ci-dessous)
    │
    └─ Non (application dynamique) → Le serveur est-il déjà en cours d'exécution ?
        ├─ Non → Exécuter : python scripts/with_server.py --help
        │        Puis utiliser l'assistant + écrire un script Playwright simplifié
        │
        └─ Oui → Modèle de reconnaissance puis action :
            1. Naviguer et attendre networkidle
            2. Prendre une capture d'écran ou inspecter le DOM
            3. Identifier les sélecteurs à partir de l'état rendu
            4. Exécuter les actions avec les sélecteurs découverts

Exemple : Utilisation de with_server.py

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

Serveur unique :

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

Serveurs multiples (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 votre_automatisation.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) # Toujours lancer chromium en mode headless
    page = browser.new_page()
    page.goto('http://localhost:5173') # Serveur déjà en cours et prêt
    page.wait_for_load_state('networkidle') # CRITIQUE : Attendre que le JS s'exécute
    # ... votre logique d'automatisation
    browser.close()

Modèle de Reconnaissance Puis Action

1. Inspecter le DOM rendu :

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

2. Identifier les sélecteurs à partir des résultats d'inspection

3. Exécuter les actions en utilisant les sélecteurs découverts

Piège Fréquent

❌ Ne pas inspecter le DOM avant d'avoir attendu networkidle sur les applications dynamiques ✅ Faire attendre page.wait_for_load_state('networkidle') avant l'inspection

Bonnes Pratiques

• Utiliser les scripts fournis comme boîtes noires - Pour accomplir une tâche, considérez si l'un des scripts disponibles dans scripts/ peut vous aider. Ces scripts gèrent des flux de travail complexes et courants de manière fiable sans encombrer la fenêtre de contexte. Utilisez --help pour voir l'usage, puis invoquez-les directement.
• Utilisez sync_playwright() pour les scripts synchrones
• Fermez toujours le navigateur à la fin
• Utilisez des sélecteurs descriptifs : text=, role=, sélecteurs CSS, ou IDs
• Ajoutez des attentes appropriées : page.wait_for_selector() ou page.wait_for_timeout()

Fichiers de Référence

• examples/ - Exemples montrant des motifs courants :
  • element_discovery.py - Découverte des boutons, liens et champs de saisie sur une page
  • static_html_automation.py - Utilisation d'URLs file:// pour du HTML local
  • console_logging.py - Capture des logs de la console pendant l'automatisation