rpa_vision_v3/visual_workflow_builder/TEST_TASK_10.md

🧪 Guide de Test - Tâche 10 : Sélecteur de Cible Interactif

🚀 Démarrage Rapide

1. Démarrer le Backend

cd visual_workflow_builder/backend
python app.py

Le backend devrait démarrer sur http://localhost:5000

2. Démarrer le Frontend

cd visual_workflow_builder/frontend
npm start

Le frontend devrait s'ouvrir automatiquement sur http://localhost:3000

✅ Tests à Effectuer

Test 1 : Vérification des Endpoints API

# Test de santé du backend
curl http://localhost:5000/health

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

# Test de validation de sélecteur
curl -X POST http://localhost:5000/api/screen-capture/validate-selector \
  -H "Content-Type: application/json" \
  -d '{"selector": "button.submit", "type": "css"}'

Résultat attendu : Réponses JSON valides sans erreurs

Test 2 : Interface Utilisateur

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

2. Ajouter une étape "Click" :

   • Glisser "Click" depuis la palette vers le canvas
   • Ou cliquer sur "Click" dans la palette

3. Ouvrir le panneau de propriétés :

   • Cliquer sur l'étape "Click" dans le canvas
   • Le panneau de propriétés devrait s'ouvrir à droite

4. Trouver le champ "Élément cible" :

   • Devrait afficher un champ de texte
   • Avec un bouton "Sélection visuelle" 📷

Test 3 : Mode Interactif

1. Cliquer sur "Sélection visuelle" :

   • Un dialog modal devrait s'ouvrir
   • Titre : "Sélectionner un élément"

2. Vérifier la capture d'écran :

   • Une capture de l'écran devrait s'afficher
   • Si erreur : vérifier que les modules core sont installés

3. Survoler des éléments :

   • Déplacer la souris sur la capture
   • Les éléments détectés devraient être surlignés en bleu

4. Cliquer sur un élément :

   • Cliquer sur un élément de la capture
   • L'élément devrait être surligné en vert
   • Le panneau latéral devrait afficher les informations

5. Vérifier les informations :

   • Type d'élément (button, input, etc.)
   • Texte visible
   • Sélecteurs disponibles (CSS, XPath, etc.)
   • Sélecteur recommandé

6. Confirmer la sélection :

   • Cliquer sur "Confirmer la sélection"
   • Le dialog devrait se fermer
   • Le sélecteur devrait être inséré dans le champ

Test 4 : Validation du Sélecteur

1. Vérifier le champ "Élément cible" :

   • Devrait contenir le sélecteur généré
   • Icône verte ✓ si valide
   • Icône rouge ✗ si invalide

2. Tester différents types de sélecteurs :

   • Changer le type entre "CSS" et "XPath"
   • Le sélecteur devrait être validé automatiquement

3. Copier le sélecteur :

   • Cliquer sur l'icône de copie
   • Le sélecteur devrait être copié dans le presse-papiers

🎯 Scénarios de Test Complets

Scénario 1 : Workflow de Connexion

1. Créer un workflow avec 3 étapes :

   • Navigate → Type (username) → Type (password) → Click (submit)

2. Pour chaque étape, utiliser la sélection visuelle :

   • Navigate : Pas de sélecteur nécessaire
   • Type (username) : Sélectionner le champ username
   • Type (password) : Sélectionner le champ password
   • Click (submit) : Sélectionner le bouton submit

3. Vérifier que tous les sélecteurs sont valides

Scénario 2 : Extraction de Données

1. Créer un workflow avec :

   • Navigate → Extract (titre) → Extract (prix)

2. Utiliser la sélection visuelle pour :

   • Sélectionner l'élément contenant le titre
   • Sélectionner l'élément contenant le prix

3. Vérifier que les propriétés extraites sont correctes

🐛 Problèmes Courants

Problème 1 : "Backend non accessible"

Symptôme : Erreur lors de l'ouverture du mode interactif

Solution :

# Vérifier que le backend est démarré
curl http://localhost:5000/health

# Si non démarré, lancer :
cd visual_workflow_builder/backend
python app.py

Problème 2 : "Screen capture not available"

Symptôme : Erreur 503 lors de la capture

Solution :

1. Vérifier que les modules core sont installés :

   pip install -r requirements.txt
   

2. Vérifier les permissions d'accès à l'écran (macOS)

3. Vérifier les logs du backend pour plus de détails

Problème 3 : Aucun élément détecté

Symptôme : La capture s'affiche mais aucun élément n'est surligné

Solution :

1. C'est normal si UIDetector n'est pas configuré
2. Cliquer directement sur la capture pour détecter l'élément à la demande
3. Le système utilisera element-at-point pour détecter l'élément

Problème 4 : Sélecteur invalide

Symptôme : Icône rouge ✗ après sélection

Solution :

1. Essayer un autre type de sélecteur (CSS ↔ XPath)
2. Modifier manuellement le sélecteur
3. Utiliser la sélection visuelle à nouveau

📊 Critères de Succès

✅ Tests Réussis

• Backend démarre sans erreur
• Frontend démarre sans erreur
• Endpoints API répondent correctement
• Dialog de sélection s'ouvre
• Capture d'écran s'affiche
• Éléments sont détectables (survol ou clic)
• Informations d'élément s'affichent
• Sélecteur est généré automatiquement
• Sélecteur est inséré dans le champ
• Validation du sélecteur fonctionne

📈 Métriques de Performance

• Temps de capture : < 2 secondes
• Temps de détection : < 1 seconde
• Temps de génération de sélecteur : < 100ms
• Taille de la capture : < 5MB (base64)

🎉 Validation Finale

Si tous les tests passent, la tâche 10 est complète ! ✅

Prochaine étape : Marquer la tâche comme terminée et passer à la tâche 11 (Gestion des variables)

---

Besoin d'aide ?

• Consulter TASK_10_INTEGRATION_COMPLETE.md pour plus de détails
• Vérifier les logs du backend : visual_workflow_builder/backend/app.log
• Vérifier la console du navigateur pour les erreurs frontend