REX : MCP et agents IA de Playwright, un game changer pour la QA ?

Ce week-end, j’ai laissé une IA piloter mon navigateur grâce à Playwright.
Oui, littéralement.
Et le plus fou… c’est que ça marche. Voici ce que j’ai appris.

Contexte du projet

Je bosse sur un projet perso avec Playwright dans VS Code, avec Github Copilot branché et l’extension Playwright Test. Rien d’exotique : mes tests naviguent sur Amazon, cherchent un produit, cliquent, vérifient des champs…

Mais depuis la release 1.56, Playwright propose les Agents IA via le MCP Server (Model Context Protocol).

Et là, tout change.

MCP Server, c’est quoi déjà ?

Le Model Context Protocol, c’est un standard open source servant à connecter des applications API à des systèmes externes. Pensez-le comme un port USB-C universel pour les outils de dev.

Le MCP va se connecter à Notion, Github, votre calendrier Google par exemple. Il existe déjà plus d’un millier de serveurs MCP officiels disponibles, développés par les entreprises elles-mêmes.

Installation de MCP Server

Sur VS Code, l’installation est ultra-simple. Merci à @Debbie O’Brien pour ses tutos. Si vous ne la connaissez pas, n’hésitez pas à jeter un œil, c’est vraiment excellent.

Première chose à faire, vérifiez d’être à jour avec votre version de Playwright. Ensuite, rendez-vous sur le github officiel de Microsoft Playwright MCP. Vous scrollez un peu, et vous avez un bouton pour l’installer sur VS Code. Redirigé sur VS Code, on l’installe. Il apparaît désormais dans vos outils installés dans la partie basse des Extensions.

Premiers pas avec l’IA de Playwright

Ensuite, nous avons un peu de configuration à faire… Mais non, je rigole ! Tout est prêt. Je vous disais plus haut que je suis bluffé par l’accessibilité des outils sur Playwright. Pour le lancer, allez dans la roue, cliquez sur Start server, et le tour est joué.

Vous avez maintenant un mode Agent intégré à votre fenêtre de chat Copilot. Vous le sélectionnez et voilà ! Mon agent est désormais autonome et peut ouvrir mon navigateur. Dans le chat, je lui demande : “Explore mon site Amazon”. Il me demande la permission. Et il le fait.

Je peux lui demander de réaliser un parcours client ou faire de l’exploration sur mon site. Les limites, c’est un peu … Votre imagination et la qualité de vos prompts. Même si, pour ne rien vous cacher, ça fait un peu froid dans le dos pour un testeur de voir la machine prendre le contrôle de cette manière. 

Les agents IA pour Playwright

Si cette première partie vous a un peu impressionné (moi beaucoup, mais je suis un enthousiaste), vous n’êtes pas prêts pour ce qui va suivre. Les agents IA Playwright sont disponibles depuis seulement une semaine.

Mais avant de développer, revenons à ce qu’est un agent IA. Le MCP Server vous permet d’accéder à cette fonctionnalité dans la fenêtre de Copilot dans votre VS Code. Mais ça sert à quoi au juste ?

Un agent IA, c’est un programme autonome qui va observer, raisonner, décider et agir. Il va par exemple parcourir une app, comme on l’a vu, lire un cahier des charges et générer des cas de tests, etc.

Les équipes de Playwright ont travaillé sur trois agents capables de réaliser des tâches bien précises dans notre domaine de la qualité logicielle.

Installation des Agents IA de Playwright

Pour les installer, j’ai encore suivi les tutos de Debbie. Et je me suis penché sur la documentation officielle. Une commande suffit dans le terminal : npx playwright init-agents –loop=vscode.

À adapter en fonction de votre IDE.

Dans la console, vous voyez que vos agents sont installés. Ils sont au nombre de trois : le planner, le generator, et le healer. Leur comportement est décrit dans trois fichiers Markdown installés dans votre projet. 

L’agent planner de Playwright

Chaque fichier Markdown décrit le comportement et les capacités de votre agent. Il fournit une description et un accès à des outils. Cet accès est configurable, vous pouvez en ajouter ou en retirer si vous le souhaitez.

On y retrouve également le rôle de notre agent, comme nous le faisons lorsque nous donnons des instructions à notre LLM préféré. Cette persona va guider l’agent. Enfin, il y a toute une liste de tâches à réaliser.

Notre agent planner va donc pouvoir explorer votre application web et vous fournir un plan de test. Je clique sur Allow et il me crée le document. Pour Amazon, il m’a généré un fichier de test de 400 lignes ! Et franchement, c’est quali.

L’agent generator de Playwright

Comme son nom l’indique, cet agent va produire les scripts Playwright. Vous allez pouvoir fournir le plan de test généré par le planner et le fournir comme contexte au generator (il va d’ailleurs automatiquement le récupérer).

Je vous conseille d’y aller doucement. Ne demandez pas dans un prompt de tout faire d’un seul coup. Découpez plutôt par tâches successives en suivant les différentes parties de votre plan de test. Et indiquez à l’agent de vérifier que le test fonctionne.

Vous permettez à l’agent de créer chaque fichier de test. Il suit très bien le plan de test et vous génère les scripts correspondants. Vous testez ensuite en lançant ce qui a été produit. Et c’est là que ça commence à piquer un peu. Certains tests ne vont pas fonctionner. Par exemple à cause de mauvais locators. Mais pas de panique, car il y a encore un agent pour ça …

L’agent healer de Playywright

Cet agent va se charger de réparer les tests cassés. Et alors là, ça se complique. Je ne suis pas parti d’un projet from scratch et ma configuration n’était sans doute pas la plus propre. Quoi qu’il en soit, cet agent healer (guérisseur en français) est chargé de réparer des tests. Mais il semble qu’il n’a pas encore tout compris à la QA, car il le fait en mode grosse brute. 

Il va vous créer des nouveaux dossiers, des nouveaux fichiers afin de contourner des problèmes qui ne sont liés qu’à la configuration de votre projet (le chemin vers les fichiers de tests ou leur nommage par exemple avec spec). Et il recommence quand il échoue …

Bref, ce n’est pas le plus efficace de ces trois agents. Mais c’est encore un Work In Progress chez Microsoft.

Mon sentiment sur les usages d’agents IA avec Playwright

En conclusion, je peux vous dire que je suis un peu mitigé. Je suis très agréablement surpris de la capacité des équipes de Microsoft de nous fournir aussi simplement des outils avec un potentiel aussi dingue.

Maintenant, sur les outils en eux-mêmes, je pense qu’il faut être prudent et les apprivoiser en douceur. Ils sont encore jeunes et doivent être encadrés. Les brancher sur un environnement non siloté peut représenter un risque très sérieux pour une entreprise.

Je peux me tromper, mais je suis convaincu que ces agents (s’ils ne sont pas déjà présents) vont arriver dans nos environnements professionnels dans un ou deux ans, tant je crois à leur potentiel. Alors, emparez-vous-en, expérimentez et constatez leurs limitations par vous-mêmes.

On parle beaucoup d’IA générative dans le testing. Mais avec Playwright, on commence à toucher du doigt une nouvelle ère : les tests pilotés par l’IA. Et vous, vous laisseriez un agent IA piloter vos tests dans vos projets ?

Romuald vous forme à l’utilisation de l’IA avec Playwright

Si vous souhaitez combiner votre utilisation de Playwright avec l’IA, Romuald donne des formations sur les dernières features de l’outil et apprenez à combiner l’usage de Playwright avec l’IA.

N’hésitez pas à consulter les fiches formation et nous contacter pour plus de renseignements !

• Playwright augmentée par l’IA – niveau débutant – formation sur 4 jours
• Playwright augmentée par l’IA – niveau avancé – formation sur 3 jours

Sources : 

• Model Context Protocol : https://modelcontextprotocol.io/docs/getting-started/intro
• Github de Microsoft Playwright MCP : https://github.com/microsoft/playwright-mcp?tab=readme-ov-file
• Documentation officielle des agents Playwright : https://playwright.dev/docs/test-agents