# 🎯 Test du TargetSelector - Guide Pas à Pas

## Étapes pour Voir le TargetSelector

### 1. Ouvrir l'Application
```bash
# 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
```bash
# 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.