Playwright CLI vs MCP Server : Lequel est VRAIMENT meilleur pour Claude Code ?

BBetter Stack
Computing/SoftwareInternet Technology

Transcript

00:00:00Playwright CLI est la toute nouvelle façon d'utiliser Playwright avec votre agent de codage, vous permettant de gérer
00:00:04le stockage local et de session, de prendre des instantanés, de gérer les onglets – en gros, toute la puissance de
00:00:09l'ergomoteur Playwright directement dans votre terminal.
00:00:12Mais pourquoi utiliser cela au lieu du serveur Playwright MCP ?
00:00:17En fait, pourquoi de plus en plus de CLI sont-elles créées à partir d'outils qui étaient auparavant des serveurs MCP ?
00:00:22Abonnez-vous et découvrons cela ensemble.
00:00:24Commençons par tester à la fois la CLI Playwright et le serveur MCP sur une tâche simple.
00:00:31Je vais lui demander de m'aider à tester un outil sur lequel je travaille pour télécharger des vidéos
00:00:35depuis Twitter.
00:00:36Je vais demander à Playwright de récupérer le lien de ce tweet, de le coller ici, d'extraire la
00:00:40vidéo, puis d'attendre 10 secondes avant de prendre une capture d'écran, et enfin de vider le stockage local
00:00:45pour que l'agent suivant reparte sur une base saine.
00:00:48Nous allons d'abord essayer avec la CLI Playwright en utilisant Claude Code, et si nous l'installons, nous
00:00:54devrions avoir la compétence disponible ici.
00:00:56Remarquez qu'elle ne consomme que 68 tokens.
00:00:59Maintenant, je vais lui donner ce prompt, qui dit explicitement à l'agent d'utiliser la
00:01:03compétence Playwright CLI, juste pour simplifier les choses.
00:01:06J'appuie sur Entrée, il charge la compétence, insère l'URL dans le champ de texte, clique sur
00:01:11"Extract Video", puis il va attendre 10 secondes.
00:01:13Il a pris la capture d'écran, vidé le stockage local et fermé le navigateur.
00:01:17C'est terminé, il indique que la capture d'écran est enregistrée ici, et si on regarde,
00:01:21on peut voir que la vidéo a été téléchargée avec succès.
00:01:24Et l'ensemble n'a utilisé qu'environ 16 % des tokens.
00:01:27Maintenant, essayons la même chose en utilisant le serveur MCP.
00:01:29On peut utiliser la commande MCP pour vérifier qu'il est bien installé.
00:01:33Et avant de continuer, jetons un œil au contexte.
00:01:35En remontant, on voit que 15 % du contexte est déjà utilisé, car tous
00:01:41ces outils MCP sont chargés, ce qui consomme environ 3,6 k tokens.
00:01:46Ceci étant dit, nous allons utiliser le même prompt.
00:01:50Et notez que j'utilise les outils du serveur Playwright MCP au lieu de la compétence CLI.
00:01:55Il a donc utilisé le serveur MCP, ce qui ouvre un nouveau navigateur.
00:01:59Ensuite, il a collé le lien dans l'entrée.
00:02:01Puis il va cliquer sur le bouton.
00:02:02J'ai remarqué que le serveur MCP demande bien plus de permissions que la CLI, ce qui n'est pas un problème.
00:02:08Et il a eu quelques soucis pour prendre la capture d'écran, peut-être parce qu'un fichier
00:02:12porte déjà ce nom.
00:02:13J'ai réessayé avec le serveur Playwright MCP, et même en changeant le nom de la
00:02:17capture d'écran, il a échoué plusieurs fois à extraire l'image.
00:02:22Et maintenant, c'est fini.
00:02:23Il a pu tout faire, sauf prendre la capture d'écran.
00:02:26Mais regardons maintenant le contexte, et on voit qu'il a utilisé 35 k, soit 18 %.
00:02:32C'est donc un tout petit peu plus que la CLI, l'essentiel étant pris par les outils MCP.
00:02:37Mais il existe en fait un moyen d'effectuer exactement les mêmes tâches en utilisant un peu moins de contexte,
00:02:43ce dont je parlerai un peu plus tard dans la vidéo.
00:02:45Je sais que ce n'est qu'un exemple, et il peut même y avoir des scénarios où le serveur MCP
00:02:51utilise moins de tokens que la CLI Playwright selon la tâche, bien que j'en doute.
00:02:56Et vous vous dites peut-être que la différence entre 16 et 18 % n'est pas si grande.
00:03:02Mais la CLI présente d'autres avantages par rapport au serveur MCP.
00:03:06Par défaut, le serveur Playwright MCP n'expose pas tous les outils disponibles.
00:03:11En fait, vous devez activer des outils supplémentaires comme la génération de PDF ou le traçage pour
00:03:16les utiliser, car ils consomment trop de contexte.
00:03:19La CLI, en revanche, n'a pas cette limitation.
00:03:22En réalité, tous les outils sont disponibles dès le départ.
00:03:25Et la CLI n'est pas seulement utile pour les agents, elle l'est aussi pour les humains, car pour les tâches que
00:03:29vous répétez sans cesse, ou même pour les tests de bout en bout, vous pouvez créer un simple script bash
00:03:34qu'un humain peut exécuter pour vérifier les résultats, mais qu'un agent peut aussi lancer.
00:03:39Cela ne signifie pas que le serveur MCP est inutile, car si vous construisez une boucle d'agent
00:03:44que vous voulez faire tourner n'importe où, sur navigateur, bureau ou mobile, et pas seulement dans le
00:03:49terminal, alors le serveur MCP est parfait pour cela. C'est un protocole standard que
00:03:54les agents utilisent pour accéder aux outils, et comme Playwright exécute du code JavaScript ou TypeScript, vous pouvez
00:03:59faire tourner ce code dans n'importe quel environnement supportant le runtime JavaScript.
00:04:03De plus, le serveur MCP fonctionne en mode "avec interface" par défaut, alors que la CLI tourne en mode "headless",
00:04:09puisqu'elle est conçue pour s'exécuter en arrière-plan dans les agents de codage.
00:04:13Et si vous souhaitez réduire les tokens dans le serveur Playwright MCP, vous pouvez le
00:04:17configurer en activant ou désactivant certains outils.
00:04:20En fait, si votre but est d'utiliser le moins de tokens possible, vous ne devriez pas non plus utiliser la
00:04:26CLI Playwright, car l'Agent Browser de Cel utilise Playwright sous le capot, mais possède une
00:04:32CLI en Rust, ce qui le rend plus rapide et conçu pour consommer moins de tokens que Playwright, comme
00:04:38vous l'avez vu dans mon exemple précédent.
00:04:39Regardez la prochaine vidéo pour tout savoir sur Agent Browser et faire passer les compétences de navigation
00:04:43de vos agents de codage au niveau supérieur.

Key Takeaway

Bien que le serveur MCP soit plus standardisé pour divers environnements, la Playwright CLI est plus performante, plus riche en fonctionnalités natives et plus économe en ressources pour les agents de codage basés sur le terminal comme Claude Code.

Highlights

Playwright CLI permet d'utiliser toute la puissance du moteur directement dans le terminal.

L'utilisation de la CLI consomme généralement moins de tokens de contexte (16 % contre 18 %) par rapport au serveur MCP.

Le serveur MCP nécessite plus de permissions et a rencontré des erreurs lors de la capture d'écran dans les tests.

La CLI expose tous les outils par défaut, alors que le serveur MCP nécessite l'activation manuelle de certaines fonctionnalités gourmandes en contexte.

Le serveur MCP reste idéal pour les environnements hors terminal comme le mobile ou le navigateur grâce à son protocole standard.

L'Agent Browser de Cel est mentionné comme une alternative encore plus économe en tokens grâce à son implémentation en Rust.

Timeline

Introduction à Playwright CLI et problématique

L'auteur introduit la nouvelle CLI de Playwright comme un outil puissant pour les agents de codage, permettant de gérer le stockage local, les sessions et les onglets directement depuis le terminal. Il pose la question fondamentale de la pertinence de cette CLI face au serveur MCP existant. La vidéo souligne une tendance croissante où des outils auparavant limités au format MCP sont désormais transformés en interfaces de ligne de commande. Cette introduction prépare le terrain pour un comparatif technique entre les deux approches. L'objectif est de déterminer laquelle offre la meilleure expérience utilisateur et technique.

Test de performance avec la CLI Playwright

Un test concret est réalisé sur Claude Code pour extraire une vidéo d'un tweet et effectuer une capture d'écran. L'installation de la compétence CLI ne consomme que 68 tokens, ce qui est extrêmement léger. L'agent exécute les commandes de navigation, attend 10 secondes, puis nettoie le stockage local avec succès. Les résultats montrent une utilisation totale du contexte de seulement 16 %, prouvant l'efficacité de la méthode. La vidéo confirme que l'image a bien été enregistrée et que le processus a été fluide du début à la fin.

Comparaison avec le serveur Playwright MCP

Le même test est effectué en utilisant le serveur MCP, révélant une consommation de contexte initiale de 3,6 k tokens dès le chargement des outils. L'exécution via MCP demande plus de permissions et rencontre des échecs répétés lors de la tentative de capture d'écran. Au final, l'utilisation du contexte s'élève à 18 %, soit un coût supérieur à celui de la CLI pour un résultat moins fiable. L'auteur note que bien que l'écart semble faible, la gestion des ressources est plus complexe avec MCP. Ce segment met en évidence les frictions potentielles liées à l'utilisation du protocole de contexte partagé.

Avantages structurels et flexibilité de la CLI

L'analyse approfondit les raisons techniques de la supériorité de la CLI, notamment le fait qu'elle expose tous les outils (PDF, traçage) sans configuration supplémentaire. Contrairement au serveur MCP, la CLI n'impose pas de désactiver des fonctions pour économiser du contexte. Elle présente également l'avantage d'être utilisable par des humains via des scripts bash pour des tests de bout en bout. Cela crée un pont efficace entre le travail de l'agent IA et les vérifications manuelles du développeur. La CLI apparaît ainsi comme un outil plus polyvalent pour le flux de travail quotidien.

Cas d'usage du serveur MCP et alternatives optimisées

Malgré les avantages de la CLI, le serveur MCP est jugé préférable pour les déploiements multi-plateformes comme le web ou le mobile. Le serveur MCP fonctionne par défaut avec une interface visible, tandis que la CLI privilégie le mode sans échec (headless). L'auteur conclut en présentant l'Agent Browser de Cel, une alternative en Rust encore plus rapide et économe en tokens. Ce dernier outil est recommandé pour ceux qui cherchent l'optimisation maximale de leur contexte de navigation. La vidéo se termine par une invitation à explorer ces solutions avancées pour améliorer les compétences des agents.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video