From tester
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.
How this skill is triggered — by the user, by Claude, or both
Slash command
/tester:ui-testsonnetThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
**IMPORTANT : Exécute ce workflow étape par étape de manière proactive.**
IMPORTANT : Exécute ce workflow étape par étape de manière proactive.
/tester: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 confirmationExemples :
# Test simple de navigation
/tester:ui-test https://example.com
# Test d'un scénario de login avec GIF
/tester:ui-test https://app.example.com/login --scenario="login avec credentials valides" --gif
# Test responsive (3 tailles : mobile + tablette + desktop)
/tester:ui-test https://example.com --responsive --visual
# Test mobile uniquement
/tester:ui-test https://m.example.com --mobile --visual
# Test desktop uniquement
/tester:ui-test https://example.com --desktop
# Debug d'une page avec erreurs
/tester:ui-test https://example.com/broken-page --debug
# Voir ce qui sera fait avant de lancer
/tester:ui-test https://example.com --mobile --visual --help
IMPORTANT : Cette phase s'exécute UNIQUEMENT si l'option --help est présente.
Analyser l'URL et les options
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.]
Demander confirmation
Récupérer le contexte Chrome
Utiliser mcp__claude-in-chrome__tabs_context_mcp avec createIfEmpty=true
Créer un nouvel onglet dédié
Utiliser mcp__claude-in-chrome__tabs_create_mcp
Stocker le tabId pour toutes les opérations suivantes
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
Configurer la fenêtre
--viewport=WxH : utiliser resize_window avec les dimensions custom--mobile : utiliser resize_window avec 375x667--tablet : utiliser resize_window avec 768x1024--desktop : utiliser resize_window avec 1920x1080--responsive : préparer liste des 3 viewports à tester (375x667, 768x1024, 1920x1080)Démarrer l'enregistrement GIF (si --gif)
Utiliser gif_creator avec action="start_recording"
Naviguer vers l'URL
Utiliser navigate avec l'URL fournie et le tabId
Attendre le chargement complet (wait 2-3 secondes)
Capturer screenshot initial (si --visual ou --gif)
Utiliser computer avec action="screenshot"
Sauvegarder avec nom descriptif
Lire la structure de la page
Utiliser read_page pour obtenir l'arbre d'accessibilité
Identifier les éléments clés : formulaires, boutons, liens
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
Si --scenario est fourni :
Analyser le scénario
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
Validations
Sinon (exploration libre) :
Viewports à tester :
Pour chaque viewport :
resize_window avec les dimensionswait 1 seconde pour le reflowscreenshot avec nom incluant la tailleread_page pour vérifier éléments visiblesArrêter l'enregistrement GIF (si --gif)
- gif_creator avec action="stop_recording"
- gif_creator avec action="export", download=true
- Attendre téléchargement
Compiler les résultats
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]
Sauvegarder le rapport
Utiliser Write pour créer :
/tmp/claude-*/scratchpad/ui-test-report-[timestamp].md
Toujours attendre après interactions
Screenshots descriptifs
step-01-homepage.pngGIF Recording
Console Logs
pattern pour filtrer (éviter spam)error|warn|failed si debugclear=true après lecture pour éviter doublonsNetwork Requests
urlPattern si recherche spécifiquenpx claudepluginhub atournayre/claude-personas --plugin testerRuns AI-powered adversarial UI testing via the browse CLI — analyzes git diffs, explores full apps, and tests functional correctness, accessibility, responsive layout, and UX heuristics. Use for QA pull requests, auditing accessibility, or exploratory testing.
Audits web app UX by dogfooding as user persona: tracks emotional friction, click efficiency, resilience to back/refresh, return intent. Uses Playwright/Chrome MCP for live sites, outputs ranked reports.
Drives a real Chrome session against a running web app to find bugs, UX issues, a11y problems, and perf regressions. Outputs structured findings JSON for downstream triage.