Aller au contenu

Tester votre application web dans un vrai navigateur

Recliquer les mêmes parcours après chaque modification est lent, et des bugs passent quand même.

3 étapesIntermédiaire
Claude CodeCursorPlaywrightGitHub

Comment ça se connecte

Votre IA accède à vos apps via de petits connecteurs appelés serveurs MCP.
Votre IA
Claude CodeCursor
Connecteurs
PlaywrightGitHub
Vos apps
GitHub

Cette configuration s'adresse aux développeurs et ingénieurs QA qui retestent les mêmes parcours utilisateur après chaque modification. L'agent pilote un vrai navigateur via le serveur Playwright MCP de Microsoft, suit le parcours que vous décrivez en langage courant et signale ce qui échoue. Vous obtenez un rapport réussi ou échoué par parcours, et des issues GitHub avec les étapes pour reproduire tout ce qui est cassé.

Mise en place

3 étapes. Ouvrez-en une pour les détails.
  1. 1Ajouter Playwright MCP

    Enregistrez le serveur Playwright MCP dans Claude Code ou Cursor avec la commande npx @playwright/mcp@latest. Au premier lancement, il peut vous demander d'installer un navigateur ; suivez l'invite ou lancez npx playwright install. Demandez à l'agent d'ouvrir votre URL de staging et de décrire la page pour vérifier que tout fonctionne.

    Astuce: Ajoutez l'option --headless si vous n'avez pas besoin de voir le navigateur.

  2. 2Décrire le parcours

    Décrivez le parcours étape par étape en langage courant : l'URL, le compte de test, ce qu'il faut cliquer ou saisir, et à quoi ressemble un résultat correct. L'agent lit la page via des instantanés d'accessibilité : des libellés de boutons et des noms de champs clairs l'aident à trouver les bons éléments. Demandez-lui d'indiquer pour chaque étape si elle a réussi ou échoué, avec le texte de l'erreur ou une capture d'écran en cas de problème.

    Astuce: Écrivez le résultat attendu pour chaque étape, sinon l'agent doit deviner ce que « ça marche » veut dire.

  3. 3Signaler les échecs

    Connectez le serveur MCP de GitHub avec le droit de créer des issues dans votre dépôt. Demandez à l'agent d'ouvrir une issue par échec avec les étapes pour reproduire, le résultat attendu et le résultat obtenu, le navigateur utilisé et les éventuelles erreurs de console. Relisez chaque issue avant d'approuver sa création.

    Astuce: Demandez à l'agent de transformer un parcours qui casse souvent en fichier de test Playwright à lancer dans votre CI.

Ensuite, demandez

Quoi dire une fois connecté. Cliquez pour copier.
Demandez à Claude Code…Claude Code

Bon à savoir

Ce qu'il vous faut, ce qu'il ne fait pas et comment rester en sécurité.
Ce qu'il vous faut
  • Node.js installé en local
  • Claude Code ou Cursor
  • Environnement de staging et comptes de test
  • Accès au dépôt GitHub pour créer des issues
Limites
  • L'agent peut mal interpréter des pages complexes ou mal étiquetées et cliquer sur le mauvais élément.
  • Les exécutions exploratoires sont plus lentes et moins reproductibles qu'une suite de tests scriptée.
  • Les CAPTCHA, les demandes de double authentification et les étapes de vérification par e-mail demandent généralement un contournement manuel.
Restez en sécurité
  • Lancez-le sur le staging, pas en production.
  • Utilisez des comptes de test, jamais les identifiants de vrais clients.

Questions fréquentes

Des réponses claires avant de commencer
Est-ce que cela remplace ma suite de tests Playwright ?
Non. L'agent explore les parcours à partir d'instructions en langage courant, ce qui est utile pour des vérifications rapides et les nouvelles fonctionnalités. Pour les vérifications qui doivent tourner à chaque commit, demandez-lui d'écrire un fichier de test Playwright et lancez-le dans votre CI.
Quels navigateurs peut-il utiliser ?
Playwright MCP utilise Chromium par défaut et peut être configuré pour utiliser Firefox, WebKit ou un Chrome ou Edge installé. Choisissez le navigateur dans les options de ligne de commande du serveur.
Peut-on le lancer sans risque en production ?
Lancez-le sur le staging avec des comptes de test. L'agent clique vraiment sur les boutons et envoie vraiment les formulaires : en production, il pourrait passer des commandes ou envoyer des e-mails.
Est-ce payant ?
Playwright et son serveur MCP sont gratuits et open source. Vous ne payez que l'usage de votre hôte IA, comme Claude Code ou Cursor.

Outils de cette configuration

Les produits concernés
GitHub: Hébergement de code, tickets et pull requests.
GitHub

GitHub est l'endroit où la plupart des équipes logicielles gardent leur code, relisent les pull requests et suivent les tickets. Actions gère la CI et les déploiements, Projects la planification, et Copilot apporte l'aide de l'IA au code. Il se connecte à Slack, Linear et Jira. Les dépôts publics et privés sont gratuits, avec des offres payantes pour les grandes équipes et la sécurité.

Formule gratuiteEssayer