Technique Docs

Appearance

Guide d'Exploration Automatisée (DevTools) ​

Ce document fournit les instructions nécessaires pour qu'un agent automatisé (IA) puisse explorer l'application TVCast de manière sûre, exhaustive et réaliste.

📺 Configuration de l'Environnement ​

Toute exploration doit simuler les conditions réelles d'un téléviseur haute définition.

  • Résolution : Fixer le viewport à 1920x1080px.
  • User Agent : (Optionnel) Simuler une Smart TV si nécessaire.
  • URL de base : http://localhost:5173/?skipwhoami=true&facilityId={id}

🧭 Méthodologie de Ciblage (Sécurité) ​

L'interface utilise des attributs sémantiques data-* pour catégoriser les actions. L'agent doit impérativement filtrer ses interactions selon ces critères pour éviter de rompre la session ou de quitter l'application.

1. ✅ Boutons autorisés (Exploration sûre) ​

Prioriser les éléments qui permettent de naviguer à l'intérieur de l'application SvelteKit sans effet de bord système.

  • Critère principal : [data-navigates="true"]
  • Actions recommandées :
    • data-action-type="image/video" : Ouverture de fiches contenus (Spa, Restauration).
    • data-action-type="meteo" : Ouverture du widget météo détaillé.
    • data-action-type="internal" : Navigation interne (ex: retour Home).
  • Sélecteur CSS suggéré :
    css
    [data-navigates="true"]:not([data-action-type="reload"])

⚠️ Boutons à éviter (Rupture de flux) ​

Ne pas cliquer sur ces éléments sauf mission spécifique, car ils réinitialisent l'état ou lancent des processus externes.

  • Sortie d'App : [data-action-type="app"] ou [data-action-type="deeplink"] (lance Netflix, YouTube, etc.).
  • Réinitialisation : [data-action-type="reload"] (recharge toute la page).
  • Changement Global : [data-action-type="locale-switch"] ou [data-action-type="accessibility-switch"].

🛠️ Logique d'Exploration (JS) ​

L'agent doit utiliser ce script pour identifier ses cibles :

javascript
// Trouver les cibles d'exploration sécurisées
const targets = Array.from(document.querySelectorAll('[data-action-type]'))
  .filter(btn => 
    btn.getAttribute('data-navigates') === 'true' && 
    btn.getAttribute('data-action-type') !== 'reload'
  );

// Extraire les informations pour l'agent
return targets.map(btn => ({
  text: btn.innerText.trim(),
  type: btn.getAttribute('data-action-type'),
  uid: btn.getAttribute('data-uid') // Si disponible via DevTools
}));

📸 Capture pour Documentation ​

Lors de l'exploration pour illustrer la documentation :

  1. Home : Capturer la vue initiale (_1_initial.png).
  2. Sidebar : Ouvrir le volet (clic gauche) et capturer (_2_sidebar.png).
  3. Contenu : Cliquer sur une fiche image/video et capturer le détail plein écran.
  4. Drawer : Faire défiler vers le bas (clic ou scroll) et capturer le catalogue (_3_drawer.png).