======================================
🎥 Vidéos Tests E2E (Documentation Vivante)
======================================

.. raw:: html

   <style>
   .video-card {
       background: #ffffff;
       border-radius: 8px;
       overflow: hidden;
       box-shadow: 0 2px 8px rgba(0,0,0,0.1);
       margin-bottom: 2rem;
       border: 1px solid #e2e8f0;
   }
   .video-card video {
       width: 100%;
       height: auto;
       display: block;
       background: #000;
   }
   .video-info {
       padding: 1rem;
       background: #f8f9fa;
   }
   .video-title {
       font-weight: 600;
       color: #2d3748;
       font-size: 1.1rem;
   }
   </style>

Introduction
============

Cette page présente les **vidéos des tests E2E** enregistrées manuellement.

📊 Statistiques
---------------

- **Nombre de vidéos** : 8
- **Format** : WebM 1280x720
- **Emplacement** : ``docs/_static/videos/``

Vidéos disponibles
==================


Admindashboard.crud Organisation With Search
--------------------------------------------

.. raw:: html

   <div class="video-card">
       <video controls preload="metadata" style="width:100%">
           <source src="_static/videos/AdminDashBoard.CRUD organisation with search.webm" type="video/webm">
           Votre navigateur ne supporte pas la balise vidéo.
       </video>
       <div class="video-info">
           <div class="video-title">Admindashboard.crud Organisation With Search</div>
           <small style="color: #666;">Fichier: AdminDashBoard.CRUD organisation with search.webm</small>
       </div>
   </div>


Admindashboard.crud Building
----------------------------

.. raw:: html

   <div class="video-card">
       <video controls preload="metadata" style="width:100%">
           <source src="_static/videos/AdminDashBoard.CRUD-building.webm" type="video/webm">
           Votre navigateur ne supporte pas la balise vidéo.
       </video>
       <div class="video-info">
           <div class="video-title">Admindashboard.crud Building</div>
           <small style="color: #666;">Fichier: AdminDashBoard.CRUD-building.webm</small>
       </div>
   </div>


Admindashboard.crud Organisation User
-------------------------------------

.. raw:: html

   <div class="video-card">
       <video controls preload="metadata" style="width:100%">
           <source src="_static/videos/AdminDashBoard.CRUD-organisation-user.webm" type="video/webm">
           Votre navigateur ne supporte pas la balise vidéo.
       </video>
       <div class="video-info">
           <div class="video-title">Admindashboard.crud Organisation User</div>
           <small style="color: #666;">Fichier: AdminDashBoard.CRUD-organisation-user.webm</small>
       </div>
   </div>


Admindashboard.crud Organisation
--------------------------------

.. raw:: html

   <div class="video-card">
       <video controls preload="metadata" style="width:100%">
           <source src="_static/videos/AdminDashBoard.CRUD-organisation.webm" type="video/webm">
           Votre navigateur ne supporte pas la balise vidéo.
       </video>
       <div class="video-info">
           <div class="video-title">Admindashboard.crud Organisation</div>
           <small style="color: #666;">Fichier: AdminDashBoard.CRUD-organisation.webm</small>
       </div>
   </div>


Admindashboard.journey
----------------------

.. raw:: html

   <div class="video-card">
       <video controls preload="metadata" style="width:100%">
           <source src="_static/videos/AdminDashBoard.Journey.webm" type="video/webm">
           Votre navigateur ne supporte pas la balise vidéo.
       </video>
       <div class="video-info">
           <div class="video-title">Admindashboard.journey</div>
           <small style="color: #666;">Fichier: AdminDashBoard.Journey.webm</small>
       </div>
   </div>


Admindashboard.should Search Organizations
------------------------------------------

.. raw:: html

   <div class="video-card">
       <video controls preload="metadata" style="width:100%">
           <source src="_static/videos/AdminDashBoard.should-search-organizations.webm" type="video/webm">
           Votre navigateur ne supporte pas la balise vidéo.
       </video>
       <div class="video-info">
           <div class="video-title">Admindashboard.should Search Organizations</div>
           <small style="color: #666;">Fichier: AdminDashBoard.should-search-organizations.webm</small>
       </div>
   </div>


Admindashboard.toggle Organization Status
-----------------------------------------

.. raw:: html

   <div class="video-card">
       <video controls preload="metadata" style="width:100%">
           <source src="_static/videos/AdminDashBoard.toggle-organization-status.webm" type="video/webm">
           Votre navigateur ne supporte pas la balise vidéo.
       </video>
       <div class="video-info">
           <div class="video-title">Admindashboard.toggle Organization Status</div>
           <small style="color: #666;">Fichier: AdminDashBoard.toggle-organization-status.webm</small>
       </div>
   </div>


Gdpr Complete User Export Data And Erase Account
------------------------------------------------

.. raw:: html

   <div class="video-card">
       <video controls preload="metadata" style="width:100%">
           <source src="_static/videos/Gdpr-Complete-User-export-data-and-erase-account.webm" type="video/webm">
           Votre navigateur ne supporte pas la balise vidéo.
       </video>
       <div class="video-info">
           <div class="video-title">Gdpr Complete User Export Data And Erase Account</div>
           <small style="color: #666;">Fichier: Gdpr-Complete-User-export-data-and-erase-account.webm</small>
       </div>
   </div>


Comment enregistrer une nouvelle vidéo ?
=========================================

Méthode 1 : Playwright Codegen (⭐ Recommandé)
----------------------------------------------

**Enregistrement interactif** - Playwright génère le code automatiquement !

.. code-block:: bash

   cd frontend

   # Lancer l'enregistrement interactif (avec Traefik)
   npm run codegen
   # OU: npx playwright codegen http://localhost

   # Playwright ouvre un navigateur et enregistre vos actions :
   # → Naviguez, cliquez, remplissez des formulaires
   # → Le code du test est généré en temps réel
   # → Copiez-le dans tests/e2e/mon-test.spec.ts

   # Lancez le test pour générer la vidéo
   npm run test:e2e -- mon-test.spec.ts

   # Synchroniser les vidéos dans la doc
   cd ..
   make docs-sync-videos
   make docs-sphinx

Méthode 2 : Écrire le test manuellement
----------------------------------------

Créez ``frontend/tests/e2e/mon-test.spec.ts`` :

.. code-block:: typescript

   import { test, expect } from "@playwright/test";

   test("Mon scénario de test", async ({ page }) => {
     await page.goto("/login");
     await page.fill('input[type="email"]', "test@test.com");
     await page.fill('input[type="password"]', "test123");
     await page.click('button[type="submit"]');
     await expect(page.locator("text=Dashboard")).toBeVisible();
   });

Puis :

.. code-block:: bash

   cd frontend && npm run test:e2e
   cd .. && make docs-sync-videos && make docs-sphinx

----

.. raw:: html

   <div style="text-align: center; margin: 2rem 0; color: #666; font-size: 0.9rem;">
       <p>🤖 Page générée automatiquement par <code>generate-video-rst.py</code></p>
       <p>KoproGo ASBL - Documentation vivante</p>
   </div>