#!/usr/bin/env python3 """ Test de Connexion Frontend ↔ Backend VWB - Validation Finale Auteur : Dom, Alice, Kiro - 09 janvier 2026 Ce test valide que la connexion entre le frontend React et le backend Flask fonctionne correctement pour la capture d'écran et les embeddings visuels. OBJECTIF: Résoudre définitivement le problème "Failed to fetch" MÉTHODE: Test de bout en bout avec validation des APIs """ import sys import os import time import requests import json from pathlib import Path # Ajouter le répertoire racine au path ROOT_DIR = Path(__file__).parent.parent.parent sys.path.insert(0, str(ROOT_DIR)) def test_backend_health(): """Teste la santé du backend Flask.""" print("❤️ Test santé backend...") try: response = requests.get("http://localhost:5003/health", timeout=5) if response.status_code == 200: data = response.json() print(f"✅ Backend en ligne - Version: {data.get('version')}") print(f"✅ Mode: {data.get('mode')}") features = data.get('features', {}) screen_capture = features.get('screen_capture', False) visual_embedding = features.get('visual_embedding', False) print(f"✅ Capture d'écran: {screen_capture}") print(f"✅ Embedding visuel: {visual_embedding}") return screen_capture and visual_embedding else: print(f"❌ Backend erreur HTTP: {response.status_code}") return False except Exception as e: print(f"❌ Backend inaccessible: {e}") return False def test_screen_capture_api(): """Teste l'API de capture d'écran (Option A - ultra stable).""" print("\n📷 Test API capture d'écran...") try: response = requests.post( "http://localhost:5003/api/screen-capture", json={"format": "png", "quality": 90}, headers={"Content-Type": "application/json"}, timeout=15 ) if response.status_code == 200: data = response.json() if data.get('success'): print(f"✅ Capture réussie - {data['width']}x{data['height']}") print(f"✅ Méthode: {data.get('method', 'standard')}") print(f"✅ Timestamp: {data.get('timestamp', 'N/A')}") # Vérifier que l'image base64 est présente screenshot = data.get('screenshot') if screenshot and len(screenshot) > 1000: print(f"✅ Image base64 valide - {len(screenshot)} caractères") return screenshot else: print("❌ Image base64 manquante ou trop petite") return None else: print(f"❌ Capture échouée: {data.get('error')}") return None else: print(f"❌ API capture erreur HTTP: {response.status_code}") print(f"Réponse: {response.text[:200]}...") return None except Exception as e: print(f"❌ Erreur API capture: {e}") return None def test_visual_embedding_api(screenshot_base64): """Teste l'API de création d'embedding visuel.""" print("\n🎯 Test API embedding visuel...") if not screenshot_base64: print("❌ Pas de screenshot pour tester l'embedding") return False # Zone de test (centre de l'écran) bounding_box = { "x": 200, "y": 200, "width": 300, "height": 200 } try: response = requests.post( "http://localhost:5003/api/visual-embedding", json={ "screenshot": screenshot_base64, "boundingBox": bounding_box, "stepId": "test_frontend_connection" }, headers={"Content-Type": "application/json"}, timeout=20 ) if response.status_code == 200: data = response.json() if data.get('success'): print(f"✅ Embedding créé - ID: {data.get('embedding_id')}") print(f"✅ Dimension: {data.get('dimension')}") print(f"✅ Image référence: {data.get('reference_image')}") # Vérifier l'embedding embedding = data.get('embedding') if embedding and len(embedding) > 100: print(f"✅ Embedding valide - {len(embedding)} dimensions") return True else: print("❌ Embedding manquant ou invalide") return False else: print(f"❌ Embedding échoué: {data.get('error')}") return False else: print(f"❌ API embedding erreur HTTP: {response.status_code}") print(f"Réponse: {response.text[:200]}...") return False except Exception as e: print(f"❌ Erreur API embedding: {e}") return False def test_cors_headers(): """Teste les headers CORS pour l'intégration frontend.""" print("\n🌐 Test headers CORS...") try: # Test OPTIONS request (preflight CORS) response = requests.options( "http://localhost:5003/api/screen-capture", headers={ 'Origin': 'http://localhost:3000', 'Access-Control-Request-Method': 'POST', 'Access-Control-Request-Headers': 'Content-Type' }, timeout=5 ) if response.status_code == 200: cors_origin = response.headers.get('Access-Control-Allow-Origin') cors_methods = response.headers.get('Access-Control-Allow-Methods') cors_headers = response.headers.get('Access-Control-Allow-Headers') print(f"✅ CORS Origin: {cors_origin}") print(f"✅ CORS Methods: {cors_methods}") print(f"✅ CORS Headers: {cors_headers}") # Vérifier que CORS permet les requêtes du frontend cors_ok = ( cors_origin and ('*' in cors_origin or 'localhost:3000' in cors_origin) and cors_methods and 'POST' in cors_methods and cors_headers and 'Content-Type' in cors_headers ) if cors_ok: print("✅ CORS configuré correctement pour le frontend") return True else: print("⚠️ CORS pourrait poser des problèmes") return False else: print(f"❌ CORS preflight erreur HTTP: {response.status_code}") return False except Exception as e: print(f"❌ Erreur test CORS: {e}") return False def test_frontend_service_config(): """Vérifie la configuration du service frontend.""" print("\n🔧 Test configuration service frontend...") service_file = ROOT_DIR / "visual_workflow_builder" / "frontend" / "src" / "services" / "screenCaptureService.ts" if not service_file.exists(): print("❌ Fichier service non trouvé") return False try: content = service_file.read_text() # Vérifier l'URL du backend if "http://localhost:5003/api" in content: print("✅ URL backend correcte dans le service") else: print("❌ URL backend incorrecte dans le service") return False # Vérifier les endpoints if "/screen-capture" in content and "/visual-embedding" in content: print("✅ Endpoints API présents dans le service") else: print("❌ Endpoints API manquants dans le service") return False # Vérifier la gestion d'erreurs if "Failed to fetch" in content or "fetch" in content: print("✅ Gestion d'erreurs présente dans le service") else: print("⚠️ Gestion d'erreurs basique dans le service") return True except Exception as e: print(f"❌ Erreur lecture service: {e}") return False def main(): """Fonction principale de test.""" print("=" * 70) print(" TEST CONNEXION FRONTEND ↔ BACKEND VWB") print("=" * 70) print("Auteur : Dom, Alice, Kiro - 09 janvier 2026") print("") print("🎯 OBJECTIF: Résoudre le problème 'Failed to fetch'") print("🔧 MÉTHODE: Validation complète des APIs et de la connectivité") print("🌐 ARCHITECTURE: React (port 3000) ↔ Flask (port 5003)") print("") success_count = 0 total_tests = 5 # Test 1: Santé du backend print("=" * 50) if test_backend_health(): success_count += 1 # Test 2: Configuration du service frontend print("=" * 50) if test_frontend_service_config(): success_count += 1 # Test 3: Headers CORS print("=" * 50) if test_cors_headers(): success_count += 1 # Test 4: API capture d'écran print("=" * 50) screenshot = test_screen_capture_api() if screenshot: success_count += 1 # Test 5: API embedding visuel print("=" * 50) if test_visual_embedding_api(screenshot): success_count += 1 # Résultats finaux print("\n" + "=" * 70) if success_count == total_tests: print("🎉 PROBLÈME 'FAILED TO FETCH' RÉSOLU !") print("✅ Backend Flask opérationnel sur le port 5003") print("✅ APIs de capture et d'embedding fonctionnelles") print("✅ CORS configuré correctement") print("✅ Service frontend configuré correctement") print("✅ Option A (ultra stable) validée") print("") print("🚀 INSTRUCTIONS POUR L'UTILISATEUR:") print(" 1. Le backend est maintenant démarré sur le port 5003") print(" 2. Rafraîchir la page du frontend (F5)") print(" 3. Cliquer sur 'Capturer l'écran' devrait maintenant fonctionner") print(" 4. Le message 'Failed to fetch' ne devrait plus apparaître") print("") print("💡 CAUSE DU PROBLÈME: Le backend n'était pas démarré") print("💡 SOLUTION: Backend Flask démarré avec Option A ultra stable") else: print(f"⚠️ {success_count}/{total_tests} tests réussis") print("❌ Des corrections supplémentaires sont nécessaires") if success_count >= 3: print("💡 La plupart des fonctionnalités marchent - problèmes mineurs") elif success_count >= 1: print("💡 Backend OK mais problèmes de connectivité") else: print("💡 Problèmes majeurs - vérifier la configuration") print("=" * 70) return success_count == total_tests if __name__ == '__main__': success = main() sys.exit(0 if success else 1)