🧪 WebTester MCP

🇫🇷 Français | 🇬🇧 English

Un serveur MCP (Model Context Protocol) qui permet à Claude de tester des sites web comme un humain : cliquer, remplir des formulaires, capturer des screenshots, et analyser les performances.

🎯 Qu'est-ce que c'est ?

WebTester est un pont entre Claude (l'IA) et Playwright (automation de navigateur). Ça permet à Claude de naviguer sur n'importe quel site web et de faire des tests automatiques.

En gros : Tu demandes à Claude "va tester ce site", et il le fait vraiment dans un vrai navigateur !

✨ Ce qu'il peut faire

• 🖼️ Screenshots - Capture d'écran complète ou d'un élément spécifique
• 🖱️ Clics - Cliquer sur n'importe quel bouton/lien
• 📝 Formulaires - Remplir automatiquement des champs (texte, select, checkbox, etc.)
• ⏱️ Wait For - Attendre des conditions (élément visible/caché, navigation, timeout)
• 📄 Extraction HTML - Récupérer le HTML complet ou d'éléments spécifiques
• 🔧 Exécution JS - Exécuter du JavaScript personnalisé dans le navigateur
• 🐛 Console - Voir toutes les erreurs JavaScript
• 🌐 Réseau - Analyser toutes les requêtes HTTP (vitesse, erreurs, taille)
• ⚡ Performance - Mesurer FCP, TTI, temps de chargement
• 🧹 Session - Nettoyer cookies, cache, localStorage

🚀 Installation

Prérequis

• Node.js >= 18
• npm

Setup rapide

# 1. Clone le projet
cd /path/to/Website_tester

# 2. Installe les dépendances
npm install

# 3. Installe le navigateur Chromium
npm run install-browsers

# 4. Compile le code
npm run build

⚙️ Configuration

Pour Claude Code (CLI)

claude mcp add --scope user --transport stdio webtester -- node /path/to/Website_tester/dist/index.js

Vérifie que c'est bien installé :

claude mcp list

Pour Claude Desktop

Ajoute ça dans ~/Library/Application Support/Claude/claude_desktop_config.json :

{
  "mcpServers": {
    "webtester": {
      "command": "node",
      "args": ["/path/to/Website_tester/dist/index.js"]
    }
  }
}

🎮 Comment l'utiliser

Exemple 1 : Test simple

Utilise webtester pour :
1. Aller sur https://example.com
2. Prendre un screenshot
3. Me dire s'il y a des erreurs JavaScript

Exemple 2 : Tester un formulaire

Teste le formulaire de contact sur https://monsite.com :
1. Remplis le champ "nom" avec "Test"
2. Remplis "email" avec "[email protected]"
3. Clique sur le bouton "Envoyer"
4. Prends un screenshot avant et après

Exemple 3 : Analyser les performances

Analyse les perfs de https://monsite.com :
- Temps de chargement
- Requêtes lentes (> 1 seconde)
- Erreurs réseau
- Core Web Vitals

🛠️ Outils disponibles (12 au total)

| Outil | Description | |-------|-------------| | navigate | Va sur une URL | | screenshot | Prend une capture d'écran | | click | Clique sur un élément | | fill_form | Remplit un formulaire | | get_page_info | Info de la page (titre, URL, meta) | | wait_for | ⭐ NOUVEAU - Attend une condition (selector, navigation, timeout, networkidle) | | get_html | ⭐ NOUVEAU - Extrait le HTML (page complète, innerHTML, outerHTML) | | execute_js | ⭐ NOUVEAU - Exécute du JavaScript dans le contexte navigateur | | get_console | Récupère les logs console | | get_network | Liste les requêtes réseau | | get_performance | Mesure les performances | | clear_session | Nettoie cookies/cache/logs |

📁 Structure du projet

Website_tester/
├── src/              # Code source TypeScript
├── dist/             # Code compilé (prêt à l'emploi)
├── screenshots/      # Screenshots sauvegardés ici
├── CLAUDE.md         # Doc technique détaillée
└── package.json      # Config npm

🔧 Commandes utiles

# Rebuild après modifications
npm run build

# Mode dev (auto-reload)
npm run dev

# Lister les serveurs MCP
claude mcp list

# Supprimer le serveur
claude mcp remove webtester -s user

🐛 Problèmes courants

Le serveur ne se lance pas

# Vérifie que le build est OK
npm run build
# Réinstalle les navigateurs
npm run install-browsers

Les screenshots ne se sauvent pas

# Crée le dossier manuellement
mkdir -p screenshots
chmod 755 screenshots

Claude ne voit pas le serveur

# Vérifie la config
claude mcp list
# Redémarre Claude Desktop (si tu l'utilises)

🤝 Contribution

Le projet est simple et ouvert. Si tu veux améliorer un truc :

1. Fork le repo
2. Crée ta branche
3. Fais tes modifs
4. Envoie une PR

📄 Licence

MIT - Fais ce que tu veux avec, c'est open source !

💡 Exemples d'utilisation réelle

• Tester un site en développement (localhost)
• Vérifier qu'un formulaire fonctionne
• Détecter les erreurs JS en production
• Mesurer les perfs avant/après optimisation
• Automatiser des tests de non-régression

🙏 Remerciements

• Playwright pour l'automation navigateur
• Anthropic pour le protocole MCP
• Monamedia pour le développement

Fait avec ❤️ pour rendre le testing web accessible à tous