# 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.

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é.

## Étapes

1. **Ajouter 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. **Dé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. **Signaler 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.

## Prompts à essayer

- Ouvre https://staging.example.com, inscris-toi avec un nouvel e-mail de test, vérifie que tu arrives sur le tableau de bord et rends compte de chaque étape.
- Connecte-toi en tant que test-buyer@example.com, ajoute deux articles au panier, applique le code TEST10 et vérifie que le total se met à jour. Signale tout ce qui échoue.
- Remplis le formulaire de contact avec un e-mail invalide et vérifie que le message d'erreur apparaît à côté du champ.
- Relance le parcours de paiement avec une fenêtre de 375 px de large et dis-moi ce qui casse sur mobile.
- Pour chaque échec, ouvre une issue GitHub dans acme/web avec les étapes pour reproduire et les erreurs de console.

## 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.

## Notes de sécurité

- Lancez-le sur le staging, pas en production.
- Utilisez des comptes de test, jamais les identifiants de vrais clients.

## Serveurs MCP

- [Playwright MCP Server](https://github.com/microsoft/playwright-mcp): browser-control
- [GitHub MCP Server](https://github.com/github/github-mcp-server): repository-read, issue-write, pull-request-write

## Questions fréquentes

**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

- **[GitHub](https://suiteintent.com/t/github?m=FR)**: Hébergement de code, tickets et pull requests. · Idéal pour: Équipes qui relisent le code par pull request · Offre gratuite · 10000