playwright mcp browser-automation agents testing llm

Playwright oder Browser-Agenten? Wo skriptbasierte Automatisierung weiterhin gewinnt.

Schauspieler-Skripte gegen MCP-getriebene Browser-Agenten: Brüchigkeit, Determinismus und Kosten, eine Rechnungsaufgabe wird auf beide Weisen erledigt, die Sicherheitsrisiken und wann jeweils einer gewinnt.

Verlag: REACTAPP.TOPAuf dieser Website hinzugefügt 28. Okt. 20268 Min. Lesezeit1835 Wörter

Quellen: Playwright vs WebMCP: Will Browser Automation Survive the Agent Era?

Das Internet wurde für Menschen entwickelt, die auf Links klicken und Seiten lesen. Selenium, Puppeteer und Playwright ermöglichen es nun, dass Code diese Aufgaben übernimmt. Seit über zehn Jahren bedeutete Browserautomatisierung das Schreiben eines Skripts, die einzelnen Schritte genau beschreiben und dieses immer wieder ausführen. KI-Agenten verändern das nun. Sie können logisch denken, planen und handeln und durchsuchen eine Seite auf die gleiche Weise wie ein Mensch: Sie betrachten sie, verstehen ihren Inhalt und entscheiden, was als Nächstes zu tun ist. Das wirft eine wichtige Frage auf: Macht das Model Context Protocol (MCP) die skriptbasierte Automatisierung überflüssig – oder behält Playwright weiterhin seine Bedeutung?

Warum Entwickler Playwright mögen

Playwright von Microsoft ist ein modernes Framework für Browserautomatisierung. Dagegen geschriebener Code steuert Chromium, Firefox oder WebKit dabei, Knöpfe zu klicken, Formulare auszufüllen, Daten abzurufen und End-to-End-Tests durchzuführen. Ein kleines Beispiel:

const { chromium } = require('playwright');

const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com/login');
await page.fill('#email', 'user@example.com');
await page.fill('#password', 'secret');
await page.click('button[type="submit"]');
await page.waitForURL('**/dashboard');
console.log('Logged in!');
await browser.close();

Das Ergebnis ist sauber, deterministisch und vorhersehbar. Die üblichen Gründe für seine Beliebtheit:

Die Unterstützung für verschiedene Browser ist bereits integriert.
Die Isolierung von Tests sowie parallele Ausführungen sind sehr zuverlässig.
Das automatische Warten ersetzt die alten sleep(2000)-Tricks.
Tracing, Screenshots und Videoaufnahmen sind enthalten.
Es passt perfekt in CI/CD-Pipelines.

Wo Skripte Nachteile haben

Die Schwäche liegt in der Brüchigkeit. Ändert man die CSS-Klasse eines Buttons, versagt das Skript. Verschiebt man ein Formfeld, versagt es ebenfalls. Führt man eine A/B-Variante mit neuer Gestaltung ein, versagt es wieder. Jedes Skript ist eine fest programmierte Übersicht von Annahmen darüber, wie eine Seite zu einem bestimmten Zeitpunkt aussah – doch Benutzeroberflächen ändern sich ständig. In einem schnelllebigen Unternehmen kann das Aufrechterhalten einer umfangreichen Playwright-Suite zu einer zweiten Vollzeitbeschäftigung werden.

Eine Analogie hilft. Ein Skript ist wie eine laminierte Anleitungskarte durch eine Stadt. Es funktioniert, solange keine Straße gesperrt ist, kein Gebäude umgesetzt wird oder keine Einbahnstraße entsteht. Ein besseres Navigationswerkzeug würde sich umsehen, Straßenschilder lesen und die Situation im Echtzeit entscheiden.

Was MCP hinzufügt

MCP, das Ende 2024 von Anthropic eingeführt wurde, ist ein offener Standard zur strukturierten Verbindung von KI-Modellen wie Claude mit externen Tools, Datenquellen und Umgebungen. Es funktioniert wie ein universelles Plugin-System für Agenten. Anstatt innerhalb eines Chat-Fensters zu existieren, kann ein Modell auf Datenbanken, APIs, Dateisysteme und Webbrowser zugreifen.

Es gibt bereits einen Playwright MCP-Server, der Browser-Aktionen als Funktionen bereitstellt, die von Agenten aufgerufen werden können. Anstelle dessen, dass ein Entwickler eine Zeile wie diese schreiben müsste:

await page.click('#submit-button');

Ein Agent erhält stattdessen ein Ziel:

"Submit the contact form on acme.com with the user's name and email"

Von dort aus navigiert es, findet Elemente und interagiert mit der Seite mithilfe von Sehvermögen, HTML-Parser und logischem Denken – ohne irgendwo fest codierte Selektoren.

Vergleich direkt gegeneinander

Playwright, der traditionelle Ansatz

Kontrolle: Der Entwickler schreibt jeden Schritt.
Selektoren: CSS, XPath oder Text.
Widerstandsfähigkeit gegen UI-Änderungen: Bricht zusammen, wenn sich die UI ändert.
Einrichtung: mäßig, da Code erforderlich ist.
Determinismus: vollständig deterministisch.
Debugging: einfach, mit Trace-Logs und Screenshots.
Geschwindigkeit: schnell.
Kosten: nur Rechenleistung.
Am besten geeignet für: Regressionstests und CI/CD-Pipelines.
Toverlässigkeit: hoch, sofern gewartet wird.

WebMCP oder Playwright MCP, der Agent-Ansatz

Kontrolle: Ein KI-Agent denkt nach und trifft Entscheidungen.
Selektoren: Natürliche Sprache in Kombination mit visuellem Verständnis.
Widerstandsfähigkeit gegen UI-Änderungen: Anpassung durch erneutes Abwägen anhand des aktuellen DOMs.
Einrichtung: gering, da eine Beschreibung des Ziels ausreicht.
Determinismus: nicht-deterministisch, da LLM-Logik zum Einsatz kommt.
Fehlerbehebung: schwieriger, da die Frage lautet, warum der Agent diese Aktion gewählt hat.
Geschwindigkeit: langsamer aufgrund der Rechenlast durch LLM-Infersionen.
Kosten: Rechenleistung plus LLM-API-Tokens.
Am besten geeignet für: dynamische Aufgaben, komplexe Workflows und Agenten.
Verfügbarkeit: verbessert, aber noch nicht produktionstauglich.

Eine Aufgabe, zwei Methoden

Die Aufgabe: In ein SaaS-Dashboard einloggen, die neueste Rechnung finden und sie als PDF herunterladen.

Mit Playwright navigiert das Skript zur Anmeldeseite, füllt E-Mail-Adresse und Passwort über data-testid-Selektoren aus, klickt auf die Anmeldekнопpe und führt die Schritte nacheinander aus.

await page.goto('https://app.saas.com/login');
await page.fill('[data-testid="email"]', credentials.email);
await page.fill('[data-testid="password"]', credentials.password);
await page.click('[data-testid="login-btn"]');
await page.waitForSelector('.dashboard');
await page.click('nav >> text=Billing');
await page.click('.invoice-list tr:first-child .download-btn');
await page.waitForEvent('download');

Betrachten Sie, was passiert, wenn das Attribut data-testid bei einer Refaktorierung umbenannt wird, wenn die Buchungsnavigation in eine Seitenleiste verschoben wird oder wenn die Rechnungstabelle anders paginiert wird.

Mit einem Agenten ist die Anweisung in einfachen Worten ein Ziel:

Goal: "Go to app.saas.com, log in with my credentials,
navigate to billing, find the most recent invoice,
and download it as a PDF."

Der Agent lädt die Seite und liest den DOM sowie die visuelle Anordnung, erkennt mithilfe von Inhalten das Anmeldeformular, füllt die Zugangsdaten ein und sendet die Anmeldung ab, sucht nach einer Navigation mit den Bezeichnungen „Billing“, „Rechnungen“ oder ähnlichem, findet die neueste Rechnung nach Datum und klickt auf „Herunterladen“. Sollte sich die Benutzeroberfläche ändern, liest er die Seite erneut und passt sich an. Es ist kein Skript notwendig, das aktualisiert werden muss.

Von Scripting zu Anweisungen

Traditionelle Automatisierung fragt, welche genauen Schritte der Computer ausführen soll. Die Automatisierung im Agenten-Modell fragt, welches Ergebnis gewünscht ist und ob die KI die entsprechenden Schritte finden kann. Einfach ausgedrückt: Scripting programmiert den Weg, während Anweisungen das Ziel vorgeben.

Bei einfachen, stabilen und hochvolumigen Aufgaben wie 10.000 Regressionstests in CI hat der Determinismus von Playwright immer Vorteile. Bei komplexen, sich ändernden, einmaligen Arbeitsabläufen, wie sie ein menschlicher Assistent übernehmen würde, liegen browserbasierte Agenten, die über MCP gesteuert werden, vorn.

Werkzeuge, die in diesem Bereich zu finden sind

Das Ökosystem wächst rasant:

Playwright MCP, ein offizieller MCP-Server, der Playwright-Browseraktionen für KI-Agenten bereitstellt.
Stagehand von Browserbase, eine auf KI basierende Automatisierung, die Playwright mit visuellen Fähigkeiten von LLMs verbindet.
Browser Use, ein Open-Source-Framework für Web-Browser-Agenten.
Claude Computer Use, Anthropics System, das einen vollständigen Desktop oder Browser sehen und steuern kann.
OpenAI Operator, ein GPT-4o-Agent, der zum Erledigen von Aufgaben im Web surft.
Skyvern, eine auf Vision und LLMs basierende Automatisierung, die keine Selektoren benötigt.

Das sind keine Spielzeuge. Unternehmen nutzen sie für Beschaffungsprozesse, Datenextraktion, Formularübermittlungen und Wettbewerbsüberwachung – Aufgaben, die sonst monatelange Programmierung erfordern würden.

Wird Playwright verschwinden?

Nicht unbedingt, obwohl sich seine Rolle verändert. Er bleibt weiterhin unverzichtbar, ist aber nicht mehr das einzige Werkzeug im Repertoire. Er ähnelt SQL: grundlegend, präzise und unersetzlich für strukturierte Aufgaben, doch nicht mehr der einzige Weg zu Antworten. Die Zukunft nutzt beide Ansätze für die jeweils geeigneten Aufgaben.

Wahl zwischen ihnen

Die Entscheidung erfolgt nach einem Flussdiagramm. Beginnen Sie damit, zu prüfen, ob die Aufgabe gut definiert ist und über eine stabile Benutzeroberfläche verfügt. Wenn dem so ist und die Aufgabe in großem Umfang wiederholt ausgeführt wird, wie beispielsweise in CI- oder Regressionstests, sind Skripte die richtige Lösung. Falls sich die Benutzeroberfläche ändert oder es sich um eine einmalige Aufgabe handelt, eignet sich ein Agent besser.

Is the task well-defined with a stable UI?
        │
        ├── YES → Does it run repeatedly at scale (CI/CD, regression)?
        │              │
        │              ├── YES → Use Playwright
        │              └── NO  → Either works; Playwright is cheaper
        │
        └── NO → Is the UI dynamic, unknown, or frequently changing?
                       │
                       ├── YES → Use MCP Agent / AI Browser
                       └── NO  → Does it require multi-step reasoning?
                                      │
                                      ├── YES → Use MCP Agent
                                      └── NO  → Use Playwright

Die nächsten zwei Jahre

Agenten werden die vorgefertigten Automatisierungen nicht über Nacht beseitigen, doch mehrere Trends sind bereits erkennbar.

Hybride Pipelines werden zur Norm. Playwright übernimmt die stabile, wiederkehrende Arbeit von 80 Prozent, während ein MCP-Agent sich um die unvorhersehbaren 20 Prozent kümmert, die bei jedem Sprint die Skripte stören.
Playwright erhält KI-Funktionen. Man kann mit einer verbesserten Selektorenerkennung rechnen, bei der ein fehlerhafter Selektor ein LLM bittet, das entsprechende Element auf der aktualisierten Seite zu finden. Healenium und Reflect tun bereits etwas Ähnliches, und eine native Unterstützung in Playwright scheint wahrscheinlich.
Die Zuverlässigkeit der Agenten verbessert sich. Aktuelle Agenten interpretieren manchmal eine Seite falsch, klicken auf das falsche Element oder werden durch Popups gestört. Bessere multimodale Modelle wie GPT-4o, Claude 3.5 Sonnet und Gemini 2.0 sollten diese Fehler erheblich reduzieren.
Die QA-Methodik verändert sich. Anstatt Playwright-Skripte zu schreiben, geben Tester ihre Absichten in natürlicher Sprache an und lassen Agenten diese interpretieren und ausführen – es entsteht ein Übergang von der Skriptierung zur Spezifizierung von Ergebnissen.
Sicherheit wird zu einem aktiven Problem. Ein Agent mit autonomer Kontrolle über den Browser könnte versehentlich auf etwas klicken, ein Formular mit falschen Daten absenden oder von einer bösartigen Seite manipuliert werden. Die promptbasierte Injektion über Webinhalte, bei der eine Seite einen Agenten zu unerwünschten Aktionen verleitet, ist bereits als dokumentierte Bedrohung bekannt. Hier liegt der größte Vorteil von Playwright: Es führt genau das aus, was im Skript festgelegt ist, und nichts weiter.

Der größere Überblick

Ein Jahrzehnt lang war die Automatisierung von Browsern ein Übersetzungsaufgabe: menschliche Absichten in Code umzuwandeln, der menschliche Handlungen nachahmt. Playwright hat dieses Problem hervorragend gelöst. Heute übernimmt der Agent den Übersetzungsschritt, da klare Sprache ausreicht und der Agent den Rest erledigt. Das macht Playwright nicht überflüssig – es macht es spezialisiert, genauso wie ein Chirurg im Zeitalter der Roboterkirurgie weiterhin ein Skalpell verwendet. Das Skalpell bietet Präzision, Kontrolle und Zuverlässigkeit, während der Roboter Komplexität, Anpassungsfähigkeit und Skalierbarkeit ermöglicht. Die praktische Frage lautet nicht mehr Playwright gegen MCP – sondern wann ein Skalpell und wann ein Roboter benötigt wird.