/ Verzeichnis / Playground / Puppeteer
← Alle Server ↗ GitHub
● Offiziell modelcontextprotocol ⚡ Sofort

Puppeteer

von modelcontextprotocol · modelcontextprotocol/servers-archived

Headless Chrome in einem MCP — navigieren, Screenshot, klicken, ausfüllen. Einfacher als Playwright, wenn Sie nur Chromium benötigen.

Archiviertes, aber noch funktionierendes Referenz-MCP von Anthropic. Steuert Headless Chromium über Puppeteer: navigieren, Screenshot, klicken, ausfüllen, auswählen, hovern und beliebige page.evaluate. Keine Accessibility-Tree-Funktionen — Sie arbeiten mit CSS-Selektoren. Verwenden Sie dies, wenn Playwright zu übertrieben wirkt.

▶ Demo ansehen 📦 Installieren 💡 Anwendungsfälle

Warum nutzen

Hauptfunktionen

Live-Demo

In der Praxis

puppeteer.replay ▶ bereit
0/0

Installieren

Wählen Sie Ihren Client

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-puppeteer"
      ]
    }
  }
}

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-puppeteer"
      ]
    }
  }
}

Cursor nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die globale.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-puppeteer"
      ]
    }
  }
}

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-puppeteer"
      ]
    }
  }
}

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "puppeteer",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-puppeteer"
      ]
    }
  ]
}

Continue nutzt ein Array von Serverobjekten statt einer Map.

~/.config/zed/settings.json
{
  "context_servers": {
    "puppeteer": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@modelcontextprotocol/server-puppeteer"
        ]
      }
    }
  }
}

In context_servers hinzufügen. Zed lädt beim Speichern neu.

claude mcp add puppeteer -- npx -y @modelcontextprotocol/server-puppeteer

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

Anwendungsfälle

Praxisnahe Nutzung: Puppeteer

Erstellen Sie einen Screenshot einer Liste von URLs für ein visuelles Audit

👤 QA, Designer, Content Manager ⏱ ~10 min beginner

Wann einsetzen: Sie haben eine Liste von Seiten und müssen alle nach einer Änderung überprüfen.

Ablauf
  1. Navigieren und erfassen
    Navigieren Sie für jede URL in [Liste], warten Sie auf das Laden, erstellen Sie einen vollseitigen Screenshot mit dem Namen <slug>.png.✓ Kopiert
    → N Screenshots gespeichert
  2. Vergleich mit Baseline (optional)
    Vergleichen Sie jeden Screenshot mit der entsprechenden Datei in ./baseline/. Markieren Sie alle, die sich um mehr als 5 % Pixel unterscheiden.✓ Kopiert
    → Liste geänderter Seiten
  3. Ergebnisse zusammenfassen
    Schreiben Sie eine einseitige Zusammenfassung: wie viele Seiten, wie viele wurden geändert, welche benötigen wahrscheinlich Überprüfung.✓ Kopiert
    → Schnelle Statusmeldung, die Sie in eine PR-Beschreibung einfügen können

Ergebnis: Ein baselinfähiger Screenshot-Satz mit einem Diff-Bericht, ohne Visual-Regression-Pipeline einzurichten.

Fallstricke
  • Dynamischer Inhalt (Daten, A/B-Banner) zeigt falsche Diffs — Fügen Sie puppeteer_evaluate hinzu, um diese Elemente vor dem Screenshot über CSS auszublenden
Kombinieren mit: filesystem

Wiederholt ein Formular mit Testdaten ausfüllen

👤 QA-Ingenieure, Backend-Entwickler, die Eingabeflüsse testen ⏱ ~15 min intermediate

Wann einsetzen: Sie müssen ein Formular mit 20 Eingabevariationen testen, um die Validierung zu überprüfen.

Voraussetzungen
  • Test-Umgebungs-URL — Führen Sie niemals gegen die Produktion aus — starten Sie eine Staging-Instanz auf
Ablauf
  1. Zum Formular navigieren
    Öffnen Sie https://staging.app/signup. Erstellen Sie einen Screenshot zur Bestätigung.✓ Kopiert
    → Seite geladen, Formular sichtbar
  2. Testfälle einreichen
    Für jeden Testfall [Liste: {email, password, expected_error}] füllen Sie die Felder aus, klicken Sie auf Senden und erfassen Sie den Text des Fehlermeldungselements.✓ Kopiert
    → Pro Fall tatsächlich vs erwartet
  3. Fehlabgleichungen melden
    Zusammenfassung: welche Fälle bestanden, welche fehlgeschlagen sind, welche Lücke es gab. Erstellen Sie einen Screenshot für jeden Fehler.✓ Kopiert
    → Testbericht mit Nachweisen

Ergebnis: Validierungsabdeckung über das hinaus, was Sie eine Playwright-Spezifikation schreiben würden, in 10 Minuten.

Fallstricke
  • Der vorherige Formularzustand bleibt zwischen den Ausführungen erhalten — Rufen Sie puppeteer_navigate für jede URL zwischen den Fällen auf, oder löschen Sie explizit Felder mit puppeteer_fill auf Selektor-Basis, indem Sie einen leeren String übergeben

Finden Sie fehlerhafte oder fehlende Bilder auf einer Seite

👤 Inhalts-/Dokumentationsverwaltung ⏱ ~10 min intermediate

Wann einsetzen: Nach der Migration oder nach einer CMS-Änderung – fehlerhafte Bilder sind häufig und peinlich.

Ablauf
  1. Laden Sie die Seite
    Öffnen Sie <URL>. Warten Sie 2 Sekunden auf Lazy-Load-Bilder.✓ Kopiert
    → Seite geladen
  2. Finden Sie fehlerhafte Bilder über Evaluieren
    Führen Sie page.evaluate aus, um jedes <img> zurückzugeben, bei dem naturalWidth === 0 – diese konnten nicht geladen werden. Geben Sie src und alt für jedes an.✓ Kopiert
    → Liste der fehlerhaften Bildquellen
  3. Wiederholen Sie auf der gesamten Website
    Wiederholen Sie für diese 20 URLs. Geben Sie eine CSV mit Seite, broken-img-src, alt-text aus.✓ Kopiert
    → Verwertbare CSV

Ergebnis: Eine konkrete Reparaturliste mit fehlerhaften Bildern und der Seite, auf der sie angezeigt werden.

Fallstricke
  • Lazy-Load-Bilder wurden noch nicht ausgelöst — Scrollen Sie die Seite zuerst mit window.scrollTo(0, document.body.scrollHeight) über Evaluieren, dann warten Sie und überprüfen Sie
Kombinieren mit: filesystem

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

puppeteer + filesystem

Erstellen Sie einen Screenshot von jeder Seite und speichern Sie als Bilddateien zur Überprüfung

Öffnen Sie jede URL in urls.txt, erstellen Sie einen vollseitigen Screenshot, speichern Sie unter ./audit/<slug>.png.✓ Kopiert
puppeteer + sentry

Reproduzieren Sie einen von Sentry gemeldeten Fehler, indem Sie den Pfad des Benutzers wiedergeben

Sentry-Problem WEB-3a91 hat Breadcrumbs, die zeigen, dass der Benutzer auf .checkout-btn klickte und dann #card-number ausfüllte. Reproduzieren Sie das in Puppeteer und erfassen Sie die Konsole.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

WerkzeugEingabenWann aufrufenKosten
puppeteer_navigate url Öffnen Sie eine URL oder leiten Sie sie um kostenlos
puppeteer_screenshot name, selector?, width?, height? Erfassen Sie die Seite oder ein bestimmtes Element Speicherplatz
puppeteer_click selector Klicken Sie ein Element per CSS-Selektor kostenlos
puppeteer_fill selector, value Geben Sie Text in eine Eingabe ein kostenlos
puppeteer_select selector, value Wählen Sie eine Option aus einem <select> kostenlos
puppeteer_hover selector Zeigen Sie schwebende Menüs oder Tooltips an kostenlos
puppeteer_evaluate script Führen Sie beliebiges JS im Seitenkontext aus – letzte Möglichkeit für alles, was Selektoren nicht können kostenlos

Kosten & Limits

Was der Betrieb kostet

API-Kontingent
Kostenlos – lokale Ausführung
Tokens pro Aufruf
Screenshots sind keine Tokens; Selektoren/Strings sind klein (~100 Token pro Aufruf)
Kosten in €
Kostenlos
Tipp
Verwenden Sie puppeteer_evaluate, um genau das zu extrahieren, was Sie als JSON benötigen – erstellen Sie keinen Screenshot und verwenden Sie keine OCR

Sicherheit

Rechte, Secrets, Reichweite

Credential-Speicherung: Setzen Sie niemals echte Benutzeranmeldedaten in Prompts – verwenden Sie dedizierte QA-Konten
Datenabfluss: Browser navigiert überall hin, wohin Sie ihn navigieren; nichts zum MCP-Publisher

Fehlerbehebung

Häufige Fehler und Lösungen

Fehler: Element nicht gefunden

Element wurde noch nicht gerendert. Fügen Sie eine kurze Wartezeit über puppeteer_evaluate('await new Promise(r => setTimeout(r, 1000))') hinzu oder verwenden Sie einen spezifischeren Selektor, der implizit wartet.

Chromium startet unter Linux/Docker nicht

Installieren Sie Abhängigkeiten: apt-get install -y chromium-browser oder verwenden Sie das Playwright MCP-Image, das alles vorinstalliert hat.

Screenshots sind leer

Seite wurde nicht geladen. Warten Sie nach der Navigation auf ein bekanntes Element: puppeteer_evaluate("document.querySelector('.main') !== null") in einer Abfrageschleife vor dem Screenshot.

Alternativen

Puppeteer vs. andere

AlternativeWann stattdessenKompromiss
Playwright MCPJede ernsthafte Browser-Automatisierung – die einfach bessere OptionEtwas größere Installation, aber bessere Zuverlässigkeit über Accessibility-Tree
Firecrawl MCPSie benötigen nur Inhaltsextraktion, keine InteraktionGehostet, kostet Credits, aber handhabt Anti-Bot besser
browser-tools MCPSie möchten Ihren echten Chrome überprüfen (mit angemeldeten Sitzungen, Erweiterungen)Erfordert eine Chrome-Erweiterung; völlig anderer Anwendungsfall

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen