v1.0 - Version stable: multi-PC, détection UI-DETR-1, 3 modes exécution
- Frontend v4 accessible sur réseau local (192.168.1.40) - Ports ouverts: 3002 (frontend), 5001 (backend), 5004 (dashboard) - Ollama GPU fonctionnel - Self-healing interactif - Dashboard confiance Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Dom
374
visual_workflow_builder/GUIDE_TEST_COMPLET.md
Normal file
374
visual_workflow_builder/GUIDE_TEST_COMPLET.md
Normal file
@@ -0,0 +1,374 @@
|
||||
# 🧪 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`
|
||||
Reference in New Issue
Block a user