[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6CSZKCYYT4EAW4CDSTS3TSH":3,"skill-same:01M6CSZKCYYT4EAW4CDSTS3TSH":101},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":34,"publishedAt":55,"linkOnly":56,"markdownContent":57,"markdownBody":58,"frontMatter":59,"refName":79,"commitSha":80,"skillDirectory":81,"forksCount":14,"repositoryHtmlUrl":82,"repositoryHomepageUrl":83,"ownerHtmlUrl":84,"ownerBlogUrl":6,"ownerDescription":85,"updatedAt":86,"install":87,"resources":100},"01M6CSZKCYYT4EAW4CDSTS3TSH","tester:ui-test",null,"Teste automatiquement une interface utilisateur dans Chrome : navigation, clics, validation visuelle, tests fonctionnels, responsive, comportement et debug. Génère un rapport détaillé avec screenshots et optionnellement un GIF du parcours.","atournayre\u002Fclaude-personas","atournayre","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F4262077?v=4","01M6CSSGYW0E0D0M3E2T6J9X2Z","Aurélien Tournayre","01M6CSSH3DENJF2XWZ41H0F43K",0,"MIT","https:\u002F\u002Fgithub.com\u002Fatournayre\u002Fclaude-personas\u002Fblob\u002Fmain\u002Ftester\u002Fskills\u002Fui-test\u002FSKILL.md",[18,23,26,29],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":30,"categoryName":31,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54],"tester:ui test","ui test","test","tester","ui","Bash","write","read","find","page","tool","plan","MCP","messages","validation","update","create","debug","javascript","chrome","2026-11-10 10:12:30",false,"---\nname: tester:ui-test\ndescription: >\n  Teste automatiquement une interface utilisateur dans Chrome : navigation, clics,\n  validation visuelle, tests fonctionnels, responsive, comportement et debug.\n  Génère un rapport détaillé avec screenshots et optionnellement un GIF du parcours.\nallowed-tools: [\n  mcp__claude-in-chrome__tabs_context_mcp,\n  mcp__claude-in-chrome__tabs_create_mcp,\n  mcp__claude-in-chrome__navigate,\n  mcp__claude-in-chrome__read_page,\n  mcp__claude-in-chrome__find,\n  mcp__claude-in-chrome__computer,\n  mcp__claude-in-chrome__form_input,\n  mcp__claude-in-chrome__javascript_tool,\n  mcp__claude-in-chrome__read_console_messages,\n  mcp__claude-in-chrome__read_network_requests,\n  mcp__claude-in-chrome__resize_window,\n  mcp__claude-in-chrome__gif_creator,\n  mcp__claude-in-chrome__update_plan,\n  Write,\n  Read,\n  Bash\n]\nmodel: sonnet\nversion: 1.0.0\nlicense: MIT\n---\n\n# Chrome UI Test Skill\n\n## Instructions à Exécuter\n\n**IMPORTANT : Exécute ce workflow étape par étape de manière proactive.**\n\n## Usage\n\n```\n\u002Ftester:ui-test \u003CURL> [options]\n```\n\n**Arguments :**\n- `\u003CURL>` : URL de la page à tester (obligatoire)\n\n**Options :**\n- `--scenario=\"description\"` : Scénario de test à exécuter (ex: \"login avec email\u002Fpassword\")\n- `--responsive` : Tester sur 3 tailles d'écran (mobile 375x667 + tablette 768x1024 + desktop 1920x1080)\n- `--mobile` : Tester uniquement sur mobile (375x667)\n- `--tablet` : Tester uniquement sur tablette (768x1024)\n- `--desktop` : Tester uniquement sur desktop (1920x1080)\n- `--visual` : Capturer des screenshots pour validation visuelle\n- `--debug` : Activer le mode debug (console logs, network requests)\n- `--gif` : Enregistrer un GIF du parcours utilisateur\n- `--viewport=WIDTHxHEIGHT` : Taille de fenêtre custom (ex: 1366x768)\n- `--help` : Afficher un résumé des actions qui seront effectuées (avec les options actives) et demander confirmation\n\n**Exemples :**\n```bash\n# Test simple de navigation\n\u002Ftester:ui-test https:\u002F\u002Fexample.com\n\n# Test d'un scénario de login avec GIF\n\u002Ftester:ui-test https:\u002F\u002Fapp.example.com\u002Flogin --scenario=\"login avec credentials valides\" --gif\n\n# Test responsive (3 tailles : mobile + tablette + desktop)\n\u002Ftester:ui-test https:\u002F\u002Fexample.com --responsive --visual\n\n# Test mobile uniquement\n\u002Ftester:ui-test https:\u002F\u002Fm.example.com --mobile --visual\n\n# Test desktop uniquement\n\u002Ftester:ui-test https:\u002F\u002Fexample.com --desktop\n\n# Debug d'une page avec erreurs\n\u002Ftester:ui-test https:\u002F\u002Fexample.com\u002Fbroken-page --debug\n\n# Voir ce qui sera fait avant de lancer\n\u002Ftester:ui-test https:\u002F\u002Fexample.com --mobile --visual --help\n```\n\n## Workflow\n\n### Phase -1 : Mode Aide (si --help)\n\n**IMPORTANT : Cette phase s'exécute UNIQUEMENT si l'option --help est présente.**\n\n1. **Analyser l'URL et les options**\n   - URL cible : afficher l'URL qui sera testée\n   - Options actives : lister toutes les options détectées\n\n2. **Générer le résumé des actions**\n   ```\n   RÉSUMÉ DU TEST UI\n\n   URL cible : [URL]\n\n   Configuration viewport :\n   [Si --responsive] -> Tests sur 3 viewports (mobile 375x667, tablette 768x1024, desktop 1920x1080)\n   [Si --mobile] -> Test mobile uniquement (375x667)\n   [Si --tablet] -> Test tablette uniquement (768x1024)\n   [Si --desktop] -> Test desktop uniquement (1920x1080)\n   [Si --viewport=WxH] -> Viewport custom WxH\n   [Sinon] -> Viewport par défaut (1920x1080)\n\n   Actions prévues :\n   1. Créer un nouvel onglet Chrome dédié\n   2. [Si viewport spécifique] Redimensionner la fenêtre\n   3. [Si --gif] Démarrer l'enregistrement GIF\n   4. Naviguer vers l'URL\n   5. [Si --scenario] Exécuter le scénario : [description du scénario]\n   6. [Sinon] Explorer la page (tests basiques)\n   7. [Si --visual] Capturer des screenshots à chaque étape\n   8. [Si --debug] Analyser console logs et network requests\n   9. [Si --responsive] Répéter tests sur chaque viewport\n   10. [Si --gif] Arrêter enregistrement et exporter le GIF\n   11. Générer rapport détaillé\n\n   Options actives :\n   [Liste toutes les options avec leur signification]\n\n   Résultats attendus :\n   - Rapport Markdown : \u002Ftmp\u002Fclaude-*\u002Fscratchpad\u002Fui-test-report-[timestamp].md\n   [Si --visual] - Screenshots : \u002Ftmp\u002Fclaude-*\u002Fscratchpad\u002Fstep-*.png\n   [Si --gif] - GIF animé : téléchargé dans Downloads\u002Fui-test-recording-*.gif\n   [Si --responsive] - [X] screenshots (X par viewport)\n\n   Durée estimée : [estimer selon options : 30s simple, 1-2min avec scénario, 2-3min responsive, etc.]\n   ```\n\n3. **Demander confirmation**\n   - Afficher : \"Voulez-vous lancer ce test ? (oui\u002Fnon)\"\n   - Attendre réponse utilisateur\n   - Si \"oui\" ou \"yes\" ou \"o\" : continuer vers Phase 0\n   - Si \"non\" ou \"no\" ou \"n\" : arrêter et afficher \"Test annulé\"\n   - Toute autre réponse : redemander\n\n### Phase 0 : Initialisation (OBLIGATOIRE)\n\n1. **Récupérer le contexte Chrome**\n   ```\n   Utiliser mcp__claude-in-chrome__tabs_context_mcp avec createIfEmpty=true\n   ```\n\n2. **Créer un nouvel onglet dédié**\n   ```\n   Utiliser mcp__claude-in-chrome__tabs_create_mcp\n   Stocker le tabId pour toutes les opérations suivantes\n   ```\n\n3. **Présenter le plan à l'utilisateur**\n   ```\n   Utiliser mcp__claude-in-chrome__update_plan avec :\n   - domains: liste des domaines qui seront visités\n   - approach: liste des actions qui seront effectuées\n   ```\n\n4. **Configurer la fenêtre**\n   - Si `--viewport=WxH` : utiliser `resize_window` avec les dimensions custom\n   - Si `--mobile` : utiliser `resize_window` avec 375x667\n   - Si `--tablet` : utiliser `resize_window` avec 768x1024\n   - Si `--desktop` : utiliser `resize_window` avec 1920x1080\n   - Si `--responsive` : préparer liste des 3 viewports à tester (375x667, 768x1024, 1920x1080)\n   - Sinon (aucune option) : viewport par défaut 1920x1080\n\n5. **Démarrer l'enregistrement GIF (si --gif)**\n   ```\n   Utiliser gif_creator avec action=\"start_recording\"\n   ```\n\n### Phase 1 : Navigation et Exploration\n\n1. **Naviguer vers l'URL**\n   ```\n   Utiliser navigate avec l'URL fournie et le tabId\n   Attendre le chargement complet (wait 2-3 secondes)\n   ```\n\n2. **Capturer screenshot initial (si --visual ou --gif)**\n   ```\n   Utiliser computer avec action=\"screenshot\"\n   Sauvegarder avec nom descriptif\n   ```\n\n3. **Lire la structure de la page**\n   ```\n   Utiliser read_page pour obtenir l'arbre d'accessibilité\n   Identifier les éléments clés : formulaires, boutons, liens\n   ```\n\n4. **Mode debug (si --debug)**\n   ```\n   - Lire console_messages avec pattern pertinent\n   - Lire network_requests pour voir les appels API\n   - Identifier erreurs JavaScript ou requêtes échouées\n   ```\n\n### Phase 2 : Exécution du Scénario\n\n**Si `--scenario` est fourni :**\n\n1. **Analyser le scénario**\n   - Décomposer en étapes atomiques\n   - Identifier les éléments à manipuler\n   - Définir les validations attendues\n\n2. **Exécuter chaque étape**\n   ```\n   Pour chaque action :\n   a. find ou read_page pour localiser l'élément\n   b. computer (click\u002Ftype) ou form_input pour interagir\n   c. Attendre réaction (wait 1-2s)\n   d. Vérifier résultat (read_page, console, network)\n   e. Screenshot si --visual\n   ```\n\n3. **Validations**\n   - Vérifier les changements de page (navigate, URL)\n   - Vérifier les messages d'erreur ou de succès\n   - Vérifier les appels API (network_requests)\n   - Vérifier la console (pas d'erreurs JS)\n\n**Sinon (exploration libre) :**\n\n1. **Tests basiques**\n   - Vérifier que la page charge sans erreur 404\u002F500\n   - Vérifier absence d'erreurs JavaScript console\n   - Tester les liens principaux (clic sur 2-3 liens majeurs)\n   - Vérifier formulaires (remplir et valider un formulaire si présent)\n\n### Phase 3 : Tests Responsive (si --responsive)\n\n**Viewports à tester :**\n- Mobile : 375x667 (iPhone)\n- Tablette : 768x1024 (iPad)\n- Desktop : 1920x1080\n\n**Pour chaque viewport :**\n1. `resize_window` avec les dimensions\n2. `wait` 1 seconde pour le reflow\n3. `screenshot` avec nom incluant la taille\n4. `read_page` pour vérifier éléments visibles\n5. Valider :\n   - Pas d'overflow horizontal\n   - Éléments empilés correctement\n   - Pas d'éléments coupés\n   - Menu mobile fonctionnel (si \u003C 768px)\n\n### Phase 4 : Génération du Rapport\n\n1. **Arrêter l'enregistrement GIF (si --gif)**\n   ```\n   - gif_creator avec action=\"stop_recording\"\n   - gif_creator avec action=\"export\", download=true\n   - Attendre téléchargement\n   ```\n\n2. **Compiler les résultats**\n   - Résumé des actions effectuées\n   - Screenshots capturés (liste avec descriptions)\n   - Erreurs détectées (console, network, visuel)\n   - Validations réussies\u002Féchouées\n   - Recommandations d'amélioration\n\n3. **Créer rapport Markdown**\n   ```markdown\n   # Rapport de Test UI - [URL]\n\n   **Date :** [timestamp]\n   **Scénario :** [description ou \"exploration libre\"]\n   **Viewport(s) :** [liste]\n\n   ## Résumé\n   - Tests réussis : X\n   - Tests échoués : Y\n   - Avertissements : Z\n\n   ## Actions Effectuées\n   1. Navigation vers [URL]\n   2. [liste des actions]\n\n   ## Résultats par Catégorie\n\n   ### Navigation et Chargement\n   - Page charge en Xs\n   - [détails]\n\n   ### Fonctionnalités\n   - [résultats des interactions]\n\n   ### Console et Erreurs\n   - [erreurs JS trouvées]\n\n   ### Network\n   - [appels API, erreurs HTTP]\n\n   ### Visuel (si --visual)\n   - Screenshots : [liste avec chemins]\n\n   ### Responsive (si --responsive)\n   - Mobile : [résultat]\n   - Tablette : [résultat]\n   - Desktop : [résultat]\n\n   ## Recommandations\n   1. [amélioration 1]\n   2. [amélioration 2]\n\n   ## Fichiers Générés\n   - GIF : [chemin] (si --gif)\n   - Screenshots : [liste]\n   ```\n\n4. **Sauvegarder le rapport**\n   ```\n   Utiliser Write pour créer :\n   \u002Ftmp\u002Fclaude-*\u002Fscratchpad\u002Fui-test-report-[timestamp].md\n   ```\n\n## Gestion des Erreurs\n\n### Erreurs de Navigation\n- URL invalide -> arrêter et signaler\n- Page 404\u002F500 -> noter dans rapport et continuer\n- Timeout -> réessayer 1 fois, puis noter\n\n### Erreurs d'Interaction\n- Élément introuvable -> noter et passer au suivant\n- Clic échoué -> réessayer avec coordonnées ajustées\n- Formulaire non soumis -> vérifier console\u002Fnetwork\n\n### Erreurs Chrome\n- Tab invalide -> recreate tab avec tabs_create_mcp\n- Extension non responsive -> attendre 5s max puis timeout\n\n## Bonnes Pratiques\n\n1. **Toujours attendre après interactions**\n   - 1-2s après click\u002Ftype\n   - 2-3s après navigation\n   - Éviter les race conditions\n\n2. **Screenshots descriptifs**\n   - Nommer : `step-01-homepage.png`\n   - Capturer AVANT et APRÈS actions critiques\n\n3. **GIF Recording**\n   - Démarrer AVANT première action\n   - Arrêter APRÈS dernière validation\n   - Screenshot initial et final pour frames propres\n\n4. **Console Logs**\n   - Utiliser `pattern` pour filtrer (éviter spam)\n   - Chercher `error|warn|failed` si debug\n   - `clear=true` après lecture pour éviter doublons\n\n5. **Network Requests**\n   - Utiliser `urlPattern` si recherche spécifique\n   - Vérifier status codes (4xx, 5xx)\n   - Noter les API lentes (> 2s)\n\n## Notes Importantes\n\n- **TOUJOURS** créer un nouvel onglet (tabs_create_mcp) au début\n- **TOUJOURS** utiliser le même tabId pour toutes les opérations\n- **JAMAIS** réutiliser un tabId d'une session précédente\n- **TOUJOURS** présenter le plan (update_plan) avant d'agir\n- Sauvegarder tous les fichiers dans le scratchpad\n- Mode debug active automatiquement console + network\n- GIF enregistre toutes les interactions automatiquement\n","# Chrome UI Test Skill\n\n## Instructions à Exécuter\n\n**IMPORTANT : Exécute ce workflow étape par étape de manière proactive.**\n\n## Usage\n\n```\n\u002Ftester:ui-test \u003CURL> [options]\n```\n\n**Arguments :**\n- `\u003CURL>` : URL de la page à tester (obligatoire)\n\n**Options :**\n- `--scenario=\"description\"` : Scénario de test à exécuter (ex: \"login avec email\u002Fpassword\")\n- `--responsive` : Tester sur 3 tailles d'écran (mobile 375x667 + tablette 768x1024 + desktop 1920x1080)\n- `--mobile` : Tester uniquement sur mobile (375x667)\n- `--tablet` : Tester uniquement sur tablette (768x1024)\n- `--desktop` : Tester uniquement sur desktop (1920x1080)\n- `--visual` : Capturer des screenshots pour validation visuelle\n- `--debug` : Activer le mode debug (console logs, network requests)\n- `--gif` : Enregistrer un GIF du parcours utilisateur\n- `--viewport=WIDTHxHEIGHT` : Taille de fenêtre custom (ex: 1366x768)\n- `--help` : Afficher un résumé des actions qui seront effectuées (avec les options actives) et demander confirmation\n\n**Exemples :**\n```bash\n# Test simple de navigation\n\u002Ftester:ui-test https:\u002F\u002Fexample.com\n\n# Test d'un scénario de login avec GIF\n\u002Ftester:ui-test https:\u002F\u002Fapp.example.com\u002Flogin --scenario=\"login avec credentials valides\" --gif\n\n# Test responsive (3 tailles : mobile + tablette + desktop)\n\u002Ftester:ui-test https:\u002F\u002Fexample.com --responsive --visual\n\n# Test mobile uniquement\n\u002Ftester:ui-test https:\u002F\u002Fm.example.com --mobile --visual\n\n# Test desktop uniquement\n\u002Ftester:ui-test https:\u002F\u002Fexample.com --desktop\n\n# Debug d'une page avec erreurs\n\u002Ftester:ui-test https:\u002F\u002Fexample.com\u002Fbroken-page --debug\n\n# Voir ce qui sera fait avant de lancer\n\u002Ftester:ui-test https:\u002F\u002Fexample.com --mobile --visual --help\n```\n\n## Workflow\n\n### Phase -1 : Mode Aide (si --help)\n\n**IMPORTANT : Cette phase s'exécute UNIQUEMENT si l'option --help est présente.**\n\n1. **Analyser l'URL et les options**\n   - URL cible : afficher l'URL qui sera testée\n   - Options actives : lister toutes les options détectées\n\n2. **Générer le résumé des actions**\n   ```\n   RÉSUMÉ DU TEST UI\n\n   URL cible : [URL]\n\n   Configuration viewport :\n   [Si --responsive] -> Tests sur 3 viewports (mobile 375x667, tablette 768x1024, desktop 1920x1080)\n   [Si --mobile] -> Test mobile uniquement (375x667)\n   [Si --tablet] -> Test tablette uniquement (768x1024)\n   [Si --desktop] -> Test desktop uniquement (1920x1080)\n   [Si --viewport=WxH] -> Viewport custom WxH\n   [Sinon] -> Viewport par défaut (1920x1080)\n\n   Actions prévues :\n   1. Créer un nouvel onglet Chrome dédié\n   2. [Si viewport spécifique] Redimensionner la fenêtre\n   3. [Si --gif] Démarrer l'enregistrement GIF\n   4. Naviguer vers l'URL\n   5. [Si --scenario] Exécuter le scénario : [description du scénario]\n   6. [Sinon] Explorer la page (tests basiques)\n   7. [Si --visual] Capturer des screenshots à chaque étape\n   8. [Si --debug] Analyser console logs et network requests\n   9. [Si --responsive] Répéter tests sur chaque viewport\n   10. [Si --gif] Arrêter enregistrement et exporter le GIF\n   11. Générer rapport détaillé\n\n   Options actives :\n   [Liste toutes les options avec leur signification]\n\n   Résultats attendus :\n   - Rapport Markdown : \u002Ftmp\u002Fclaude-*\u002Fscratchpad\u002Fui-test-report-[timestamp].md\n   [Si --visual] - Screenshots : \u002Ftmp\u002Fclaude-*\u002Fscratchpad\u002Fstep-*.png\n   [Si --gif] - GIF animé : téléchargé dans Downloads\u002Fui-test-recording-*.gif\n   [Si --responsive] - [X] screenshots (X par viewport)\n\n   Durée estimée : [estimer selon options : 30s simple, 1-2min avec scénario, 2-3min responsive, etc.]\n   ```\n\n3. **Demander confirmation**\n   - Afficher : \"Voulez-vous lancer ce test ? (oui\u002Fnon)\"\n   - Attendre réponse utilisateur\n   - Si \"oui\" ou \"yes\" ou \"o\" : continuer vers Phase 0\n   - Si \"non\" ou \"no\" ou \"n\" : arrêter et afficher \"Test annulé\"\n   - Toute autre réponse : redemander\n\n### Phase 0 : Initialisation (OBLIGATOIRE)\n\n1. **Récupérer le contexte Chrome**\n   ```\n   Utiliser mcp__claude-in-chrome__tabs_context_mcp avec createIfEmpty=true\n   ```\n\n2. **Créer un nouvel onglet dédié**\n   ```\n   Utiliser mcp__claude-in-chrome__tabs_create_mcp\n   Stocker le tabId pour toutes les opérations suivantes\n   ```\n\n3. **Présenter le plan à l'utilisateur**\n   ```\n   Utiliser mcp__claude-in-chrome__update_plan avec :\n   - domains: liste des domaines qui seront visités\n   - approach: liste des actions qui seront effectuées\n   ```\n\n4. **Configurer la fenêtre**\n   - Si `--viewport=WxH` : utiliser `resize_window` avec les dimensions custom\n   - Si `--mobile` : utiliser `resize_window` avec 375x667\n   - Si `--tablet` : utiliser `resize_window` avec 768x1024\n   - Si `--desktop` : utiliser `resize_window` avec 1920x1080\n   - Si `--responsive` : préparer liste des 3 viewports à tester (375x667, 768x1024, 1920x1080)\n   - Sinon (aucune option) : viewport par défaut 1920x1080\n\n5. **Démarrer l'enregistrement GIF (si --gif)**\n   ```\n   Utiliser gif_creator avec action=\"start_recording\"\n   ```\n\n### Phase 1 : Navigation et Exploration\n\n1. **Naviguer vers l'URL**\n   ```\n   Utiliser navigate avec l'URL fournie et le tabId\n   Attendre le chargement complet (wait 2-3 secondes)\n   ```\n\n2. **Capturer screenshot initial (si --visual ou --gif)**\n   ```\n   Utiliser computer avec action=\"screenshot\"\n   Sauvegarder avec nom descriptif\n   ```\n\n3. **Lire la structure de la page**\n   ```\n   Utiliser read_page pour obtenir l'arbre d'accessibilité\n   Identifier les éléments clés : formulaires, boutons, liens\n   ```\n\n4. **Mode debug (si --debug)**\n   ```\n   - Lire console_messages avec pattern pertinent\n   - Lire network_requests pour voir les appels API\n   - Identifier erreurs JavaScript ou requêtes échouées\n   ```\n\n### Phase 2 : Exécution du Scénario\n\n**Si `--scenario` est fourni :**\n\n1. **Analyser le scénario**\n   - Décomposer en étapes atomiques\n   - Identifier les éléments à manipuler\n   - Définir les validations attendues\n\n2. **Exécuter chaque étape**\n   ```\n   Pour chaque action :\n   a. find ou read_page pour localiser l'élément\n   b. computer (click\u002Ftype) ou form_input pour interagir\n   c. Attendre réaction (wait 1-2s)\n   d. Vérifier résultat (read_page, console, network)\n   e. Screenshot si --visual\n   ```\n\n3. **Validations**\n   - Vérifier les changements de page (navigate, URL)\n   - Vérifier les messages d'erreur ou de succès\n   - Vérifier les appels API (network_requests)\n   - Vérifier la console (pas d'erreurs JS)\n\n**Sinon (exploration libre) :**\n\n1. **Tests basiques**\n   - Vérifier que la page charge sans erreur 404\u002F500\n   - Vérifier absence d'erreurs JavaScript console\n   - Tester les liens principaux (clic sur 2-3 liens majeurs)\n   - Vérifier formulaires (remplir et valider un formulaire si présent)\n\n### Phase 3 : Tests Responsive (si --responsive)\n\n**Viewports à tester :**\n- Mobile : 375x667 (iPhone)\n- Tablette : 768x1024 (iPad)\n- Desktop : 1920x1080\n\n**Pour chaque viewport :**\n1. `resize_window` avec les dimensions\n2. `wait` 1 seconde pour le reflow\n3. `screenshot` avec nom incluant la taille\n4. `read_page` pour vérifier éléments visibles\n5. Valider :\n   - Pas d'overflow horizontal\n   - Éléments empilés correctement\n   - Pas d'éléments coupés\n   - Menu mobile fonctionnel (si \u003C 768px)\n\n### Phase 4 : Génération du Rapport\n\n1. **Arrêter l'enregistrement GIF (si --gif)**\n   ```\n   - gif_creator avec action=\"stop_recording\"\n   - gif_creator avec action=\"export\", download=true\n   - Attendre téléchargement\n   ```\n\n2. **Compiler les résultats**\n   - Résumé des actions effectuées\n   - Screenshots capturés (liste avec descriptions)\n   - Erreurs détectées (console, network, visuel)\n   - Validations réussies\u002Féchouées\n   - Recommandations d'amélioration\n\n3. **Créer rapport Markdown**\n   ```markdown\n   # Rapport de Test UI - [URL]\n\n   **Date :** [timestamp]\n   **Scénario :** [description ou \"exploration libre\"]\n   **Viewport(s) :** [liste]\n\n   ## Résumé\n   - Tests réussis : X\n   - Tests échoués : Y\n   - Avertissements : Z\n\n   ## Actions Effectuées\n   1. Navigation vers [URL]\n   2. [liste des actions]\n\n   ## Résultats par Catégorie\n\n   ### Navigation et Chargement\n   - Page charge en Xs\n   - [détails]\n\n   ### Fonctionnalités\n   - [résultats des interactions]\n\n   ### Console et Erreurs\n   - [erreurs JS trouvées]\n\n   ### Network\n   - [appels API, erreurs HTTP]\n\n   ### Visuel (si --visual)\n   - Screenshots : [liste avec chemins]\n\n   ### Responsive (si --responsive)\n   - Mobile : [résultat]\n   - Tablette : [résultat]\n   - Desktop : [résultat]\n\n   ## Recommandations\n   1. [amélioration 1]\n   2. [amélioration 2]\n\n   ## Fichiers Générés\n   - GIF : [chemin] (si --gif)\n   - Screenshots : [liste]\n   ```\n\n4. **Sauvegarder le rapport**\n   ```\n   Utiliser Write pour créer :\n   \u002Ftmp\u002Fclaude-*\u002Fscratchpad\u002Fui-test-report-[timestamp].md\n   ```\n\n## Gestion des Erreurs\n\n### Erreurs de Navigation\n- URL invalide -> arrêter et signaler\n- Page 404\u002F500 -> noter dans rapport et continuer\n- Timeout -> réessayer 1 fois, puis noter\n\n### Erreurs d'Interaction\n- Élément introuvable -> noter et passer au suivant\n- Clic échoué -> réessayer avec coordonnées ajustées\n- Formulaire non soumis -> vérifier console\u002Fnetwork\n\n### Erreurs Chrome\n- Tab invalide -> recreate tab avec tabs_create_mcp\n- Extension non responsive -> attendre 5s max puis timeout\n\n## Bonnes Pratiques\n\n1. **Toujours attendre après interactions**\n   - 1-2s après click\u002Ftype\n   - 2-3s après navigation\n   - Éviter les race conditions\n\n2. **Screenshots descriptifs**\n   - Nommer : `step-01-homepage.png`\n   - Capturer AVANT et APRÈS actions critiques\n\n3. **GIF Recording**\n   - Démarrer AVANT première action\n   - Arrêter APRÈS dernière validation\n   - Screenshot initial et final pour frames propres\n\n4. **Console Logs**\n   - Utiliser `pattern` pour filtrer (éviter spam)\n   - Chercher `error|warn|failed` si debug\n   - `clear=true` après lecture pour éviter doublons\n\n5. **Network Requests**\n   - Utiliser `urlPattern` si recherche spécifique\n   - Vérifier status codes (4xx, 5xx)\n   - Noter les API lentes (> 2s)\n\n## Notes Importantes\n\n- **TOUJOURS** créer un nouvel onglet (tabs_create_mcp) au début\n- **TOUJOURS** utiliser le même tabId pour toutes les opérations\n- **JAMAIS** réutiliser un tabId d'une session précédente\n- **TOUJOURS** présenter le plan (update_plan) avant d'agir\n- Sauvegarder tous les fichiers dans le scratchpad\n- Mode debug active automatiquement console + network\n- GIF enregistre toutes les interactions automatiquement\n",{"name":5,"model":60,"license":15,"version":61,"description":62,"allowed-tools":63},"sonnet","1.0.0","Teste automatiquement une interface utilisateur dans Chrome : navigation, clics, validation visuelle, tests fonctionnels, responsive, comportement et debug. Génère un rapport détaillé avec screenshots et optionnellement un GIF du parcours.\n",[64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,40],"mcp__claude-in-chrome__tabs_context_mcp","mcp__claude-in-chrome__tabs_create_mcp","mcp__claude-in-chrome__navigate","mcp__claude-in-chrome__read_page","mcp__claude-in-chrome__find","mcp__claude-in-chrome__computer","mcp__claude-in-chrome__form_input","mcp__claude-in-chrome__javascript_tool","mcp__claude-in-chrome__read_console_messages","mcp__claude-in-chrome__read_network_requests","mcp__claude-in-chrome__resize_window","mcp__claude-in-chrome__gif_creator","mcp__claude-in-chrome__update_plan","Write","Read","main","bb0335112ea0991dc1dc6a29fa5a861397a5a6f6","tester\u002Fskills\u002Fui-test","https:\u002F\u002Fgithub.com\u002Fatournayre\u002Fclaude-personas","https:\u002F\u002Fatournayre.github.io\u002Fclaude-personas\u002F","https:\u002F\u002Fgithub.com\u002Fatournayre","🔵, Back End Developer, @symfony  :heart:, @rectorphp :heart:,  \r\n:bug: fixer (creator sometimes 🤫), member of @afup","2026-03-02 23:42:20",{"source":8,"skillName":5,"commands":88,"prompt":98,"zipAvailable":99},[89,92,95],{"tool":90,"command":91},"npx","npx skills add atournayre\u002Fclaude-personas --skill \"tester:ui-test\"",{"tool":93,"command":94},"bunx","bunx skills add atournayre\u002Fclaude-personas --skill \"tester:ui-test\"",{"tool":96,"command":97},"pnpm","pnpm dlx skills add atournayre\u002Fclaude-personas --skill \"tester:ui-test\"","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fatournayre\u002Fclaude-personas\u002Fblob\u002Fmain\u002Ftester\u002Fskills\u002Fui-test\u002FSKILL.md",true,[],[102,116,123,131,142,150],{"skillNo":103,"name":104,"nameZh":6,"description":105,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":108,"publishedAt":55},"01M6CSZPR0W1K1S9BX3247CZJ1","twig:make-component","Génère un Twig Component Symfony UX (classe PHP + template Twig)","https:\u002F\u002Fgithub.com\u002Fatournayre\u002Fclaude-personas\u002Fblob\u002Fmain\u002Ftwig\u002Fskills\u002Fmake-component\u002FSKILL.md",[],[109,110,111,41,112,42,113,114,40,115],"twig:make component","component","edit","template","grep","ux","php",{"skillNo":117,"name":118,"nameZh":6,"description":119,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":120,"categories":121,"keywords":122,"publishedAt":55},"01M6CSZGQ8X9XNXRBYX0AA3CYE","symfony:voter","Genere un Voter de securite Symfony pour le controle d'acces granulaire","https:\u002F\u002Fgithub.com\u002Fatournayre\u002Fclaude-personas\u002Fblob\u002Fmain\u002Fsymfony\u002Fskills\u002Fvoter\u002FSKILL.md",[],[118,41,40,113,42,111],{"skillNo":124,"name":125,"nameZh":6,"description":126,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":127,"categories":128,"keywords":129,"publishedAt":55},"01M6CSZEJ3BNHCNZT18SYFGDME","symfony:message","Genere un Message Symfony Messenger avec son Handler pour traitement asynchrone","https:\u002F\u002Fgithub.com\u002Fatournayre\u002Fclaude-personas\u002Fblob\u002Fmain\u002Fsymfony\u002Fskills\u002Fmessage\u002FSKILL.md",[],[130,125,41,111,40,42,113],"message",{"skillNo":132,"name":133,"nameZh":6,"description":134,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":135,"categories":136,"keywords":140,"publishedAt":55},"01M6CSZBWSK9M6YMJX886BVWYF","symfony:mailer","Genere un email Symfony (TemplatedEmail ou Notification) avec template Twig","https:\u002F\u002Fgithub.com\u002Fatournayre\u002Fclaude-personas\u002Fblob\u002Fmain\u002Fsymfony\u002Fskills\u002Fmailer\u002FSKILL.md",[137],{"categoryNo":138,"categoryName":139,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000005","邮件与沟通",[133,141,40,112,113,42,41,111],"email",{"skillNo":143,"name":144,"nameZh":6,"description":145,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":146,"categories":147,"keywords":148,"publishedAt":55},"01M6CSZ9DXMYZ9HTRE8A324AWG","symfony:form","Genere un FormType Symfony avec contraintes de validation et options","https:\u002F\u002Fgithub.com\u002Fatournayre\u002Fclaude-personas\u002Fblob\u002Fmain\u002Fsymfony\u002Fskills\u002Fform\u002FSKILL.md",[],[144,149,49,40,113,42,41,111],"options",{"skillNo":151,"name":152,"nameZh":6,"description":153,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":154,"categories":155,"keywords":156,"publishedAt":55},"01M6CSZ73A0RY9G0WY091HJGYV","symfony:event","Genere un Event Symfony + EventSubscriber ou EventListener","https:\u002F\u002Fgithub.com\u002Fatournayre\u002Fclaude-personas\u002Fblob\u002Fmain\u002Fsymfony\u002Fskills\u002Fevent\u002FSKILL.md",[],[152,113,42,41,111,40]]