rhpxgr8pzm-max/claude-skills

QA Navigateur — Tests Visuels Automatisés et Interaction

Quand l'utiliser

• Après avoir déployé une fonctionnalité sur staging/prévisualisation
• 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
• Lors de la revue de PR qui modifient du code frontend
• Audits d'accessibilité et tests responsives

Comment ça marche

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

Sécurité avant tout — périmètre d'impact (lecture seule par défaut)

Browser QA pilote de véritables authentifications et parcours utilisateur, traitez donc explicitement le périmètre d'impact. Par défaut, lecture seule : n'exécutez jamais un parcours mutant (achat, paiement, suppression, mise à jour en masse) contre une URL de production — exigez une option explicite et une URL staging/prévisualisation. Utilisez des identifiants de test pré-remplis, jamais de véritables identifiants de production, et occultez les identifiants/tokens/PII avant de sauvegarder 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. Capturer l'écran au-dessus de la ligne de flottaison sur desktop + mobile
5. Vérifier les Core Web Vitals : LCP < 2,5 s, CLS < 0,1, INP < 200 ms
   (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 production)
5. Tester les parcours utilisateur critiques (achat, onboarding, recherche)
   — lecture seule par défaut ; n'exécuter les parcours mutants que sur staging
     avec option explicite (voir « Sécurité avant tout » ci-dessus)

Phase 3 : Régression visuelle

1. Capturer les pages clés à 3 points de rupture (375 px, 768 px, 1440 px)
2. Comparer avec les captures de référence validées
   — pas de référence ⇒ rapporter INCONCLUSIF, jamais un PASS silencieux
3. Signaler les décalages de mise en page > 5 px, éléments manquants, débordements
4. Vérifier le mode sombre le cas échéant

Phase 4 : Accessibilité

1. Exécuter axe-core ou équivalent sur chaque page
2. Signaler les violations WCAG 2.2 AA (contraste, étiquettes, ordre de focus)
3. Vérifier que la navigation au clavier fonctionne de bout en bout
4. Vérifier les points de repère pour lecteurs 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 une vérification avec un lecteur d'écran nécessitent encore un contrôle manuel. Ne rapportez pas « accessible » à partir d'un simple passage automatisé.

Format de sortie

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

### Test de fumée
- Erreurs console : 0 critique, 2 avertissements (bruit analytics)
- Réseau : tout 200/304, aucun échec
- Core Web Vitals : LCP 1,2 s ✓, CLS 0,02 ✓, INP 89 ms ✓

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

### Visuel
- [✗] La section Hero déborde sur la zone d'affichage 375 px
- [✓] Mode sombre : toutes les pages cohérentes

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

### Verdict : LIVRABLE AVEC CORRECTIONS (2 problèmes, 0 bloquants)
# verdict ∈ LIVRABLE / LIVRABLE AVEC CORRECTIONS / NON LIVRABLE ; utiliser INCONCLUSIF si aucune référence visuelle

Intégration

Fonctionne avec tout MCP navigateur :

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

Associez avec /canary-watch pour une surveillance post-déploiement.