browser-qa

QA Navigateur — Tests Visuels Automatisés & Interactions

Quand l'utiliser

• Après avoir déployé une fonctionnalité sur la staging/preview
• Lorsque vous devez vérifier le comportement de l'UI sur plusieurs pages
• Avant de livrer — confirmer que les mises en page, formulaires et interactions fonctionnent réellement
• Lors de la révision de PR qui touchent au code frontend
• Audits d'accessibilité et tests responsives

Comment ça fonctionne

Utilise le MCP d'automatisation de navigateur (claude-in-chrome, Playwright ou Puppeteer) pour interagir avec des pages en direct comme un vrai utilisateur.

Sécurité d'abord — rayon d'explosion (exécuter en lecture seule par défaut)

Browser QA pilote de vraies sessions d'authentification et de vrais parcours utilisateur, donc traitez explicitement le rayon d'explosion. Par défaut, utiliser en lecture seule : ne jamais exécuter un parcours mutant (paiement, suppression, mise à jour en masse) contre une URL de production — nécessiter une option explicite et une URL de staging/preview. Utiliser des identifiants de test préparés, jamais de vrais identifiants de production, et occulter les identifiants/tokens/PII avant d'enregistrer une capture d'écran.

Phase 1 : Test de fumée

1. Naviguer vers l'URL cible
2. Vérifier les erreurs console (filtrer le bruit : analytics, tiers)
3. Vérifier l'absence de 4xx/5xx dans les requêtes réseau
4. Capture d'écran de la partie visible au-dessus de la ligne de flottaison sur desktop + vue mobile
5. Vérifier les Core Web Vitals : LCP < 2.5s, CLS < 0.1, INP < 200ms
   (INP a remplacé FID en mars 2024 ; seuils selon web.dev)

Phase 2 : Test d'interaction

1. Cliquer sur chaque lien de navigation — vérifier l'absence de liens morts
2. Soumettre des formulaires avec des données valides — vérifier l'état de succès
3. Soumettre des formulaires avec des données invalides — vérifier l'état d'erreur
4. Tester le flux d'authentification : connexion → page protégée → déconnexion (identifiants de test uniquement, jamais de prod)
5. Tester les parcours utilisateur critiques (paiement, onboarding, recherche)
   — en lecture seule par défaut ; n'exercer les parcours mutants que contre la staging
     avec option explicite (voir "Sécurité d'abord" ci-dessus)

Phase 3 : Régression visuelle

1. Capture d'écran des pages clés à 3 points d'arrêt (375px, 768px, 1440px)
2. Comparer avec les captures de base enregistrées
   — pas de base ⇒ signaler INCONCLUSIF, jamais un PASS silencieux
3. Signaler les décalages de mise en page > 5px, les éléments manquants, les débordements
4. Vérifier le mode sombre si applicable

Phase 4 : Accessibilité

1. Exécuter axe-core ou un équivalent sur chaque page
2. Signaler les violations WCAG 2.2 AA (contraste, libellés, ordre de focus)
3. Vérifier que la navigation au clavier fonctionne de bout en bout
4. Vérifier les points de repère du lecteur d'écran

Remarque : axe-core couvre automatiquement environ 30 à 40 % des WCAG. Un passage propre est nécessaire, pas suffisant — la navigation au clavier, l'ordre de focus et un passage avec un lecteur d'écran nécessitent toujours une vérification manuelle. Ne signalez pas "accessible" à partir d'un seul passage automatisé.

Format de sortie

## Rapport QA — [URL] — [horodatage]

### Test de fumée
- Erreurs console : 0 critique, 2 avertissements (bruit analytique)
- Réseau : tout 200/304, aucune erreur
- Core Web Vitals : LCP 1.2s ✓, CLS 0.02 ✓, INP 89ms ✓

### Interactions
- [✓] Liens de navigation : 12/12 fonctionnels
- [✗] Formulaire de contact : état d'erreur manquant pour email invalide
- [✓] Flux d'authentification : connexion/déconnexion fonctionnelle

### Visuel
- [✗] Section héros dépasse sur le viewport 375px
- [✓] Mode sombre : toutes les pages cohérentes

### Accessibilité
- 2 violations AA : texte alternatif manquant sur l'image du héros, contraste faible sur les liens du pied de page

### Verdict : LIVRER AVEC CORRECTIONS (2 problèmes, 0 blocants)
# verdict ∈ LIVRER / LIVRER AVEC CORRECTIONS / NE PAS LIVRER ; utiliser INCONCLUSIF si pas de base visuelle

Intégration

Fonctionne avec tout MCP navigateur :

• Outils mChild__claude-in-chrome__* (préféré — utilise votre Chrome réel)
• Playwright via mcp__browserbase__*
• Scripts Puppeteer directs

Associer avec /canary-watch pour la surveillance post-déploiement.