rpa_vision_v3/docs/GUIDE_TEST_PROPRIETES_ETAPES_VWB_10JAN2026.md

Guide de Test des Propriétés d'Étapes VWB

Auteur : Dom, Alice, Kiro - 10 janvier 2026
Statut : ✅ IMPLÉMENTATION COMPLÈTE
Objectif : Valider l'affichage des propriétés d'étapes VWB dans le Properties Panel

Vue d'Ensemble

Ce guide détaille comment tester et valider l'affichage des propriétés des étapes VWB (Visual Workflow Builder) dans l'interface utilisateur. Les propriétés des étapes VWB permettent de configurer les actions du catalogue VisionOnly avec des paramètres spécialisés comme les ancres visuelles.

Prérequis

1. Backend Catalogue Disponible

# Vérifier que le backend est démarré
curl http://localhost:5004/health

# Si non disponible, démarrer le backend
cd visual_workflow_builder
source ../venv_v3/bin/activate
python -m backend.app_catalogue_simple

2. Frontend VWB Disponible

# Démarrer le frontend
cd visual_workflow_builder/frontend
npm start

3. Actions du Catalogue Chargées

Le backend doit avoir au moins 9 actions VisionOnly disponibles :

• click_anchor - Clic sur Ancre Visuelle
• type_text - Saisie de Texte Visuelle
• wait_for_anchor - Attente d'Ancre Visuelle
• scroll_to_anchor - Défilement vers Ancre
• extract_text_from_anchor - Extraction de Texte
• validate_anchor_presence - Validation de Présence
• focus_anchor - Donner le Focus
• type_secret - Saisie de Secret
• hotkey - Raccourci Clavier

Méthodes de Test

Méthode 1 : Test Automatisé Intégré

1. Ouvrir l'interface VWB

   http://localhost:3000
   

2. Accéder au test VWB

   • Cliquer sur l'onglet "Test VWB" dans la barre supérieure
   • Le panneau de test s'ouvre sur la droite

3. Exécuter les tests

   • Cliquer sur "Exécuter les Tests"
   • Vérifier que tous les tests sont verts ✅
   • Observer l'aperçu du Properties Panel

4. Valider l'affichage

   • Les propriétés de l'étape VWB doivent s'afficher
   • Les paramètres requis et optionnels doivent être listés
   • Les ancres visuelles doivent avoir des éditeurs spécialisés

Méthode 2 : Test Manuel dans l'Interface

1. Créer une étape VWB par drag-and-drop

   • Ouvrir l'interface VWB : http://localhost:3000
   • Dans la palette de gauche, chercher les actions "Vision"
   • Glisser une action VWB (ex: "Clic sur Ancre Visuelle") vers le canvas
   • Une étape avec badge "VWB" doit apparaître

2. Sélectionner l'étape VWB

   • Cliquer sur l'étape créée
   • Elle doit se mettre en surbrillance bleue
   • Le Properties Panel de droite doit se mettre à jour

3. Vérifier l'affichage des propriétés

   • En-tête : Nom de l'action et badge de catégorie
   • Paramètres requis : Section rouge avec paramètres obligatoires
   • Paramètres optionnels : Section bleue avec paramètres facultatifs
   • Ancres visuelles : Éditeur spécialisé avec bouton "Sélectionner un élément"
   • Validation : Alertes de validation en temps réel

4. Tester l'interaction

   • Modifier les paramètres texte et nombre
   • Cliquer sur "Sélectionner un élément" pour les ancres visuelles
   • Observer la validation en temps réel

Méthode 3 : Test par Script Automatisé

# Exécuter le script de test complet
./scripts/test_proprietes_vwb_complet.sh

# Ou exécuter les tests Python
python scripts/test_proprietes_etapes_vwb_10jan2026.py
python scripts/test_creation_etape_vwb_10jan2026.py

Validation des Résultats

✅ Critères de Succès

1. Détection d'Étapes VWB

   • Les étapes créées depuis le catalogue ont isVWBCatalogAction: true
   • Le hook useIsVWBStep retourne true
   • Le hook useVWBActionId retourne l'ID correct de l'action

2. Affichage du Properties Panel

   • Le composant VWBActionProperties s'affiche pour les étapes VWB
   • Les paramètres sont organisés en sections (requis/optionnels)
   • Les ancres visuelles ont des éditeurs spécialisés

3. Fonctionnalités Spécialisées

   • Éditeur d'ancres visuelles : Bouton de sélection, aperçu d'image, configuration de seuil
   • Validation en temps réel : Alertes d'erreur et d'avertissement
   • Exemples d'utilisation : Section accordéon avec exemples
   • Tooltips informatifs : Aide contextuelle sur les paramètres

4. Intégration Complète

   • Les étapes VWB apparaissent avec badge "VWB" sur le canvas
   • La sélection d'étapes VWB déclenche l'affichage spécialisé
   • Les modifications de paramètres sont sauvegardées

❌ Problèmes Possibles

1. Backend Non Disponible

   Symptôme : Aucune action dans la palette "Vision"
   Solution : Démarrer le backend catalogue
   

2. Étapes Non Détectées comme VWB

   Symptôme : Properties Panel standard au lieu de VWB
   Solution : Vérifier les marqueurs isVWBCatalogAction et vwbActionId
   

3. Composant VWBActionProperties Non Affiché

   Symptôme : Propriétés génériques au lieu de spécialisées
   Solution : Vérifier l'intégration dans PropertiesPanel/index.tsx
   

4. Erreurs TypeScript

   Symptôme : Console avec erreurs de types
   Solution : Vérifier les types dans catalog.ts
   

Débogage

Console du Navigateur

Ouvrir les outils de développement (F12) et vérifier :

1. Onglet Console

   // Messages attendus
   "Actions du catalogue chargées: 9"
   "Étape VWB créée: vwb_step_..."
   "Hook useIsVWBStep fonctionne"
   

2. Onglet Network

   GET /api/vwb/catalog/actions → 200 OK
   GET /api/vwb/catalog/actions/click_anchor → 200 OK
   POST /api/vwb/catalog/validate → 200 OK
   

3. Onglet React DevTools

   Composants à vérifier :
   - PropertiesPanel (props: selectedStep avec isVWBCatalogAction)
   - VWBActionProperties (props: action, parameters)
   - VisualAnchorEditor (pour les paramètres d'ancres)
   

Tests de Validation

# Test de l'API catalogue
curl http://localhost:5004/api/vwb/catalog/actions | jq '.actions | length'
# Doit retourner : 9

# Test de détails d'action
curl http://localhost:5004/api/vwb/catalog/actions/click_anchor | jq '.action.name'
# Doit retourner : "Clic sur Ancre Visuelle"

# Test de validation
curl -X POST http://localhost:5004/api/vwb/catalog/validate \
  -H "Content-Type: application/json" \
  -d '{"type":"click_anchor","parameters":{}}'
# Doit retourner : {"validation":{"is_valid":false,...}}

Architecture Technique

Flux de Données

1. Création d'Étape VWB

   Palette → Drag → Canvas → useVWBStepIntegration.createVWBStep()
   → Step avec isVWBCatalogAction: true
   

2. Sélection d'Étape

   Canvas → handleStepSelect → selectedStep
   → PropertiesPanel → useIsVWBStep(selectedStep)
   

3. Affichage des Propriétés

   PropertiesPanel → isVWBCatalogAction ? VWBActionProperties : StandardProperties
   → catalogService.getActionDetails(vwbActionId)
   → Rendu spécialisé avec paramètres VWB
   

Composants Clés

• useVWBStepIntegration : Hook principal pour la gestion des étapes VWB
• VWBActionProperties : Composant spécialisé pour les propriétés VWB
• VisualAnchorEditor : Éditeur pour les ancres visuelles
• catalogService : Service de communication avec l'API catalogue

Résolution de Problèmes

Problème : Propriétés VWB Non Affichées

1. Vérifier la détection d'étape VWB

   // Dans la console du navigateur
   console.log(selectedStep?.data?.isVWBCatalogAction); // doit être true
   console.log(selectedStep?.data?.vwbActionId); // doit être l'ID de l'action
   

2. Vérifier le hook d'intégration

   // Tester le hook manuellement
   const isVWB = useIsVWBStep(selectedStep);
   console.log('Is VWB Step:', isVWB); // doit être true
   

3. Vérifier le chargement de l'action

   // Tester le service catalogue
   catalogService.getActionDetails('click_anchor').then(console.log);
   // Doit retourner les détails de l'action
   

Problème : Erreurs de Validation

1. Vérifier l'API de validation

   curl -X POST http://localhost:5004/api/vwb/catalog/validate \
     -H "Content-Type: application/json" \
     -d '{"type":"click_anchor","parameters":{"visual_anchor":null}}'
   

2. Vérifier les types TypeScript

   • S'assurer que VWBActionValidationResult est défini
   • Vérifier la compatibilité des interfaces

Conclusion

Ce guide fournit une méthode complète pour tester et valider l'affichage des propriétés d'étapes VWB. L'implémentation est maintenant complète et fonctionnelle, permettant aux utilisateurs de configurer facilement les actions VisionOnly avec des interfaces spécialisées.

Pour toute question ou problème, consulter les logs de la console du navigateur et les réponses de l'API catalogue pour identifier la source du problème.