Chris EichlerAI-first Product
& Marketing

Claude Code + Playwright


Schritt 1: Das Setup ist ein Prompt

Playwright ist ein Open-Source-Tool, das echte Browser fernsteuert. Claude Code kann es installieren und bedienen, du brauchst zwei Befehle:

pip install playwright
playwright install chromium

Danach sagst du Claude Code in normalem Deutsch, was du automatisieren willst. Er schreibt das Script, öffnet den Browser und liefert dir das Ergebnis. Bei mir lief der erste Durchgang ohne einen einzigen Fehler durch.

Schritt 2: Der erste Screenshot

Fang klein an. Ein guter erster Auftrag: „Öffne meine Website und mach einen Screenshot."

Das klingt banal, ist aber der Smoke-Test für das ganze Setup. Wenn das läuft, hast du bewiesen: Installation ok, Browser startet, Dateien kommen an. Ab hier iterierst du dich in Minuten zu echten Workflows.

Ein Detail, das ich täglich nutze: den Viewport mitgeben. Für schmale Bild-Slots lasse ich Seiten in 760 Pixel Breite schießen statt in 1440. Weniger Zoom-Crop, mehr lesbarer Inhalt.

Schritt 3: Bauen und testen lassen

Der eigentliche Hebel ist nicht der einzelne Screenshot, sondern der Kreislauf: Claude baut etwas, testet es im echten Browser und fixt, was bricht.

Mein Beispiel: der Renderer, der meine Instagram-Slides aus HTML baut. Claude Code hat ihn geschrieben, zusammen mit 16 Playwright-Tests. Die Tests öffnen echte Browser, messen jede Slide nach (1080 mal 1350 Pixel, kein Überlauf) und brechen hart ab, wenn etwas nicht passt. Im Review kamen zwei echte Bugs hoch. Claude hat beide selbst behoben, ich habe keine Zeile angefasst.

Der Punkt dahinter: ein Test, der einen echten Browser aufmacht, prüft das echte Verhalten. Kein Mock, keine Annahme.

Schritt 4: Screenshots aus dem Workflow heraus

Sobald das Grundsetup steht, wird der Browser Teil deiner Pipeline. In meinem Renderer steht in der Config nur eine URL. Beim Rendern öffnet Playwright die Seite, schießt das Bild und baut es in die Slide ein.

Das Website-Bild in meinem aktuellen Carousel ist genau so entstanden: live von e3xler.com geholt, beim Rendern, ohne Handarbeit. Kein Abfotografieren, kein Fake-Mockup.

Warum Playwright statt MCP?

Es gibt Browser-MCPs, und für interaktive Klick-Sessions sind sie stark. Für Pipelines habe ich mich trotzdem für das Script entschieden, aus einem Grund: Tokens.

Ein MCP Server lädt seine Tool-Beschreibungen ins Context Window, und die laufen bei jedem Turn mit. Ein Playwright-Script hat diesen Overhead nicht. Es läuft headless im Hintergrund, und das Ergebnis ist eine Datei, kein langer Chatverlauf. Für wiederholbare Jobs (rendern, testen, screenshotten) ist das die schlankere Architektur.

Typische Fehler

  • Zu groß anfangen. „Automatisiere mein Marketing" scheitert. „Screenshotte diese Seite" funktioniert und wächst.
  • Login-Walls unterschätzen. Instagram und Co. blocken anonyme Browser gern. Alles hinter Login oder Captcha bleibt bei mir Handarbeit, und das ist ok.
  • Ergebnisse ungeprüft übernehmen. Bei mir geht nichts raus ohne Review. Claude schlägt vor, ich entscheide. Gepostet wird über die API, nicht über den Browser.
  • Unklare Ansagen. Ein Task, ein Prompt, ein messbares Ergebnis. Alles andere produziert Schleifen.

Next Steps

  1. Die zwei Befehle oben ausführen
  2. Claude Code eine Seite screenshotten lassen
  3. Den ersten echten Job definieren: ein Formular testen, eine Seite überwachen, ein Bild für deinen Content ziehen

Inspiration zu KI-first Product Management & Marketing, direkt in dein Postfach.

Kein Spam, jederzeit abbestellbar

Chris Eichler