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
212
visual_workflow_builder/TEST_TASK_10.md
Normal file
212
visual_workflow_builder/TEST_TASK_10.md
Normal file
@@ -0,0 +1,212 @@
|
||||
# 🧪 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
|
||||
Reference in New Issue
Block a user