# 🧪 Guide de Test Complet - Visual Workflow Builder

## 🚀 Démarrage Rapide

### Option 1 : Script Automatique (Recommandé)

```bash
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** :
```bash
cd visual_workflow_builder/backend
python app.py
```

**Terminal 2 - Frontend** :
```bash
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** :
```bash
# 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** :
```bash
# 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 :
   ```bash
   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 :
   ```bash
   curl -X POST http://localhost:5000/api/workflows/{id}/execute
   ```

## 📊 Tests API Manuels

### Test de Santé

```bash
curl http://localhost:5000/health
```

**Résultat attendu** :
```json
{
  "status": "healthy",
  "version": "1.0.0"
}
```

### Test de Sauvegarde

```bash
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** :
```json
{
  "id": "workflow-123",
  "message": "Workflow created successfully"
}
```

### Test de Capture d'Écran

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

**Résultat attendu** :
```json
{
  "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`