UI Test

Chrome UI Test Skill

Instructions à Exécuter

IMPORTANT : Exécute ce workflow étape par étape de manière proactive.

Usage

/chrome-ui-test:ui-test <URL> [options]

Arguments :

• <URL> : URL de la page à tester (obligatoire)

Options :

• --scenario="description" : Scénario de test à exécuter (ex: "login avec email/password")
• --responsive : Tester sur 3 tailles d'écran (mobile 375x667 + tablette 768x1024 + desktop 1920x1080)
• --mobile : Tester uniquement sur mobile (375x667)
• --tablet : Tester uniquement sur tablette (768x1024)
• --desktop : Tester uniquement sur desktop (1920x1080)
• --visual : Capturer des screenshots pour validation visuelle
• --debug : Activer le mode debug (console logs, network requests)
• --gif : Enregistrer un GIF du parcours utilisateur
• --viewport=WIDTHxHEIGHT : Taille de fenêtre custom (ex: 1366x768)
• --help : Afficher un résumé des actions qui seront effectuées (avec les options actives) et demander confirmation

Exemples :

# Test simple de navigation
/chrome-ui-test:ui-test https://example.com

# Test d'un scénario de login avec GIF
/chrome-ui-test:ui-test https://app.example.com/login --scenario="login avec credentials valides" --gif

# Test responsive (3 tailles : mobile + tablette + desktop)
/chrome-ui-test:ui-test https://example.com --responsive --visual

# Test mobile uniquement
/chrome-ui-test:ui-test https://m.example.com --mobile --visual

# Test desktop uniquement
/chrome-ui-test:ui-test https://example.com --desktop

# Debug d'une page avec erreurs
/chrome-ui-test:ui-test https://example.com/broken-page --debug

# Voir ce qui sera fait avant de lancer
/chrome-ui-test:ui-test https://example.com --mobile --visual --help

Workflow

Phase -1 : Mode Aide (si --help)

IMPORTANT : Cette phase s'exécute UNIQUEMENT si l'option --help est présente.

1. Analyser l'URL et les options

   • URL cible : afficher l'URL qui sera testée
   • Options actives : lister toutes les options détectées

2. Générer le résumé des actions

   📋 RÉSUMÉ DU TEST UI
   
   🎯 URL cible : [URL]
   
   📐 Configuration viewport :
   [Si --responsive] → Tests sur 3 viewports (mobile 375x667, tablette 768x1024, desktop 1920x1080)
   [Si --mobile] → Test mobile uniquement (375x667)
   [Si --tablet] → Test tablette uniquement (768x1024)
   [Si --desktop] → Test desktop uniquement (1920x1080)
   [Si --viewport=WxH] → Viewport custom WxH
   [Sinon] → Viewport par défaut (1920x1080)
   
   🎬 Actions prévues :
   1. Créer un nouvel onglet Chrome dédié
   2. [Si viewport spécifique] Redimensionner la fenêtre
   3. [Si --gif] Démarrer l'enregistrement GIF
   4. Naviguer vers l'URL
   5. [Si --scenario] Exécuter le scénario : [description du scénario]
   6. [Sinon] Explorer la page (tests basiques)
   7. [Si --visual] Capturer des screenshots à chaque étape
   8. [Si --debug] Analyser console logs et network requests
   9. [Si --responsive] Répéter tests sur chaque viewport
   10. [Si --gif] Arrêter enregistrement et exporter le GIF
   11. Générer rapport détaillé
   
   ⚙️ Options actives :
   [Liste toutes les options avec leur signification]
   
   📊 Résultats attendus :
   - Rapport Markdown : /tmp/claude-*/scratchpad/ui-test-report-[timestamp].md
   [Si --visual] - Screenshots : /tmp/claude-*/scratchpad/step-*.png
   [Si --gif] - GIF animé : téléchargé dans Downloads/ui-test-recording-*.gif
   [Si --responsive] - [X] screenshots (X par viewport)
   
   ⏱️ Durée estimée : [estimer selon options : 30s simple, 1-2min avec scénario, 2-3min responsive, etc.]
   

3. Demander confirmation

   • Afficher : "Voulez-vous lancer ce test ? (oui/non)"
   • Attendre réponse utilisateur
   • Si "oui" ou "yes" ou "o" : continuer vers Phase 0
   • Si "non" ou "no" ou "n" : arrêter et afficher "Test annulé"
   • Toute autre réponse : redemander

Phase 0 : Initialisation (OBLIGATOIRE)

1. Récupérer le contexte Chrome

   Utiliser mcp__claude-in-chrome__tabs_context_mcp avec createIfEmpty=true
   

2. Créer un nouvel onglet dédié

   Utiliser mcp__claude-in-chrome__tabs_create_mcp
   Stocker le tabId pour toutes les opérations suivantes
   

3. Présenter le plan à l'utilisateur

   Utiliser mcp__claude-in-chrome__update_plan avec :
   - domains: liste des domaines qui seront visités
   - approach: liste des actions qui seront effectuées
   

4. Configurer la fenêtre

   • Si --viewport=WxH : utiliser resize_window avec les dimensions custom
   • Si --mobile : utiliser resize_window avec 375x667
   • Si --tablet : utiliser resize_window avec 768x1024
   • Si --desktop : utiliser resize_window avec 1920x1080
   • Si --responsive : préparer liste des 3 viewports à tester (375x667, 768x1024, 1920x1080)
   • Sinon (aucune option) : viewport par défaut 1920x1080

5. Démarrer l'enregistrement GIF (si --gif)

   Utiliser gif_creator avec action="start_recording"
   

Phase 1 : Navigation et Exploration

1. Naviguer vers l'URL

   Utiliser navigate avec l'URL fournie et le tabId
   Attendre le chargement complet (wait 2-3 secondes)
   

2. Capturer screenshot initial (si --visual ou --gif)

   Utiliser computer avec action="screenshot"
   Sauvegarder avec nom descriptif
   

3. Lire la structure de la page

   Utiliser read_page pour obtenir l'arbre d'accessibilité
   Identifier les éléments clés : formulaires, boutons, liens
   

4. Mode debug (si --debug)

   - Lire console_messages avec pattern pertinent
   - Lire network_requests pour voir les appels API
   - Identifier erreurs JavaScript ou requêtes échouées
   

Phase 2 : Exécution du Scénario

Si --scenario est fourni :

1. Analyser le scénario

   • Décomposer en étapes atomiques
   • Identifier les éléments à manipuler
   • Définir les validations attendues

2. Exécuter chaque étape

   Pour chaque action :
   a. find ou read_page pour localiser l'élément
   b. computer (click/type) ou form_input pour interagir
   c. Attendre réaction (wait 1-2s)
   d. Vérifier résultat (read_page, console, network)
   e. Screenshot si --visual
   

3. Validations

   • Vérifier les changements de page (navigate, URL)
   • Vérifier les messages d'erreur ou de succès
   • Vérifier les appels API (network_requests)
   • Vérifier la console (pas d'erreurs JS)

Sinon (exploration libre) :

1. Tests basiques
   • Vérifier que la page charge sans erreur 404/500
   • Vérifier absence d'erreurs JavaScript console
   • Tester les liens principaux (clic sur 2-3 liens majeurs)
   • Vérifier formulaires (remplir et valider un formulaire si présent)

Phase 3 : Tests Responsive (si --responsive)

Viewports à tester :

• Mobile : 375x667 (iPhone)
• Tablette : 768x1024 (iPad)
• Desktop : 1920x1080

Pour chaque viewport :

1. resize_window avec les dimensions
2. wait 1 seconde pour le reflow
3. screenshot avec nom incluant la taille
4. read_page pour vérifier éléments visibles
5. Valider :
   • Pas d'overflow horizontal
   • Éléments empilés correctement
   • Pas d'éléments coupés
   • Menu mobile fonctionnel (si < 768px)

Phase 4 : Génération du Rapport

1. Arrêter l'enregistrement GIF (si --gif)

   - gif_creator avec action="stop_recording"
   - gif_creator avec action="export", download=true
   - Attendre téléchargement
   

2. Compiler les résultats

   • Résumé des actions effectuées
   • Screenshots capturés (liste avec descriptions)
   • Erreurs détectées (console, network, visuel)
   • Validations réussies/échouées
   • Recommandations d'amélioration

3. Créer rapport Markdown

   # Rapport de Test UI - [URL]
   
   **Date :** [timestamp]
   **Scénario :** [description ou "exploration libre"]
   **Viewport(s) :** [liste]
   
   ## Résumé
   - ✅ Tests réussis : X
   - ❌ Tests échoués : Y
   - ⚠️  Avertissements : Z
   
   ## Actions Effectuées
   1. Navigation vers [URL]
   2. [liste des actions]
   
   ## Résultats par Catégorie
   
   ### Navigation et Chargement
   - Page charge en Xs
   - [détails]
   
   ### Fonctionnalités
   - [résultats des interactions]
   
   ### Console et Erreurs
   - [erreurs JS trouvées]
   
   ### Network
   - [appels API, erreurs HTTP]
   
   ### Visuel (si --visual)
   - Screenshots : [liste avec chemins]
   
   ### Responsive (si --responsive)
   - Mobile : [résultat]
   - Tablette : [résultat]
   - Desktop : [résultat]
   
   ## Recommandations
   1. [amélioration 1]
   2. [amélioration 2]
   
   ## Fichiers Générés
   - GIF : [chemin] (si --gif)
   - Screenshots : [liste]
   

4. Sauvegarder le rapport

   Utiliser Write pour créer :
   /tmp/claude-*/scratchpad/ui-test-report-[timestamp].md
   

Gestion des Erreurs

Erreurs de Navigation

• URL invalide → arrêter et signaler
• Page 404/500 → noter dans rapport et continuer
• Timeout → réessayer 1 fois, puis noter

Erreurs d'Interaction

• Élément introuvable → noter et passer au suivant
• Clic échoué → réessayer avec coordonnées ajustées
• Formulaire non soumis → vérifier console/network

Erreurs Chrome

• Tab invalide → recreate tab avec tabs_create_mcp
• Extension non responsive → attendre 5s max puis timeout

Bonnes Pratiques

1. Toujours attendre après interactions

   • 1-2s après click/type
   • 2-3s après navigation
   • Éviter les race conditions

2. Screenshots descriptifs

   • Nommer : step-01-homepage.png
   • Capturer AVANT et APRÈS actions critiques

3. GIF Recording

   • Démarrer AVANT première action
   • Arrêter APRÈS dernière validation
   • Screenshot initial et final pour frames propres

4. Console Logs

   • Utiliser pattern pour filtrer (éviter spam)
   • Chercher error|warn|failed si debug
   • clear=true après lecture pour éviter doublons

5. Network Requests

   • Utiliser urlPattern si recherche spécifique
   • Vérifier status codes (4xx, 5xx)
   • Noter les API lentes (> 2s)

Exemples de Scénarios

Login Standard

--scenario="Je veux tester le login :
1. Remplir email avec test@example.com
2. Remplir password avec Test123!
3. Cliquer sur bouton Se connecter
4. Vérifier redirection vers dashboard"

Formulaire Contact

--scenario="Tester formulaire contact :
1. Remplir nom, email, message
2. Soumettre
3. Vérifier message de confirmation
4. Vérifier appel API POST réussi"

Navigation E-commerce

--scenario="Parcours d'achat :
1. Chercher 'laptop'
2. Cliquer sur premier résultat
3. Ajouter au panier
4. Aller au panier
5. Vérifier article présent"

Notes Importantes

• TOUJOURS créer un nouvel onglet (tabs_create_mcp) au début
• TOUJOURS utiliser le même tabId pour toutes les opérations
• JAMAIS réutiliser un tabId d'une session précédente
• TOUJOURS présenter le plan (update_plan) avant d'agir
• Sauvegarder tous les fichiers dans le scratchpad
• Mode debug active automatiquement console + network
• GIF enregistre toutes les interactions automatiquement