Vibetest - Utiliser le serveur MCP : Tests d'assurance qualité basés sur l'IA

Prêt à éliminer ces bogues de site Web ennuyeux avec Vibetest-use MCP ? Ce joyau open-source, alimenté par Browser-Use, vous permet de déployer des agents d'IA pour explorer votre site, détecter les erreurs 404, les boutons morts et les problèmes d'interface utilisateur en moins d'une minute. Je l'ai trouvé sur GitHub, et c'est un véritable révolutionnaire pour les tests automatisés. Avec une seule commande, vous pouvez lancer plusieurs agents pour tester votre site—local ou en direct. Dans ce tutoriel, je vais vous montrer comment configurer Vibetest-use MCP, exécuter des tests sur un site local ou en direct, et rendre votre processus d'AQ (assurance qualité) un jeu d'enfant. Écrasons ces bogues !

💡

Vous travaillez avec des API ou documentez des projets ? Procurez-vous APIdog pour concevoir, tester et partager des documents API sans effort—parfait pour vos flux de travail Vibetest-use MCP !

button

Pourquoi Vibetest-use MCP est un super-héros de l'AQ

Vibetest-use MCP est un outil alimenté par Browser-Use qui automatise les tests d'AQ en déployant des agents d'IA pour explorer les sites Web et signaler les problèmes tels que les liens brisés, les boutons non réactifs ou les erreurs d'interface utilisateur. Construit sur le Model Context Protocol (MCP), il s'intègre à Browser-Use pour contrôler les navigateurs (Chrome, Firefox, etc.) via Playwright, garantissant des tests approfondis. Le dépôt GitHub met en évidence sa capacité à tester n'importe quelle URL—sites en direct comme https://example.com ou configurations locales comme localhost:3000—avec des nombres d'agents configurables (par exemple, 3, 5 ou 10) pour des analyses plus approfondies. Des tests d'un site de développement à une application de production, Vibetest-use MCP transforme l'AQ en une promenade de santé.

Configuration de Vibetest-use MCP

Mettons Vibetest-use MCP en marche. C'est facile pour les débutants, et je vais rester clair !

1. Cloner le référentiel et configurer l'environnement virtuel :

Clonez le dépôt et préparez un environnement Python :

git clone https://github.com/browser-use/vibetest-use.git
cd vibetest-use
uv venv
source .venv/bin/activate  # macOS/Linux
.venv\Scripts\activate     # Windows
uv pip install -e .

Cela installe les dépendances et configure l'environnement du serveur MCP.

2. Configurer vos variables d'environnement :

Vibetest-use MCP a besoin d'une clé API Google pour certaines fonctionnalités. Exportez-la ou ajoutez-la à .env :

export GOOGLE_API_KEY="your_google_api_key_here"

Alternativement, créez .env :

GOOGLE_API_KEY=your_google_api_key_here

Obtenez une clé sur console.cloud.google.com.

3. Exécuter le serveur MCP :

Démarrez le serveur :

.venv/bin/vibetest-mcp

Cela lance le serveur MCP, prêt à accepter les commandes de test.

J'ai fait ça en 10 minutes—rapide et sans douleur !

Exemples de cas d'utilisation pour Vibetest-use MCP

Prêt à tester avec Vibetest-use MCP ? Voici trois façons d'attraper les bogues rapidement !

1. Tester un site Web en direct avec plusieurs agents :

Testez un site en direct comme https://example.com avec 6 agents :

vibetest my website with 6 agents: https://example.com

Cinq agents Browser-Code explorent simultanément, vérifiant les liens brisés, les bogues d'interface utilisateur ou les problèmes d'accessibilité. Attendez-vous à une sortie comme : « 404 at /page-not-found, unresponsive button at /submit. »

2. Tester un site de développement local :

Testez votre serveur de développement local (par exemple, localhost:3000) :

run vibetest on localhost:3000

Cela détecte les problèmes tôt, comme un div mal aligné que j'ai trouvé sur un site de test !

3. Tests sans interface graphique avec un nombre d'agents personnalisé :

Pour CI/CD, exécutez sans interface graphique avec 10 agents :

run a headless vibetest on localhost:8080 with 10 agents

Le mode sans interface graphique s'exécute sans navigateurs visibles, enregistrant les résultats (par exemple, --output results.json). Parfait pour les pipelines automatisés.

Ces tests ont pris <60 secondes chacun—Vibetest-use MCP est un bolide !

Intégration de Vibetest-use MCP avec Claude Code Desktop

Vous voulez exécuter des tests Vibetest-use MCP depuis Claude Code Desktop ? Voici comment l'intégrer.

1. Ajouter le serveur MCP Vibetest à Claude Desktop :

Utilisez l'interface de ligne de commande de Claude :

claude mcp add vibetest /full/path/to/vibetop-use/.venv/bin/vibetest-mcp -e GOOGLE_API_KEY="your_google_api_key"

Cela enregistre le serveur auprès de Claude Desktop, en transmettant votre clé API Google.

2. Vérifier la connexion :

Ouvrez Claude Desktop et tapez :

/mcp

Vérifiez que le serveur vibetest s'affiche comme connecté.

3. Exécuter les commandes Vibetop :

Dans Claude Desktop, entrez :

Vibetest my website with 5 agents: https://example.com
Run vibetop on localhost:3000

Claude transmet les commandes au serveur MCP, en renvoyant les résultats des tests.

J'ai testé un site via Claude Desktop, et il a signalé un bogue de formulaire instantanément—super élégant !

Utilisation de Vibetest-use MCP avec Cursor

Vous préférez l'interface élégante de Cursor ? Voici comment configurer Vibetest-use MCP pour les tests.

1. Ajouter le serveur MCP via l'interface utilisateur des paramètres de Cursor :

Ouvrez Paramètres de Cursor > MCP (barre latérale gauche).
Cliquez sur Ajouter un serveur ou sur le bouton « + ».
Ajoutez cette configuration (ajustez les chemins et la clé) :

{
  "mcpServers": {
    "vibetest": {
      "command": "/full/path/to/vibetop-use/.venv/bin/vibetest-mcp",
      "env": {
        "GOOGLE_API_KEY": "your_google_api_key"
      }
    }
  }
}

Enregistrez et redémarrez Cursor si nécessaire.

2. Utiliser les commandes Vibetest dans Cursor :

Dans l'interface de chat ou de commande de Cursor, essayez :

Vibetest my website with 5 agents: https://example.com
Run vibetest on localhost:3000
Run a headless vibetest on localhost:8080 with 10 agents

Cursor communique avec le serveur MCP, en affichant les résultats en ligne.

J'ai exécuté un test sans interface graphique dans Cursor, et la sortie JSON était limpide—le paradis de l'AQ !

Personnalisation de Vibetest-use MCP pour vos besoins

Vous voulez modifier Vibetest-use MCP ? Voici comment le personnaliser.

1. Ajuster le nombre d'agents :

Utilisez --agents 2 pour des analyses rapides ou --agents 10 pour des tests approfondis. Plus d'agents signifient une meilleure couverture, mais une utilisation de la mémoire plus élevée.

2. Cibler des fonctionnalités spécifiques :

Modifiez prompts.py pour tester des flux spécifiques (par exemple, le processus de paiement) :

prompt = "Vibetest with 3 the checkout flow on {website}. Verify cart updates and payment buttons."

Exécuter :

uv run vibetest --url https://shop.com --prompt "Test checkout flow"

3. Intégrer avec CI/CD (Ubuntu) :

Ajouter à GitHub Actions :

name: QA with Vibetest-use
on: [push]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: |
          curl -LsSf https://astral.sh/uv/install.sh | sh
          uv venv
          source .venv/bin/activate
          uv pip install -e .
          uv pip install playwright
          uv run playwright install chromium
          uv run vibetest --url http://localhost:3000 --agents 5 --output results.json
      env:
        GOOGLE_API_KEY: ${{ secrets.GOOGLE_API_KEY }}

4. Utiliser DeepSeek pour l'intelligence :

Associer avec DeepSeek :

uv run vibetest --url https://example.com --llm deepseek-chat

Améliore le raisonnement pour les tests complexes.

Explorer les fonctionnalités de Vibetest-use MCP

Vibetest-use MCP regorge de fonctionnalités d'AQ. Découvrez-les :

Tests parallèles : Exécutez plus de 10 agents pour des analyses de <60 secondes, comme annoncé sur X.

2. Tests multi-navigateurs : Testez Firefox/Safari via playwright.config.ts :

{ browserName: 'firefox' }

3. Mode de recherche approfondie : Utilisez mcp-browser-cli --deep-research pour l'analyse UX, en enregistrant les rapports Markdown.

4. Communauté : Rejoignez le Discord ou GitHub de Browser-Code (38 étoiles) pour partager des idées.

J'ai détecté un problème uniquement sur Firefox lors d'un test—Vibetest-use MCP est un champion de l'AQ !

En résumé : Maîtrisez Vibetest-use MCP

Vous avez déployé Vibetest-use MCP pour automatiser l'AQ (assurance qualité) comme un pro ! De la configuration aux tests de sites en direct, de serveurs locaux et à l'intégration avec Claude Desktop ou Cursor, vous êtes prêt à garder vos applications sans bogues. Essayez d'expérimenter avec plus d'agents, DeepSeek ou CI/CD, et assurez-vous de documenter vos API avec APIdog. Partagez vos succès Vibetest-use MCP sur X ou GitHub——je suis ravi de voir votre jeu d'AQ s'envoler ! 🚀

button