Browser-Automatisierung mit Playwright MCP

Das Model Context Protocol (MCP) erweitert die Fähigkeiten von Claude Code um externe Tools. Eine der mächtigsten Erweiterungen: Playwright MCP, das Claude einen echten Browser steuern lässt.

Einrichtung in einer Minute

Die Installation ist denkbar einfach. Ein einziger Befehl vor dem Start von Claude:

$ claude mcp add playwright npx '@playwright/mcp@latest'

Das war's. Die Konfiguration wird in ~/.claude.json gespeichert und bleibt für zukünftige Sessions erhalten.

Wie es funktioniert

Nach der Einrichtung kann Claude ein sichtbares Chrome-Fenster steuern. Du siehst live, was der Agent tut. Seiten laden, Formulare ausfüllen, Buttons klicken.

Ein praktischer Tipp: Erwähne explizit "Playwright MCP" in deinen Anfragen. So wählt Claude das richtige Tool und versucht nicht, normale Bash-Befehle zu verwenden.

Authentifizierung leicht gemacht

Ein großer Vorteil: Claude zeigt Login-Seiten an, während du dich manuell authentifizierst. Session-Cookies bleiben während der gesamten Interaktion erhalten. Keine Credential-Weitergabe an die KI nötig.

Verfügbare Browser-Tools

Playwright MCP stellt 25 Browser-Funktionen bereit. Du musst dir die Namen nicht merken. Claude wählt automatisch die passende Funktion für deine Aufgabe:

browser_navigate

URLs öffnen

browser_click

Elemente anklicken

browser_type

Text eingeben

browser_screenshot

Screenshots erstellen

browser_snapshot

DOM-Struktur erfassen

browser_tabs

Tabs verwalten

browser_drag

Drag & Drop

browser_hover

Hover-Effekte

browser_select_option

Dropdowns bedienen

browser_file_upload

Dateien hochladen

browser_pdf_save

PDFs generieren

browser_network

Netzwerk überwachen

Praktische Anwendungsfälle

1. Web Scraping mit JavaScript-Rendering

Viele moderne Websites rendern Inhalte erst mit JavaScript. Playwright wartet automatisch auf das vollständige Rendering, bevor Daten extrahiert werden.

# Prompt an Claude:
"Öffne mit Playwright MCP die Seite example.com/products
und extrahiere alle Produktnamen und Preise als JSON."

2. Automatisierte Tests

Claude kann End-to-End-Tests durchführen und sogar Playwright-Testskripte generieren, die Sie später in Ihre CI/CD-Pipeline integrieren können.

3. Formular-Automatisierung

Wiederkehrende Formulareingaben? Claude füllt sie aus, während Sie die finalen Werte validieren.

4. Screenshot-Dokumentation

Automatische Screenshots von Websites für Dokumentation oder Monitoring – mit Annotationen, falls gewünscht.

Best Practices

Explizite Tool-Nennung: Sag "mit Playwright MCP", damit Claude das richtige Tool wählt
Schrittweise Anweisungen: Bei komplexen Workflows die Aufgaben aufteilen
Snapshots statt Screenshots: browser_snapshot liefert strukturierte Daten, die Claude besser verarbeiten kann
Authentifizierung beobachten: Bei Login-Seiten kannst du manuell eingreifen

Sicherheitshinweise

Da Claude einen echten Browser steuert, gelten einige Vorsichtsmaßnahmen:

Arbeiten Sie nicht mit sensiblen Produktionsdaten ohne Prüfung
Verwenden Sie Test-Accounts für Automatisierungsexperimente
Beobachten Sie die Browser-Aktionen – Sie sehen alles live
Sensible Credentials nie direkt an Claude weitergeben

Verwendete Tools:

Playwright Claude Code

Willst du Browser-Automatisierung in deine Workflows integrieren? Schreib mir. Ich helfe bei der Einrichtung und Entwicklung maßgeschneiderter Lösungen.

Browser-Automatisierung mit Playwright MCP und Claude Code