Browser-Automatisierung mit MCP für Claude Code

Problem: Regression-Klicks, Seiten-Scraping und QA-Abläufe per Hand durchführen frisst täglich wertvolle Zeit. Ein MCP-Browser-Server gibt das alles an Claude ab.

Quick Win: Binde den Puppeteer MCP Server in deine Claude Code Konfiguration ein und deine erste Automatisierung läuft in Minuten. Füge das in deine Settings-Datei ein:

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

Dann sagst du Claude: "Open a browser, navigate to example.com, and take a screenshot". Browser, Navigation und Screenshot passieren ohne einen weiteren Tastendruck von dir.

Klassische Browser-Arbeit bedeutet Selector-Bastelei, State-Verwaltung und fünfzig Zeilen Code für ein einzelnes Formular. Ein MCP-Browser-Server dreht das um. Du beschreibst das Ergebnis in Worten und Claude fährt.

Statt fünfzig Zeilen Puppeteer zu schreiben, sagst du: "Fill out this contact form with test data and submit it." Das ist das ganze Skript.

Den Browser MCP Server installieren

Puppeteer MCP Server Konfiguration

Die Puppeteer-Konfiguration liegt in deiner MCP-Datei. Nutze ~/.claude.json für die CLI oder claude_desktop_config.json für Desktop:

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

Speichern, Claude Code neustarten, und der Server registriert sich. Zum Testen fragst du Claude, einen Browser zu starten und eine beliebige URL zu öffnen.

Playwright MCP Server einrichten

Playwright gibt dir Chrome, Firefox und Safari in einem Paket, weshalb Teams es für echte Test-Suites bevorzugen. Installiere zuerst @modelcontextprotocol/server-playwright:

npm install -g @modelcontextprotocol/server-playwright

Dann registrierst du ihn in deiner MCP-Konfiguration:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-playwright"]
    }
  }
}

Alternative Playwright MCP: Ein Community-Build unter @executeautomation/playwright-mcp-server bietet dieselbe Grundfunktionalität:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@executeautomation/playwright-mcp-server"]
    }
  }
}

Cross-Browser-Abdeckung ist der Grund, warum die meisten vollständigen Test-Suites auf Playwright MCP für ernsthaftes Automatisieren mit Claude Code setzen.

Was du damit anstellen kannst

Web Scraping leicht gemacht

Frag nach gescrapten Daten auf Englisch. Eine Anfrage wie "Open example.com, find all product listings, and extract the titles and prices into a CSV file" startet die gesamte Pipeline: Browser-Start, Element-Suche, Daten-Extraktion, CSV-Schreiben.

Formular-Tests automatisieren

Probier das: "Open my local development site at localhost:3000, fill out the signup form with test data, submit it, and verify the success message appears". Ein Satz ersetzt die gesamte manuelle QA-Schleife. Claude besucht die URL, erfindet plausible Eingaben, füllt jedes Feld aus und prüft den Erfolgsstatus.

Visuelle Regressionstests

Ein Snapshot-Durchlauf über drei Breakpoints klingt so: "Take screenshots of my homepage at different screen sizes (mobile, tablet, desktop) and save them to ./screenshots/".

Mehrstufige Nutzer-Journeys

Größere Abläufe funktionieren auch. Versuch das: "Simulate a complete e-commerce purchase flow: browse products, add to cart, go through checkout with test details, and verify the order confirmation page".

Authentifizierungs-Flows

Login-States gehen als Einzeiler: "Log into my staging environment, navigate to the admin dashboard, and verify all navigation links work correctly".

Performance-Monitoring

Frag auch nach Ladezeiten: "Open my app, measure page load times for the dashboard, and report any pages that take longer than 3 seconds to load".

Fehlerbehebung bei der Browser-Automatisierung

Browser-Start schlägt fehl: Chrome oder Chromium muss auf dem Rechner vorhanden sein. Unter Linux:

sudo apt-get install -y chromium-browser

Elemente nicht gefunden: Dynamische Seiten brauchen ein Warten. Sag Claude: "Wait for the login button to be visible before clicking it."

Timeouts: Langsame Seiten brauchen mehr Geduld. Sag: "Navigate to the page and wait up to 30 seconds for it to fully load."

Integration in deinen Workflow

Browser-Automatisierung fügt sich direkt in den Rest deines Entwicklungs-Loops ein:

• Testing: Regression-Durchläufe während des Builds
• Debugging: Screenshots, die den Bug beweisen
• Monitoring: Stilles Abfragen von Produktionsseiten
• Development: Feature-Checks in jedem Browser

Kontext-Optimierung mit MCP Tool Search

Diese Server funktionieren gut zusammen mit MCP Tool Search. Tool Search lädt Playwright- oder Puppeteer-Definitionen nur dann in den Kontext, wenn der Job tatsächlich einen Browser braucht, was dein Fenster für alles andere frei hält.

Arbeite dich von kleinen Teilen nach oben. Starte mit einer Screenshot-Anfrage. Wechsel dann zu einem Formular. Dann baust du dir deinen Weg zu vollständigen End-to-End-Nutzer-Journeys, sobald sich der natürliche Sprachfluss normal anfühlt.