# PROMPT BrowserMCP — E2E Onglet Pratiques régénératives > Cascade onglet 1 — à coller dans une session Claude Code avec BrowserMCP attaché à Brave. > Date de création : 2026-04-29 --- ## Mission Tester en E2E les deux nouvelles pages de `aep.trans-former.fr` liées à l'onglet "Pratiques régénératives" : la carte principale `/pratiques-regeneratives` et le formulaire de contribution `/proposer-pratique`. Couvrir desktop ET mobile. Reporter tous les bugs trouvés (console JS, visuels, fonctionnels). **URL de base :** `https://aep.trans-former.fr` **Navigateur :** Brave avec extension BrowserMCP **Mode :** Full auto, rapport final structuré --- ## Setup initial 1. Ouvre BrowserMCP et navigue vers `https://aep.trans-former.fr/pratiques-regeneratives` 2. Attends que la page soit fully loaded (pas de spinner Leaflet) 3. Prends un screenshot de référence `desktop-initial.png` --- ## Scenario 1 — Carte desktop (chargement + structure) **Objectif :** vérifier que la carte s'affiche correctement avec markers et sidebar. Étapes : 1. `navigate` vers `https://aep.trans-former.fr/pratiques-regeneratives` 2. Attendre 3s (Leaflet init) 3. `snapshot` — décrire ce qui est visible : carte Europe, sidebar gauche, onglet header actif 4. Vérifier dans le DOM : - Présence d'au moins 1 marker Leaflet (chercher `.leaflet-marker-icon` ou `.leaflet-pane`) - Sidebar visible avec des cartes de pratiques (chercher titres/noms) - Bandeau DOM-TOM présent en bas (textes Guadeloupe/Martinique/Réunion...) 5. Ouvrir la console (`evaluate` `window.__AEP_DEBUG__ || 'no debug'`) — noter les erreurs JS si présentes 6. `evaluate` `fetch('/api/pratiques').then(r=>r.json()).then(d=>d.list.length)` — doit retourner 52 Bugs à surveiller : - Carte blanche (Leaflet tiles non chargés) - Markers manquants ou hors viewport - CSS `--nav-primary-solid` non résolu (barre nav sans couleur) - Erreurs console "leaflet", "vue warn", "hydration mismatch" --- ## Scenario 2 — Filtres sidebar (criteres + pays + type) **Objectif :** vérifier que les filtres réduisent bien les résultats. Étapes : 1. Depuis `/pratiques-regeneratives` desktop, noter le nombre de fiches dans la sidebar (label "X résultats" ou count visible) 2. Cliquer sur le chip "Matériaux" dans les filtres critères 3. Attendre 500ms — `snapshot` — noter le nouveau count 4. Cliquer sur le chip "Pays" (ou sélectionner France dans le filtre pays si c'est un select) 5. `snapshot` — noter le count (doit être inférieur ou égal à l'étape 3) 6. Cliquer sur le type "Coopérative" si accessible 7. `snapshot` — noter le count 8. Cliquer "Réinitialiser" ou le bouton reset — vérifier que le count revient au total (52) Bugs à surveiller : - Filtre appliqué mais count ne change pas - Markers sur la carte non synchronisés avec la sidebar - Reset qui ne fonctionne pas - Chip actif sans indicateur visuel --- ## Scenario 3 — Fiche pratique (clic marker ou card + retour) **Objectif :** vérifier que l'ouverture d'une fiche fonctionne et que le retour préserve les filtres. Étapes : 1. Appliquer un filtre (ex: "Matériaux") pour avoir < 52 résultats 2. Cliquer sur une card dans la sidebar OU un marker sur la carte 3. `snapshot` — décrire ce qui est affiché : modal ? Page fiche ? URL change ? 4. Vérifier que la fiche contient : nom, description, critères, type, pays, URL (si disponible) 5. Cliquer le bouton "Retour" ou `navigateBack` 6. `snapshot` — vérifier que le filtre "Matériaux" est toujours actif et le count identique à avant Bugs à surveiller : - Clic sur card ne navigue pas - Page fiche vide ou 404 - Bouton retour recharge sans filtres - Scroll position perdu --- ## Scenario 4 — Formulaire de contribution **Objectif :** soumettre une proposition valide et vérifier le message de succès. Étapes : 1. `navigate` vers `https://aep.trans-former.fr/proposer-pratique` 2. `snapshot` — décrire le formulaire visible 3. Remplir les champs suivants : - `#nom` : "Test BrowserMCP E2E" - `#url` : "https://example.com/test-e2e" - `#description_user` : "Pratique de test soumise automatiquement par BrowserMCP pour valider le pipeline de contribution de l'onglet Pratiques régénératives. Cette description fait plus de 100 caractères." - Critères : cocher au moins 3 checkboxes (ex: "Matériaux", "Posture", "Vivant") - Type d'entité : sélectionner "Collectif" - Pays : sélectionner "France" dans le select 4. `snapshot` avant envoi — vérifier que les champs sont remplis 5. Cliquer le bouton `submit` du formulaire 6. Attendre 3s 7. `snapshot` — chercher le message de succès "Merci !" + "Ta proposition est en attente de modération." Bugs à surveiller : - Validation côté client ne se déclenche pas - Submit retourne une erreur réseau (verifier dans console : `fetch POST /api/submit-pratique`) - Message succès ne s'affiche pas - Rate limit 429 (normal si on a soumis plusieurs fois — attendre 1h ou ignorer si premier test) Note : si rate limit 429, c'est le comportement attendu. Réessayer en changeant légèrement le nom. --- ## Scenario 5 — Mobile (viewport 375x667) **Objectif :** valider l'expérience mobile de base. Étapes : 1. Changer le viewport à 375x667 (iPhone SE) via `setViewport` ou équivalent BrowserMCP 2. `navigate` vers `https://aep.trans-former.fr/pratiques-regeneratives` 3. Attendre 3s 4. `snapshot` — décrire : sheet en bas ? Carte en fond plein écran ? Header avec hamburger ? 5. Tenter d'interagir avec la sheet du bas (si elle existe) : tapper sur le header de la sheet pour l'agrandir 6. `snapshot` — sheet en mode "half" ou "full" ? 7. Vérifier que les filtres sont accessibles (dans la sheet ou dans un drawer) 8. Cliquer une card si visible 9. `snapshot` — fiche pleine page ou modal plein écran ? 10. `navigate` vers `https://aep.trans-former.fr/proposer-pratique` 11. `snapshot` — formulaire lisible et accessible sur mobile ? Bugs à surveiller : - Sheet absente ou non draggable - Carte non visible derrière la sheet - Hamburger nav manquant - Formulaire /proposer-pratique avec overflow horizontal --- ## Format de récap final attendu ``` Cascade onglet 1 — E2E [PASS / FAIL avec [N] bugs H] Scénarios : [N]/5 OK Bugs : [N] High / [N] Medium / [N] Low Erreurs console : [N] (liste si > 0) Détail par scénario : S1 Carte desktop : [PASS/FAIL] — [note courte] S2 Filtres : [PASS/FAIL] — [note courte] S3 Fiche + retour: [PASS/FAIL] — [note courte] S4 Form submit : [PASS/FAIL] — [note courte] S5 Mobile : [PASS/FAIL] — [note courte] Bugs H : - [description + étape] Bugs M : - [description + étape] Bugs L : - [description + étape] Screenshots : [N] pris ``` Envoyer ce récap à Jules (copier dans la session pilote ou dans `aep-communaute-build/E2E-RESULTS.md`).