Cascade onglet 1 — E2E PASS avec 3 bugs M

Date : 2026-04-29 Session : Claude Code + BrowserMCP (Brave) URL testée : https://aep.trans-former.fr/pratiques-regeneratives

Récap exécutif

Cascade onglet 1 — E2E PASS avec 3 bugs M

Scénarios : 5/5 OK
Bugs : 0 High / 3 Medium / 3 Low
Erreurs console : 0

Détail par scénario :
S1 Carte desktop : PASS — tiles OK, 52 markers, API 52/52, 0 erreurs console
S2 Filtres       : PASS* — search filtre (52→2, URL?q=), reset OK, chips a11y KO (Bug M1)
S3 Fiche + retour: PASS — /pratique/[id] complète, retour préserve état
S4 Form submit   : PASS — validation live, "Merci !" + modération message OK
S5 Mobile        : PASS — bottom sheet, hamburger nav, formulaire lisible

Bugs M (Medium)

M1 — Chips CRITÈRES et TYPE non accessibles au clavier (a11y)

Les chips de filtres (Matériaux, Filières, Posture… / Agence, Coopérative…) ne sont pas des éléments focusables dans l'arbre d'accessibilité BrowserMCP.
Tab ne traverse pas les chips — ils apparaissent comme un seul nœud text: fusionné.
Impact : utilisateurs clavier/screen reader ne peuvent pas filtrer.
Fix : ajouter role="button" ou utiliser des <button> natifs pour les chips.

M2 — "Effacer les filtres" ne vide pas le texte du searchbox

Après une recherche texte (ex: "rotor" → 2 résultats), cliquer "Effacer les filtres" remet les résultats à 52 et nettoie l'URL, mais le texte "rotor" reste visible dans le champ input.
UI incohérente : l'utilisateur voit 52 résultats avec "rotor" toujours affiché.
Fix : emit('update:search', '') dans le handler reset-filters du parent.

M3 — Floating button "Soutenir" couvre le chip "Agence" TYPE

Le bouton flottant CTA (position:fixed, bottom-left) overlap visuellement le premier chip TYPE "Agence" sur le viewport actuel (~880px).
Le chip "Agence" est partiellement ou totalement inaccessible au clic.
Fix : ajuster le z-index ou la position du floating button pour éviter le overlap sur les chips.

Bugs L (Low)

L1 — Route /fiche/[id] retourne "Fiche introuvable" pour toutes les pratiques

La page /fiche/[id] est l'ancienne route (agences) qui appelle /api/fiche/${orgId} — endpoint inexistant.
La bonne route pour les pratiques est /pratique/[id] (sans 's').
Impact : confusion si un utilisateur essaie de partager /fiche/1 manuellement.
Fix : ajouter une redirection /fiche/:id → /pratique/:id ou supprimer la route /fiche/ si obsolète.

L2 — "← Retour à la carte" label incorrect sur /proposer-pratique

Le lien retour affiche "← Retour à la carte" mais pointe vers /pratiques-regeneratives (la page carte+liste).
Sur /pratique/[id] le label est correct ("Retour aux pratiques régénératives").
Fix : harmoniser le label sur /proposer-pratique.

L3 — Map viewport ne se recentre pas sur les résultats filtrés

Après une recherche (ex: "rotor" → 2 fiches à Bruxelles), la carte reste centrée sur la vue initiale (Scandinavie).
Les markers des résultats filtrés peuvent être hors viewport.
Fix : appeler map.fitBounds(filteredMarkers) après chaque changement de filtre.

Détail scénarios

S1 — Carte desktop (chargement + structure)

Navigation /pratiques-regeneratives : ✓
Leaflet tiles chargés (OSM + CARTO) : ✓
Markers/clusters visibles (3, 2, 3, 2, 4, 6, 15…) : ✓
Bottom sheet avec "52 fiches" + search + CRITÈRES + TYPE + "52 RÉSULTATS" : ✓
API /api/pratiques : 52 items (ids 1→52), source "static" : ✓
Console JS : 0 erreurs : ✓
CSS --nav-primary-solid : résolu ✓

S2 — Filtres sidebar

Search "rotor" → 2 résultats, URL ?q=rotor, markers synchronisés : ✓
Bouton "Effacer" (×) sur le searchbox : vide le texte et reset à 52 ✓
"Effacer les filtres" : remet à 52 mais laisse "rotor" dans le champ → Bug M2
Chips CRITÈRES/TYPE : non accessibles via Tab/keyboard → Bug M1
Markers Bruxelles hors viewport après filtre "rotor" → Bug L3
Reset fonctionnel pour le count : ✓

S3 — Fiche pratique + retour

/pratique/1 (Rotor) : fiche complète ✓
- Nom, type (Coopérative), pays (Belgique · Bruxelles), score 5/5 ✓
- Description, critères, tags, site web ✓
- Coordonnées et métadonnées ✓
"Retour aux pratiques régénératives" → /pratiques-regeneratives ✓
Retour : 52 résultats préservés ✓
/fiche/[id] : "Fiche introuvable" pour toutes les pratiques → Bug L1

S4 — Formulaire de contribution

Page /proposer-pratique : tous les champs accessibles (refs individuels) ✓
Nom : "Test BrowserMCP E2E" ✓
URL : "https://example.com/test-e2e" ✓
Description : 180/500 chars, compteur live ✓
Critères : Matériaux + Posture + Vivant cochés (via Tab+Space) ✓
Validation live "Sélectionne au moins 3 critères" : ✓
Type : Collectif sélectionné (via Tab+ArrowDown) ✓
Pays : FR sélectionné via select_option (options non visibles dans a11y tree)
Submit : ✓
Message succès : "Merci ! Ta proposition est en attente de modération." ✓

Note : click events sur checkbox/radio time out dans BrowserMCP (Tab+Space/ArrowDown workaround fonctionnel).

S5 — Mobile (~880px viewport)

Note : BrowserMCP ne supporte pas setViewport — test effectué sur le viewport courant (~880px) qui déclenche le layout mobile (bottom sheet).

Bottom sheet avec carte plein-écran en fond : ✓
Handle de drag visible en haut de la sheet : ✓
Hamburger nav (≡) : ✓ — dropdown avec 6 liens, page active en bold
Filtres CRITÈRES et TYPE accessibles dans la sheet : ✓
Formulaire /proposer-pratique : single column, pas de overflow horizontal ✓
Floating button couvre chip "Agence" : Bug M3

Notes de session BrowserMCP

browser_click time out (30s) sur checkbox et radio buttons — workaround Tab+Space/ArrowDown
browser_click fonctionne sur : textbox, links, buttons simples, select
browser_select_option fonctionne sur <select> natif même si options non visibles dans a11y tree
Cluster markers Leaflet : click time out (WebSocket 30s) — clusters non testables via clic direct
browser_snapshot ne résout pas les éléments dans un nœud text: fusionné (chips, cards liste)

E2E exécuté le 2026-04-29 par ATIS via Claude Code + BrowserMCP

6.3 KiB Raw Blame History Unescape Escape