Chrome UI Test Skill

Instructions à Exécuter

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

Usage

code

/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 :

bash

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

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

•

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

code

📋 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.]

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

•

Récupérer le contexte Chrome

code

Utiliser mcp__claude-in-chrome__tabs_context_mcp avec createIfEmpty=true

•

Créer un nouvel onglet dédié

code

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

•

Présenter le plan à l'utilisateur

code

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

•
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

•

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

code

Utiliser gif_creator avec action="start_recording"

Phase 1 : Navigation et Exploration

•

Naviguer vers l'URL

code

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

•

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

code

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

•

Lire la structure de la page

code

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

•

Mode debug (si --debug)

code

- 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 :

•
Analyser le scénario
- •Décomposer en étapes atomiques
- •Identifier les éléments à manipuler
- •Définir les validations attendues

•

Exécuter chaque étape

code

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

•
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) :

•
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 :

•resize_window avec les dimensions
•wait 1 seconde pour le reflow
•screenshot avec nom incluant la taille
•read_page pour vérifier éléments visibles
•
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

•

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

code

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

•
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

•

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]

•

Sauvegarder le rapport

code

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

•
Toujours attendre après interactions
- •1-2s après click/type
- •2-3s après navigation
- •Éviter les race conditions
•
Screenshots descriptifs
- •Nommer : step-01-homepage.png
- •Capturer AVANT et APRÈS actions critiques
•
GIF Recording
- •Démarrer AVANT première action
- •Arrêter APRÈS dernière validation
- •Screenshot initial et final pour frames propres
•
Console Logs
- •Utiliser pattern pour filtrer (éviter spam)
- •Chercher error|warn|failed si debug
- •clear=true après lecture pour éviter doublons
•
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

code

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

code

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

code

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