rpa_vision_v3/visual_workflow_builder/TEST_TARGET_SELECTOR.md

🎯 Test du TargetSelector - Guide Pas à Pas

Étapes pour Voir le TargetSelector

1. Ouvrir l'Application

# L'application devrait déjà être en cours d'exécution
# Ouvrir dans le navigateur : http://localhost:3000

2. Ajouter un Node "Click"

1. Dans la palette de gauche, chercher la section "ACTION"
2. Cliquer sur "Click" (ou glisser-déposer sur le canvas)
3. Un node "Click" apparaît sur le canvas

3. Sélectionner le Node

1. Cliquer sur le node "Click" dans le canvas
2. Le panneau de propriétés s'ouvre à droite
3. Vous devriez voir :
   • Type d'étape : "Click"
   • Section "Configuration" avec plusieurs champs

4. Voir le TargetSelector

Dans le panneau de propriétés, vous devriez voir :

┌─────────────────────────────────────┐
│ Élément cible *                     │
│ ┌─────────────┬─────────────────┐   │
│ │ Type: CSS ▼ │ □ Mode interactif│   │
│ └─────────────┴─────────────────┘   │
│                                     │
│ ┌─────────────────────────────────┐ │
│ │ 🔍 button                       │ │
│ │                              ✓  │ │
│ └─────────────────────────────────┘ │
│ 5 élément(s) trouvé(s)              │
│                                     │
│ Suggestions:                        │
│ • button - Tous les boutons         │
│ • input[type="text"] - Champs...   │
│ • #submit - Élément avec ID...     │
└─────────────────────────────────────┘

5. Tester les Fonctionnalités

A. Validation en Temps Réel

1. Taper un sélecteur valide : button

   • ✅ Icône verte apparaît
   • Affiche "X élément(s) trouvé(s)"

2. Taper un sélecteur invalide : button[[[

   • ❌ Icône rouge apparaît
   • Affiche "Sélecteur CSS invalide"

B. Changer de Type

1. Cliquer sur le menu déroulant "Type"
2. Sélectionner "XPath"
3. Taper : //button
4. Voir la validation XPath

C. Suggestions

1. Commencer à taper : inp
2. Voir les suggestions apparaître
3. Cliquer sur une suggestion pour l'appliquer

D. Mode Interactif

1. Activer le switch "Mode interactif"
2. Une alerte apparaît (simulation)
3. Dans une version future, cela permettra de cliquer sur des éléments

E. Copier le Sélecteur

1. Taper un sélecteur valide
2. Cliquer sur l'icône 📋 (copier)
3. Le sélecteur est copié dans le presse-papiers

6. Tester avec d'Autres Nodes

Node "Type"

1. Ajouter un node "Type" depuis la palette
2. Le sélectionner
3. Voir le TargetSelector pour "Champ cible"

Node "Extract"

1. Ajouter un node "Extract" depuis la palette
2. Le sélectionner
3. Voir le TargetSelector pour "Élément source"

🔍 Dépannage

Le Panneau de Propriétés ne S'Ouvre Pas

• Vérifier : Avez-vous cliqué sur le node dans le canvas ?
• Solution : Cliquer directement sur le node (pas à côté)

Le TargetSelector n'Apparaît Pas

• Vérifier : Quel type de node avez-vous sélectionné ?
• Solution : Seuls Click, Type et Extract ont un paramètre 'target'
• Essayer : Node "Wait" ou "Navigate" n'ont PAS de TargetSelector

Les Changements ne Sont Pas Visibles

1. Rafraîchir la page : Ctrl+R ou Cmd+R
2. Vider le cache : Ctrl+Shift+R ou Cmd+Shift+R
3. Vérifier la console : F12 → Console (chercher des erreurs)

Le Serveur ne Répond Pas

# Vérifier le statut
cd visual_workflow_builder/frontend
bash status.sh

# Si nécessaire, redémarrer
bash stop.sh
bash start.sh

📸 Captures d'Écran Attendues

Vue Complète

┌──────────────────────────────────────────────────────────────┐
│ Visual Workflow Builder                    [Nouveau] [Ouvrir]│
├──────────────────────────────────────────────────────────────┤
│                                                              │
│  PALETTE    │         CANVAS          │    PROPRIÉTÉS       │
│  ┌────────┐ │  ┌──────────────────┐  │  ┌────────────────┐ │
│  │ACTION  │ │  │                  │  │  │ Type: Click    │ │
│  │ Click  │ │  │   [Click Node]   │  │  │                │ │
│  │ Type   │ │  │                  │  │  │ Configuration: │ │
│  │ Wait   │ │  │                  │  │  │                │ │
│  │        │ │  │                  │  │  │ Élément cible: │ │
│  │LOGIC   │ │  │                  │  │  │ [TargetSelect] │ │
│  │ If     │ │  │                  │  │  │                │ │
│  │ Loop   │ │  │                  │  │  │ Timeout: 5000  │ │
│  └────────┘ │  └──────────────────┘  │  └────────────────┘ │
└──────────────────────────────────────────────────────────────┘

✅ Checklist de Test

• L'application s'ouvre sur http://localhost:3000
• La palette de gauche affiche les types de nodes
• Je peux ajouter un node "Click" au canvas
• Je peux sélectionner le node "Click"
• Le panneau de propriétés s'ouvre à droite
• Je vois le TargetSelector avec le champ "Élément cible"
• Je peux choisir entre CSS et XPath
• La validation fonctionne en temps réel
• Les suggestions apparaissent quand je tape
• Je peux copier un sélecteur
• Le mode interactif affiche une alerte

🎉 Succès !

Si vous voyez le TargetSelector avec toutes ces fonctionnalités, la tâche 10 est complète !

---

Besoin d'aide ? Vérifiez la console du navigateur (F12) pour voir les erreurs éventuelles.