Vérification E2E (Playwright + connexion locale)

Vue d'ensemble

Pilotez le serveur dev Chorus en cours d'exécution dans un vrai navigateur via le MCP Playwright pour vérifier les changements d'interface utilisateur de bout en bout. Boucle principale : connexion avec identifiants locaux → navigation → snapshot pour lire l'état / agir → capture d'écran pour l'humain.

Ceci est une acceptation manuelle, pas la suite Vitest automatisée (pnpm test). Utilisez-la quand un AC dit « l'utilisateur voit X » et seul un vrai navigateur peut le confirmer.

Prérequis

• Serveur dev sain sur le port 8637. Vérifiez toujours en premier :

  curl -s -o /dev/null -w "%{http_code}" http://localhost:8637/login   # attendu : 200

  Si ce n'est pas 200 (connexion refusée, 500, ou autre), le serveur ne tourne pas ou est cassé — lancez-le avec pnpm dev:local et revérifiez jusqu'à obtenir 200 avant de piloter le navigateur. (pnpm dev marche aussi, mais pnpm dev:local démarre la pile locale complète.)

• Outils MCP Playwright disponibles. Ils sont différés — chargez-les d'abord : ToolSearch("select:mcp__playwright__browser_navigate,mcp__playwright__browser_snapshot,mcp__playwright__browser_take_screenshot,mcp__playwright__browser_click,mcp__playwright__browser_fill_form")

Étape 1 — Trouver les identifiants

Le dev local utilise le chemin default-auth (simple email + mot de passe sur /login). Lisez-le depuis le fichier .env à la racine du repo :

grep -E "DEFAULT_USER|DEFAULT_PASSWORD" .env
# DEFAULT_USER="admin@chorus.local"
# DEFAULT_PASSWORD="chorus"

DEFAULT_USER se connecte en tant qu'utilisateur d'espace de travail ordinaire (p. ex. admin@chorus.local). Ce n'est PAS la même chose que SUPER_ADMIN_EMAIL (le panneau /login/admin) ou le flux Cognito OIDC décrit dans l'ancien .claude/skills/oidc-login.md — pour la vérification normale de pages vous voulez default-auth.

Étape 2 — Connexion (flux vérifié)

Quand default-auth est activé, /login affiche le formulaire email+mot de passe directement (pas de redirection SSO) :

1. browser_navigate → http://localhost:8637/login
2. browser_snapshot → saisissez la ref de la boîte Email, la boîte Mot de passe, et le bouton « Sign In ».
3. browser_fill_form avec les deux champs :

   [{ name: "Email",    target: "<email-ref>",    type: "textbox", value: "admin@chorus.local" },
    { name: "Password", target: "<password-ref>", type: "textbox", value: "chorus" }]

4. browser_click le bouton « Sign In ».
5. Succès = l'URL devient /projects. Le résultat de l'outil affiche la Page URL — confirmez qu'elle a changé. Si elle reste sur /login avec une banneau d'erreur, les identifiants ou la config default-auth du serveur sont erronés.

Déjà authentifié depuis une session antérieure ? Le navigateur garde la session, donc vous pouvez sauter directement à l'Étape 3. Pour tester la connexion elle-même, déconnectez-vous d'abord : sur n'importe quelle page de tableau de bord cliquez le bouton « Sign out » (bas-gauche de la barre latérale), qui vous renvoie à /login. (Si /login affiche déjà le formulaire email+mot de passe, vous êtes déconnecté — il n'y a pas de bouton « Sign out » à chercher ; procédez simplement avec l'Étape 2.)

Étape 3 — Naviguer & observer

• browser_navigate vers la cible, p. ex. un tableau de bord de projet : http://localhost:8637/projects/<project-uuid>/dashboard
• browser_snapshot est l'outil de travail — il retourne un arbre d'accessibilité avec des ids ref stables. Utilisez-le pour lire l'état de la page et pour obtenir la ref/target que vous passez à browser_click, browser_fill_form, etc. Préférez-le aux captures d'écran pour agir.
• Basculez l'interface utilisateur et resnapshootez pour comparer les états (p. ex. les contrôles segmentés Ideas/Stats et Flat/Lineage du tableau de bord re-rendent chacun l'arbre).
• Si une navigation retourne un arbre quasi vide, la page hydrate encore — appelez browser_snapshot à nouveau.

Étape 4 — Capture d'écran pour l'humain

Utilisez browser_take_screenshot quand l'humain a besoin de voir le résultat (mise en page visuelle, espacement, couleur).

Préfixez toujours le nom de fichier avec .playwright-mcp/ — ce répertoire est dans gitignore. Un simple filename: "foo.png" sauvegarde à la racine du repo et pollue git status.

browser_take_screenshot({ type: "png", filename: ".playwright-mcp/dashboard-lineage.png" })

Puis Read pour l'afficher en ligne. Le résultat de l'outil screenshot affiche un chemin relatif au repo ; Read en nécessite un absolu, donc lisez-le comme <repo-root>/.playwright-mcp/<name>.png (préfixez le chemin que vous avez passé avec la racine du repo absolu). Pour capturer un seul élément au lieu du viewport, passez sa ref target (depuis un snapshot). Le MCP sauvegarde aussi automatiquement les fichiers snapshot .yml et console .log sous .playwright-mcp/.

Référence rapide

Erreurs courantes