rpa_vision_v3/tests/integration/test_frontend_backend_connection_09jan2026.py

#!/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)