nav-carte/aep-communaute-build/PROMPT-BROWSERMCP-E2E.md

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).