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

## 🚀 Démarrage Rapide

### 1. Démarrer le Backend

```bash
cd visual_workflow_builder/backend
python app.py
```

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

### 2. Démarrer le Frontend

```bash
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

```bash
# 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** :
```bash
# 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 :
   ```bash
   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