# Guide de Test VWB Final - Catalogue d'Actions VisionOnly

**Auteur :** Dom, Alice, Kiro - 10 janvier 2026

## Vue d'Ensemble

Ce guide vous permet de tester rapidement le Visual Workflow Builder avec le catalogue d'actions VisionOnly intégré après les corrections TypeScript.

## Prérequis

- Python 3.8+ avec environnement virtuel `venv_v3/` activé
- Node.js et npm installés
- Dépendances Python installées

## Étapes de Test

### 1. Activation de l'Environnement

```bash
# Activer l'environnement virtuel
source venv_v3/bin/activate  # Linux/macOS
# ou
venv_v3\Scripts\activate     # Windows
```

### 2. Vérification TypeScript

```bash
# Test rapide de compilation
python test_vwb_typescript_final.py
```

**Résultat attendu :** ✅ Compilation TypeScript réussie !

### 3. Démarrage du Backend VWB

```bash
# Démarrer le backend VWB avec le catalogue
python scripts/start_vwb_backend_ultra_stable.py
```

**Résultat attendu :** Backend démarré sur le port 5004

### 4. Démarrage du Frontend VWB

```bash
# Dans un nouveau terminal
cd visual_workflow_builder/frontend

# Installer les dépendances si nécessaire
npm install

# Démarrer le serveur de développement
npm start
```

**Résultat attendu :** Frontend accessible sur http://localhost:3000

### 5. Test de l'Interface

1. **Ouvrir le navigateur** : http://localhost:3000
2. **Vérifier la Palette** : Les actions VisionOnly doivent apparaître
3. **Tester le Drag & Drop** : Glisser une action sur le canvas
4. **Configurer les Paramètres** : Utiliser le Properties Panel
5. **Test de Capture** : Tester la sélection visuelle

## Actions VisionOnly Disponibles

### Vision UI
- **Click Anchor** : Clic sur un élément visuel
- **Type Text** : Saisie de texte dans un champ
- **Wait for Anchor** : Attendre qu'un élément apparaisse

### Fonctionnalités Testables

1. **Palette Étendue**
   - Catégories VisionOnly visibles
   - Recherche d'actions fonctionnelle
   - Drag & drop vers le canvas

2. **Properties Panel Adapté**
   - Configuration des paramètres VWB
   - Éditeurs spécialisés pour VisualAnchor
   - Validation en temps réel

3. **Capture d'Écran**
   - Sélection visuelle d'éléments
   - Génération d'ancres visuelles
   - Intégration avec les actions

## Résolution de Problèmes

### Backend ne démarre pas
```bash
# Vérifier les dépendances
pip install -r requirements.txt

# Vérifier les ports
netstat -an | grep 5004
```

### Frontend ne compile pas
```bash
# Nettoyer et réinstaller
cd visual_workflow_builder/frontend
rm -rf node_modules package-lock.json
npm install
```

### Erreurs TypeScript
```bash
# Vérifier la compilation
cd visual_workflow_builder/frontend
npx tsc --noEmit --skipLibCheck
```

## Tests Automatisés

### Test de Conformité Complète
```bash
python tests/integration/test_conformite_finale_vwb_10jan2026.py
```

### Test des Corrections TypeScript
```bash
python tests/integration/test_correction_typescript_vwb_finale_10jan2026.py
```

## Fonctionnalités Validées

- ✅ Compilation TypeScript sans erreur
- ✅ Backend VWB avec catalogue d'actions
- ✅ Frontend avec palette étendue
- ✅ Properties Panel adapté pour VWB
- ✅ Intégration capture d'écran
- ✅ Types cohérents et sécurisés

## Prochaines Étapes

1. **Tests Utilisateur** : Tester les workflows complets
2. **Performance** : Optimiser les temps de réponse
3. **Documentation** : Compléter la documentation utilisateur
4. **Déploiement** : Préparer pour la production

## Support

En cas de problème :
1. Vérifier les logs du backend et frontend
2. Consulter la documentation technique
3. Exécuter les tests de diagnostic

---

**Note :** Ce guide est mis à jour régulièrement. Consultez la version la plus récente dans le dépôt.