rpa_vision_v3/visual_workflow_builder/GUIDE_TEST_COMPLET.md

🧪 Guide de Test Complet - Visual Workflow Builder

🚀 Démarrage Rapide

Option 1 : Script Automatique (Recommandé)

cd visual_workflow_builder
./start_full.sh

Ce script va :

• ✅ Démarrer le backend Flask sur http://localhost:5000
• ✅ Démarrer le frontend React sur http://localhost:3000
• ✅ Ouvrir automatiquement le navigateur
• ✅ Afficher les logs en temps réel

Pour arrêter : Ctrl+C

Option 2 : Démarrage Manuel

Terminal 1 - Backend :

cd visual_workflow_builder/backend
python app.py

Terminal 2 - Frontend :

cd visual_workflow_builder/frontend
npm start

✅ Scénario de Test Complet

Test 1 : Créer un Workflow Simple

1. Ouvrir l'application : http://localhost:3000

2. Ajouter des étapes :

   • Glisser "Navigate" depuis la palette
   • Glisser "Click" depuis la palette
   • Glisser "Type" depuis la palette

3. Connecter les étapes :

   • Cliquer sur le port de sortie de "Navigate"
   • Glisser vers le port d'entrée de "Click"
   • Répéter pour connecter "Click" à "Type"

4. Configurer les étapes :

   Navigate :

   • Cliquer sur l'étape
   • Dans le panneau de propriétés, entrer : https://example.com

   Click :

   • Cliquer sur l'étape
   • Cliquer sur "Sélection visuelle" 📷
   • Sélectionner un bouton dans la capture
   • Confirmer

   Type :

   • Cliquer sur l'étape
   • Cliquer sur "Sélection visuelle" 📷
   • Sélectionner un champ de texte
   • Entrer le texte à taper : Hello World

5. Sauvegarder :

   • Cliquer sur "Sauvegarder" dans la barre d'outils
   • Vérifier la notification de succès
   • Le bouton devrait afficher "Sauvegardé" ✓

6. Exécuter :

   • Cliquer sur "Exécuter"
   • Observer l'exécution en temps réel
   • Les étapes changent de couleur selon leur état

Test 2 : Sélecteur de Cible Interactif

1. Ajouter une étape "Click"

2. Ouvrir le panneau de propriétés

3. Cliquer sur "Sélection visuelle" 📷

4. Vérifier le dialog :

   • ✅ Capture d'écran affichée
   • ✅ Éléments détectés surlignés
   • ✅ Survol change la couleur (bleu)
   • ✅ Clic sélectionne l'élément (vert)

5. Vérifier le panneau d'informations :

   • ✅ Type d'élément
   • ✅ Texte visible
   • ✅ Sélecteurs disponibles
   • ✅ Sélecteur recommandé

6. Confirmer la sélection :

   • ✅ Dialog se ferme
   • ✅ Sélecteur inséré dans le champ
   • ✅ Validation automatique (icône verte)

Test 3 : Gestion des Variables

1. Ajouter une étape "Extract"

2. Configurer l'extraction :

   • Sélecteur : h1.title
   • Variable : page_title

3. Ajouter une étape "Type"

4. Utiliser la variable :

   • Texte : ${page_title}

5. Vérifier la validation :

   • ✅ Référence de variable valide

Test 4 : Workflow avec Conditions

1. Créer un workflow :

   • Navigate → Extract → Condition → Click (true) / Wait (false)

2. Configurer la condition :

   • Expression : ${page_title} == "Welcome"

3. Connecter les branches :

   • Port "true" → Click
   • Port "false" → Wait

4. Sauvegarder et exécuter

Test 5 : Workflow avec Boucles

1. Créer un workflow :

   • Navigate → Loop → Click → Extract

2. Configurer la boucle :

   • Type : repeat
   • Count : 3

3. Connecter la boucle :

   • Loop → Click (début de boucle)
   • Extract → Loop (retour)

4. Sauvegarder et exécuter

🎯 Points de Vérification

Interface Utilisateur

• Palette affiche toutes les catégories
• Drag & drop fonctionne
• Connexions entre étapes fonctionnent
• Sélection d'étapes fonctionne
• Suppression d'étapes fonctionne
• Panneau de propriétés s'ouvre
• Validation en temps réel fonctionne

Sélecteur de Cible

• Bouton "Sélection visuelle" visible
• Dialog s'ouvre correctement
• Capture d'écran s'affiche
• Éléments sont détectables
• Survol fonctionne
• Sélection fonctionne
• Sélecteurs générés correctement
• Confirmation insère le sélecteur

Sauvegarde

• Bouton "Sauvegarder" actif avec des étapes
• Notification de succès affichée
• ID de workflow retourné
• Bouton change en "Sauvegardé" ✓
• Sauvegarde ultérieure met à jour (PUT)

Exécution

• Bouton "Exécuter" actif avec des étapes
• Sauvegarde automatique si nécessaire
• Notification de démarrage affichée
• WebSocket connecté
• États des étapes mis à jour
• Animations des connexions
• Résumé d'exécution affiché

🐛 Dépannage

Backend ne démarre pas

Symptôme : Erreur au démarrage du backend

Solutions :

# Vérifier les dépendances
pip install -r requirements.txt

# Vérifier le port
lsof -i :5000

# Voir les logs
cat backend.log

Frontend ne démarre pas

Symptôme : Erreur au démarrage du frontend

Solutions :

# Réinstaller les dépendances
cd frontend
rm -rf node_modules package-lock.json
npm install

# Voir les logs
cat frontend.log

Capture d'écran ne fonctionne pas

Symptôme : Erreur "Screen capture not available"

Solutions :

1. Vérifier que les modules core sont installés
2. Vérifier les permissions d'accès à l'écran (macOS)
3. Vérifier les logs du backend

Sauvegarde échoue

Symptôme : Erreur lors de la sauvegarde

Solutions :

1. Vérifier que le backend est accessible
2. Vérifier la console du navigateur (F12)
3. Vérifier les logs du backend
4. Tester l'endpoint manuellement :

   curl -X POST http://localhost:5000/api/workflows \
     -H "Content-Type: application/json" \
     -d '{"name":"Test","nodes":[],"edges":[]}'
   

Exécution échoue

Symptôme : Erreur lors de l'exécution

Solutions :

1. Vérifier que le workflow est sauvegardé
2. Vérifier que toutes les étapes sont configurées
3. Vérifier les logs du backend
4. Tester l'endpoint manuellement :

   curl -X POST http://localhost:5000/api/workflows/{id}/execute
   

📊 Tests API Manuels

Test de Santé

curl http://localhost:5000/health

Résultat attendu :

{
  "status": "healthy",
  "version": "1.0.0"
}

Test de Sauvegarde

curl -X POST http://localhost:5000/api/workflows \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Test Workflow",
    "description": "Test",
    "nodes": [
      {
        "id": "node-1",
        "type": "click",
        "position": {"x": 100, "y": 100},
        "label": "Click",
        "parameters": {"target": "button.submit"}
      }
    ],
    "edges": [],
    "variables": {},
    "metadata": {}
  }'

Résultat attendu :

{
  "id": "workflow-123",
  "message": "Workflow created successfully"
}

Test de Capture d'Écran

curl -X POST http://localhost:5000/api/screen-capture/capture \
  -H "Content-Type: application/json" \
  -d '{}'

Résultat attendu :

{
  "image": "data:image/png;base64,...",
  "width": 1920,
  "height": 1080,
  "format": "png"
}

✅ Checklist de Validation Complète

Fonctionnalités de Base

• Créer un nouveau workflow
• Ajouter des étapes
• Connecter des étapes
• Configurer des paramètres
• Sauvegarder un workflow
• Exécuter un workflow

Sélecteur de Cible

• Ouvrir le mode interactif
• Capturer l'écran
• Détecter des éléments
• Sélectionner un élément
• Générer des sélecteurs
• Confirmer la sélection

Gestion des Variables

• Créer une variable
• Utiliser une variable
• Valider les références

Logique de Contrôle

• Créer une condition
• Créer une boucle
• Connecter les branches

Exécution Temps Réel

• WebSocket connecté
• États mis à jour
• Animations affichées
• Résumé généré

Interface Utilisateur

• Responsive
• Intuitive
• Feedback visuel
• Notifications

🎉 Validation Finale

Si tous les tests passent, l'application est prête pour la démo ! ✅

---

Besoin d'aide ?

• Consulter les logs : backend.log et frontend.log
• Vérifier la console du navigateur (F12)
• Tester les endpoints API manuellement
• Consulter la documentation : TASK_10_INTEGRATION_COMPLETE.md