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