138 lines
6.3 KiB
Markdown
138 lines
6.3 KiB
Markdown
# 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*
|