repro-admin

Par emdash-cms · emdash

Reproduire un bug de l'interface d'administration EmDash. Lance une démo avec bgproc, pilote l'administration avec agent-browser en utilisant la session dev-bypass, et capture la reproduction sous forme de captures d'écran et d'une transcription écrite.

npx skills add https://github.com/emdash-cms/emdash --skill repro-admin

Reproduire : Admin UI

Le problème se trouve dans l'interface React admin sous /_emdash/admin/*. Vous avez besoin d'une démo en cours d'exécution, d'une session authentifiée et d'un moyen de piloter l'interface à travers les étapes décrites par le rapporteur. Reproduisez et confirmez le bug entièrement via agent-browser : l'artefact durable est composé de vos captures d'écran plus une transcription précise et rejouable des étapes. N'écrivez pas de tests Playwright (ni d'aucun autre type) -- le bot ne peut pas les exécuter de manière fiable ici, donc un test non exécuté est une conjecture non vérifiée. Un test de régression appartient à celui qui appliquera la correction.

Interdictions absolues

  • Pas de git commit, pas de git push, pas de création de branche qui persiste après le workflow.
  • Pas d'écritures GitHub (gh issue comment, gh pr ..., gh issue edit). Lecture seule avec gh uniquement.
  • Pas de curl vers des hôtes externes arbitraires. localhost:4321 uniquement.
  • Ne touchez aucune issue autre que celle en cours d'investigation.
  • Ne modifiez pas les catalogues Lingui (packages/admin/src/locales/*/messages.po). Ils sont régénérés par un workflow lors de la fusion vers main ; les modifier depuis le bot crée du churn de fusion.

Procédure

  1. Relisez l'issue. Notez les étapes exactes décrites par le rapporteur, la page sur laquelle il était, le navigateur qu'il a utilisé, et les captures d'écran ou stack traces éventuelles. Si les étapes font référence à une collection ou un élément de contenu, décidez si la seed de démo par défaut la couvre ou si vous devez créer du contenu d'abord.
  2. Choisissez une démo. demos/simple est le point de départ par défaut et fonctionne pour la plupart des reproductions admin. Utilisez une démo plus spécifique uniquement si l'issue la mentionne explicitement.
  3. Démarrez la démo avec bgproc. Exécutez bgproc start -n demo -w -- pnpm --filter ./demos/simple dev. Le flag -w fait que bgproc attend que le serveur de dev ouvre un port avant de revenir -- Astro écoute sur localhost:4321 -- donc ne continuez pas tant qu'il ne l'a pas fait. Inspectez la progression avec bgproc status -n demo et bgproc logs -n demo. Si le serveur n'ouvre jamais de port, capturez bgproc logs -n demo et traitez-le comme un échec d'installation, pas une reproduction.
  4. Obtenir une session. Ouvrez agent-browser open "http://localhost:4321/_emdash/api/setup/dev-bypass?redirect=/_emdash/admin". Cela exécute les migrations, crée un utilisateur admin dev, définit un cookie de session, et vous amène sur l'accueil admin. L'endpoint est restreint à import.meta.env.DEV donc n'existe que localement -- n'essayez pas de l'utiliser contre un environnement déployé.
  5. Pilotez l'interface. Utilisez agent-browser snapshot -i -c pour obtenir un arbre d'accessibilité avec des références @e<n>. Interagissez avec click @e<n>, fill @e<n> "text", select @e<n> "option". Les références sont stables uniquement au sein d'une snapshot -- refaites une snapshot après chaque navigation ou changement du DOM.
  6. Capture à des étapes significatives. Sauvegardez dans .bot-artifacts/step-<n>.png. Prenez une au moment où vous arrivez sur la page, une au point où le rapporteur dit que le bug apparaît, et une de l'état cassé. Utilisez --full uniquement quand le bug est sous la ligne de flottaison. Gardez les tailles de fichiers raisonnables.
  7. Guettez les erreurs JS. Après chaque interaction, exécutez agent-browser console et agent-browser errors. Capturez tout ce qui semble lié au symptôme. Les avertissements console concernant les clés React ou les setState non montés ne sont presque jamais le bug ; les exceptions runtime en général le sont.
  8. Confirmez que le mode d'échec correspond. Une snapshot montrant un état cassé différent n'est pas une reproduction. Si vous ne pouvez obtenir la page que dans un état cassé adjacent, dites-le dans les notes. Écrivez la séquence d'étapes exacte rejouable (URL, références/sélecteurs, entrées, l'état cassé observé) pour qu'un responsable puisse la suivre sans vous.

Quand ignorer

Marquez skipped: true et expliquez dans les notes quand :

  • Le bug nécessite un moteur de navigateur spécifique que le Chromium headless d'agent-browser ne peut pas piloter fidèlement (rare ; généralement un quirk de layout Safari).
  • Le bug nécessite une interaction au niveau du système d'exploitation au-delà de ce qu'un navigateur headless supporte -- sélecteurs de fichiers natifs dans du drag-drop non trivial, détails de presse-papiers du système d'exploitation, flux IME, combinaisons de touches matérielles.
  • Le bug se reproduit uniquement avec les extensions ou profil du navigateur d'un vrai utilisateur (p. ex. un gestionnaire de mots de passe ou autofill qui injecte dans les inputs), qu'un navigateur headless propre n'a pas. Dites-le dans les notes -- c'est une vraie classe de bugs que le bot ne peut pas déclencher.
  • Le bug nécessite un vrai Cloudflare Access devant l'admin. Le chemin dev-bypass ignore Access ; si le symptôme est spécifiquement « Access me redirige incorrectement », vous ne pouvez pas le reproduire localement.
  • La repro du rapporteur dépend de données de production, d'OAuth tiers, ou d'un environnement hébergé.
  • La démo ne démarre pas pour une raison non liée et l'échec est en installation, pas dans le code admin.

Sortie

Retournez :

  • Si vous avez reproduit le bug.
  • Si vous avez ignoré (avec raison le cas échéant).
  • L'approche utilisée : agent-browser-only ou none.
  • Notes : un court paragraphe nommant la démo, le chemin URL où le symptôme est apparu, la séquence d'interaction en prose simple, et toute erreur console ou runtime.
  • Une liste de captures d'écran, chacune avec le nom de fichier relatif sous .bot-artifacts/ et une description d'une ligne de ce qu'elle montre.

Skills similaires