Playwright CLI vs. MCP Server: Was ist wirklich BESSER für Claude Code?

BBetter Stack
컴퓨터/소프트웨어AI/미래기술

Transcript

00:00:00Die Playwright-CLI ist die neueste Methode, um Playwright mit Ihrem Coding-Agenten zu nutzen. Sie ermöglicht
00:00:04die Verwaltung von Lokal- und Session-Speichern, das Erstellen von Snapshots und das Tab-Management – im Grunde
00:00:09die volle Leistung der Playwright-Engine direkt in Ihrem Terminal.
00:00:12Aber warum sollte man das nutzen, anstatt den Playwright-MCP-Server zu verwenden?
00:00:17Und warum werden immer mehr CLIs für Tools entwickelt, die zuvor MCP-Server waren?
00:00:22Abonnieren Sie den Kanal und lassen Sie uns direkt einsteigen.
00:00:24Beginnen wir damit, sowohl die Playwright-CLI als auch den MCP-Server an einer einfachen Aufgabe zu testen.
00:00:31Ich werde ihn bitten, mir beim Testen eines Tools zu helfen, das ich zum Herunterladen von Videos
00:00:35von Twitter entwickelt habe.
00:00:36Ich weise Playwright an, den Link für diesen Tweet zu kopieren, hier einzufügen, das Video zu extrahieren,
00:00:40dann 10 Sekunden zu warten, einen Screenshot zu machen und anschließend den lokalen Speicher zu leeren,
00:00:45damit der nächste Agent bei Null anfangen kann.
00:00:48Zuerst versuchen wir es mit der Playwright-CLI über Claude Code. Wenn wir sie installieren,
00:00:54sollte der Skill hier verfügbar sein.
00:00:56Beachten Sie, dass er nur 68 Token verbraucht.
00:00:59Jetzt gebe ich diesen Prompt ein, der dem Agenten explizit sagt, den Playwright-CLI-Skill zu nutzen,
00:01:03um die Sache etwas einfacher zu machen.
00:01:06Ich drücke Enter, er lädt den Skill, fügt die URL in das Textfeld ein, klickt auf
00:01:11„Video extrahieren“ und wartet dann 10 Sekunden.
00:01:13Nun wurde der Screenshot erstellt, der lokale Speicher geleert und der Browser geschlossen.
00:01:17Es ist alles fertig. Der Screenshot wurde hier gespeichert, und wenn wir ihn uns ansehen,
00:01:21erkennen wir, dass das Video erfolgreich heruntergeladen wurde.
00:01:24Der gesamte Vorgang hat etwa 16 % der Token verbraucht.
00:01:27Versuchen wir nun dasselbe mit dem MCP-Server.
00:01:29Mit dem MCP-Befehl können wir überprüfen, ob er installiert ist.
00:01:33Bevor wir weitermachen, werfen wir einen Blick auf den Kontext.
00:01:35Wenn wir nach oben scrollen, sehen wir, dass bereits 15 % des Kontexts belegt sind, da all
00:01:41diese MCP-Tools geladen werden, was etwa 3.600 Token entspricht.
00:01:46In diesem Wissen verwenden wir denselben Prompt.
00:01:50Beachten Sie, dass ich hier die Playwright-MCP-Server-Tools anstelle des CLI-Skills nutze.
00:01:55Er greift auf den MCP-Server zu, der einen neuen Browser öffnet.
00:01:59Dann wurde der Link in das Eingabefeld eingefügt.
00:02:01Anschließend wird die Schaltfläche angeklickt.
00:02:02Mir ist aufgefallen, dass der MCP-Server viel mehr Berechtigungen anfordert als die CLI, was okay ist.
00:02:08Es gab einige Probleme beim Erstellen des Screenshots, vielleicht weil bereits eine Datei
00:02:12mit diesem Namen existiert.
00:02:13Ich habe es erneut mit dem Playwright-MCP-Server versucht, aber obwohl er einen anderen
00:02:17Dateinamen wählte, gab es mehrfach Probleme beim Erstellen des Screenshots.
00:02:22Jetzt ist er fertig.
00:02:23Er konnte alles erledigen, außer den Screenshot zu machen.
00:02:26Aber schauen wir uns den Kontext an: Er hat 35.000 Token verbraucht, also 18 %.
00:02:32Nur ein winziges Stück mehr als die CLI, wobei der Großteil auf die MCP-Tools entfiel.
00:02:37Es gibt jedoch einen Weg, exakt dieselben Aufgaben mit etwas weniger Kontext zu erledigen,
00:02:43worauf ich später im Video noch eingehen werde.
00:02:45Ich weiß, das ist nur ein Beispiel, und es mag Szenarien geben, in denen der MCP-Server
00:02:51weniger Token verbraucht als die Playwright-CLI – auch wenn ich das bezweifle.
00:02:56Sie denken vielleicht: „Der Unterschied zwischen 16 und 18 % ist nicht so groß.“
00:03:02Aber die CLI hat gegenüber dem MCP-Server noch weitere Vorteile.
00:03:06Standardmäßig stellt der Playwright-MCP-Server nicht alle verfügbaren Tools bereit.
00:03:11Tatsächlich müssen Sie zusätzliche Funktionen wie PDF-Erstellung oder Tracing erst aktivieren,
00:03:16da diese sonst zu viel Kontext beanspruchen würden.
00:03:19Die CLI hingegen unterliegt dieser Einschränkung nicht.
00:03:22Dort sind alle Tools von Anfang an verfügbar.
00:03:25Zudem ist die CLI nicht nur für Agenten, sondern auch für Menschen nützlich. Für Aufgaben,
00:03:29die man ständig wiederholt, oder für End-to-End-Tests kann man ein einfaches Bash-Skript
00:03:34erstellen, das sowohl ein Mensch als auch ein Agent ausführen kann, um Ergebnisse zu prüfen.
00:03:39Das bedeutet nicht, dass der MCP-Server nutzlos ist. Wenn Sie einen Agent-Loop bauen,
00:03:44der überall laufen soll – im Browser, in Desktop- oder Mobile-Apps, nicht nur im
00:03:49Terminal – dann ist der MCP-Server perfekt dafür geeignet.
00:03:54Er ist ein Standardprotokoll für den Tool-Zugriff. Da Playwright JavaScript oder TypeScript nutzt,
00:03:59kann dieser Code in jeder Umgebung mit JavaScript-Runtime ausgeführt werden.
00:04:03Außerdem läuft der MCP-Server standardmäßig im Headed-Modus, während die CLI im Headless-Modus läuft,
00:04:09da sie für den Hintergrundbetrieb in Coding-Agenten konzipiert ist.
00:04:13Wenn Sie den Tokenverbrauch im Playwright-MCP-Server reduzieren wollen, können Sie dies
00:04:17konfigurieren, indem Sie bestimmte Tools an- oder ausschalten.
00:04:20Wenn Ihr Ziel jedoch der absolut minimale Tokenverbrauch ist, sollten Sie auch nicht die
00:04:26Playwright-CLI nutzen. Der Agent-Browser von Steel nutzt zwar Playwright im Hintergrund,
00:04:32besitzt aber eine Rust-CLI. Das macht ihn schneller und sparsamer bei den Token als Playwright,
00:04:38wie Sie in meinem früheren Beispiel gesehen haben.
00:04:39Schauen Sie sich das nächste Video an, um alles über den Agent-Browser zu erfahren und die
00:04:43Browsing-Fähigkeiten Ihrer Coding-Agenten auf das nächste Level zu heben.

Key Takeaway

Während der MCP-Server ein standardisiertes Protokoll für diverse Umgebungen bietet, ist die Playwright-CLI für Coding-Agenten oft effizienter, bietet einen größeren Funktionsumfang ohne Zusatzkonfiguration und verbraucht weniger Token.

Highlights

Die Playwright-CLI bietet vollen Zugriff auf die Playwright-Engine direkt im Terminal.

Im Vergleichstest verbrauchte die CLI 16 % der Token

Timeline

Einführung in Playwright-CLI und MCP-Server

Der Sprecher stellt die Playwright-CLI als neueste Methode zur Steuerung von Web-Browsern durch Coding-Agenten vor. Er erläutert grundlegende Funktionen wie das Snapshot-Management, die Verwaltung von Sessions und das Tab-Management direkt über das Terminal. Es wird die zentrale Frage aufgeworfen, warum Entwickler von etablierten MCP-Servern zu CLI-basierten Lösungen wechseln sollten. Dieser Abschnitt setzt den Kontext für den folgenden Performance-Vergleich zwischen den beiden Ansätzen. Der Fokus liegt dabei auf der vollen Leistungsfähigkeit der Playwright-Engine innerhalb einer Terminal-Umgebung.

Praxistest: Playwright-CLI im Einsatz

In einem praktischen Experiment soll ein Video von Twitter heruntergeladen und ein Screenshot erstellt werden. Der Sprecher demonstriert die Installation des CLI-Skills in Claude Code und hebt den geringen initialen Token-Verbrauch von nur 68 Token hervor. Der Agent führt die Schritte wie das Einfügen der URL und das Warten von 10 Sekunden fehlerfrei aus. Am Ende zeigt der Test, dass der gesamte Prozess erfolgreich abgeschlossen wurde und dabei etwa 16 % des verfügbaren Kontext-Fensters beansprucht hat. Besonders betont wird die Zuverlässigkeit bei der Erstellung des finalen Screenshots.

Vergleichstest: Playwright-MCP-Server

Der gleiche Testlauf wird nun mit dem Playwright-MCP-Server durchgeführt, wobei bereits beim Start 3.600 Token für das Laden der Tools verbraucht werden. Während des Vorgangs fordert der MCP-Server deutlich mehr Berechtigungen an als die CLI-Variante. Es treten technische Schwierigkeiten auf, da der Server mehrfach daran scheitert, den Screenshot der Webseite korrekt zu speichern. Trotz der erfolgreichen Ausführung der restlichen Aufgaben liegt der Token-Verbrauch mit 18 % bzw. 35.000 Token höher als bei der CLI. Der Sprecher merkt an, dass der Großteil dieses Verbrauchs auf die Definitionen der MCP-Tools zurückzuführen ist.

Funktionsumfang und Skriptfähigkeit

Dieser Abschnitt beleuchtet die funktionalen Unterschiede, wobei die CLI alle Tools standardmäßig bereitstellt, während der MCP-Server eine manuelle Aktivierung für PDF- oder Tracing-Features benötigt. Ein wesentlicher Vorteil der CLI ist ihre Nutzbarkeit für Menschen durch Bash-Skripte, was die Zusammenarbeit zwischen Mensch und Agent erleichtert. Der Sprecher argumentiert, dass die CLI weniger Einschränkungen unterliegt und somit flexibler für komplexe End-to-End-Tests ist. Dies macht die CLI zu einer attraktiven Wahl für Entwickler, die sowohl Automatisierung als auch manuelle Kontrolle benötigen. Letztlich bietet die CLI eine nahtlosere Integration in bestehende Entwickler-Workflows.

Anwendungsfälle für MCP und Alternativen

Abschließend wird erläutert, wann der MCP-Server dennoch die bessere Wahl ist, insbesondere bei plattformübergreifenden Agent-Loops außerhalb des Terminals. Der MCP-Server nutzt ein Standardprotokoll, das in jeder JavaScript-Runtime funktioniert und standardmäßig im sichtbaren "Headed-Modus" operiert. Für Nutzer, die extremen Wert auf minimale Token-Kosten legen, wird der Agent-Browser von Steel als Rust-basierte Alternative empfohlen. Der Sprecher weist darauf hin, dass Geschwindigkeit und Effizienz je nach Programmiersprache der Tools variieren können. Das Video endet mit einer Empfehlung, sich weiterführende Informationen über hochperformante Browsing-Agenten anzusehen.

Community Posts

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

Write about this video