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

1. 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.] ```

1. 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 mcpclaude-in-chrometabscontextmcp avec createIfEmpty=true ``

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

`` Utiliser mcpclaude-in-chrometabscreatemcp Stocker le tabId pour toutes les opérations suivantes ``

1. Présenter le plan à l'utilisateur

`` Utiliser mcpclaude-in-chromeupdate_plan avec : - domains: liste des domaines qui seront visités - approach: liste des actions qui seront effectuées ``

1. Configurer la fenêtre

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

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

`` Utiliser gifcreator avec action="startrecording" ``

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) ``

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

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

1. Lire la structure de la page

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

1. Mode debug (si --debug)

`` - Lire consolemessages avec pattern pertinent - Lire networkrequests 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

1. Exécuter chaque étape

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

1. 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)

`` - gifcreator avec action="stoprecording" - gif_creator avec action="export", download=true - Attendre téléchargement ``

1. 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

1. Créer rapport Markdown

```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] ```

1. 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 tabscreatemcp
• 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

1. Screenshots descriptifs

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

1. GIF Recording

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

1. Console Logs

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

1. 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 [email protected]
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 (tabscreatemcp) 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