Blog

Claude Code nutzen für Browser Automation

Ashley Innocent

Ashley Innocent

22 January 2026

Claude Code nutzen für Browser Automation

enterprise.banner.title

enterprise.banner.feature1

enterprise.banner.feature2

enterprise.banner.feature3

enterprise.banner.ctaB

Browserautomatisierung erforderte traditionell das Schreiben komplexer Skripte, das Verwalten von Selektoren und das Handhaben unvorhersehbarer Seitenstatus. Claude Code transformiert diesen Prozess, indem es Ihnen ermöglicht, in natürlicher Sprache zu beschreiben, was Sie wollen, und die KI es in präzise Browseraktionen übersetzt.

Was Claude Codes Browserautomatisierung so leistungsstark macht:

💡
APIs zusammen mit Browser-Workflows testen? Apidog ergänzt die Claude Code Browserautomatisierung durch visuelles API-Testing und Mock-Server. Wenn Ihre Browser-Tests API-Aufrufe auslösen, hilft Apidog Ihnen, den gesamten Anforderungs-Antwort-Zyklus zu validieren. Testen Sie Apidog kostenlos, um umfassende End-to-End-Test-Workflows zu erstellen.
button

Dieser Leitfaden deckt alles ab, von der grundlegenden Einrichtung bis zu fortgeschrittenen Automatisierungsmustern mit MCP (Model Context Protocol) Servern.

Browser-Automatisierungsoptionen verstehen

Claude Code bietet mehrere Ansätze zur Browser-Automatisierung, die jeweils für unterschiedliche Anwendungsfälle geeignet sind.

Option 1: Playwright MCP (Empfohlen)

Microsofts Playwright MCP ist der empfohlene Ansatz für die Browser-Automatisierung mit Claude Code. Es bietet:

Playwright MCP Diagramm

Option 2: Puppeteer MCP (Community)

Obwohl das offizielle Puppeteer MCP-Paket veraltet ist, gibt es von der Community gepflegte Alternativen:

Puppeteer MCP Diagramm

Option 3: Claude Computer Use API

Für die vollständige Desktop-Steuerung über Browser hinaus:

Vergleichstabelle

FunktionPlaywright MCPPuppeteer MCPComputer Use API
Browser-UnterstützungChromium, Firefox, WebKitNur ChromiumJeder Browser
WartungMicrosoft (offiziell)CommunityAnthropic
Element-AnspracheBarrierefreiheitsbaumCSS-SelektorenVisuell/Koordinaten
Headless-ModusJaJaNein (benötigt Anzeige)
Am besten fürWeb-Testing, ScrapingLegacy-ProjekteDesktop-Automatisierung

Playwright MCP einrichten

Playwright MCP ist der empfohlene Weg, um die Browser-Automatisierung zu Claude Code hinzuzufügen. Hier erfahren Sie, wie Sie es einrichten.

Voraussetzungen

Schritt 1: MCP-Server konfigurieren

Fügen Sie Playwright MCP zu Ihrer Claude Code-Konfiguration hinzu. Erstellen oder bearbeiten Sie .claude/settings.json:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"],
      "env": {
        "PLAYWRIGHT_BROWSERS_PATH": "0"
      }
    }
  }
}

Schritt 2: Installation überprüfen

Starten Sie Claude Code und überprüfen Sie, ob der MCP-Server läuft:

claude

Sie sollten Playwright MCP in den verfügbaren Tools sehen. Testen Sie es mit einem einfachen Befehl:

Navigieren Sie zu https://example.com und nennen Sie mir den Seitentitel

Schritt 3: Browser-Optionen konfigurieren

Für mehr Kontrolle passen Sie die MCP-Servereinstellungen an:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--browser", "chromium",
        "--headless"
      ],
      "env": {
        "PLAYWRIGHT_BROWSERS_PATH": "0"
      }
    }
  }
}

Verfügbare Optionen:

Schritt 4: Ausführung in CI/CD

Für automatisierte Pipelines verwenden Sie den Headless-Modus:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--headless",
        "--browser", "chromium"
      ]
    }
  }
}

Alternative: Puppeteer MCP

Wenn Sie Puppeteer bevorzugen oder bestehende Puppeteer-basierte Workflows haben, können Sie von der Community gepflegte MCP-Server verwenden.

Installation

Verwenden Sie den Community Puppeteer MCP-Server:

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "puppeteer-mcp-server"]
    }
  }
}

Alternative: puppeteer-mcp-claude

Eine weitere Community-Option mit umfassender Browser-Automatisierung:

# Repository klonen
git clone https://github.com/jaenster/puppeteer-mcp-claude.git
cd puppeteer-mcp-claude
npm install

In .claude/settings.json konfigurieren:

{
  "mcpServers": {
    "puppeteer": {
      "command": "node",
      "args": ["/path/to/puppeteer-mcp-claude/index.js"]
    }
  }
}

Wichtige Unterschiede zu Playwright

AspektPlaywright MCPPuppeteer MCP
Einrichtungnpx (keine Installation)Kann npm install erfordern
BrowserMehrereChrome/Chromium
Selektor-StrategieBarrierefreiheitsbaumCSS/XPath
WartungMicrosoftCommunity

Grundlegende Browser-Automatisierungsbefehle

Sobald Ihr MCP-Server konfiguriert ist, können Sie Browser mit natürlicher Sprache steuern.

Navigiere zu https://github.com

Gehe zur Anmeldeseite auf github.com

Öffne https://docs.example.com/api in einem neuen Tab

Interaktion mit Elementen

Klicke auf den Button "Anmelden"

Gib "mein-benutzername" in das E-Mail-Feld ein

Wähle "Deutschland" aus dem Dropdown-Menü für das Land

Aktiviere das Kontrollkästchen "Angemeldet bleiben"

Seiteninhalt lesen

Hole den Textinhalt der Hauptüberschrift

Liste alle Links auf der aktuellen Seite auf

Extrahiere die Produktpreise von dieser Seite

Screenshots erstellen

Erstelle einen Screenshot der aktuellen Seite

Erfasse einen Screenshot nur vom Navigationsmenü

Warten und Timing

Warte, bis der Lade-Spinner verschwindet

Warte 3 Sekunden und klicke dann auf den Senden-Button

Warte, bis die Meldung "Erfolg" erscheint

Formularbearbeitung

Fülle das Kontaktformular aus:
- Name: Max Mustermann
- E-Mail: max@example.com
- Nachricht: Automatisierung testen
Danach das Formular absenden

Komplexe Interaktionen

Scrolle zum Footer und klicke auf den Link "Datenschutzrichtlinie"

Fahre mit der Maus über das Menü "Produkte" und klicke auf "Unternehmen"

Ziehe den Schieberegler auf die 75%-Position

Fortgeschrittene Automatisierungsmuster

Muster 1: Mehrstufige Workflows

Komplexe Automatisierungssequenzen erstellen:

Automatisiere den folgenden Kassenvorgang:
1. Navigiere zu https://shop.example.com
2. Suche nach "kabellose Kopfhörer"
3. Klicke auf das erste Produktergebnis
4. Wähle Größe "Mittel", falls verfügbar
5. Klicke auf "In den Warenkorb"
6. Gehe zum Warenkorb und überprüfe, ob der Artikel vorhanden ist
7. Mache einen Screenshot des Warenkorbs

Muster 2: Datenextraktion

Strukturierte Daten von Webseiten extrahieren:

Gehe zu https://news.ycombinator.com und extrahiere die Top 10 Storys mit:
- Titel
- URL
- Punkte
- Anzahl der Kommentare
- Veröffentlichungszeitpunkt

Im JSON-Format ausgeben

Muster 3: Authentifizierungs-Workflows

Anmeldesequenzen handhaben:

Melde dich bei der Anwendung an:
1. Navigiere zu https://app.example.com/login
2. Gib Benutzernamen ein: test@example.com
3. Gib das Passwort aus der Umgebungsvariablen LOGIN_PASSWORD ein
4. Klicke auf Anmelden
5. Warte, bis das Dashboard geladen ist
6. Überprüfe die erfolgreiche Anmeldung durch Suchen nach dem Text "Willkommen"

Muster 4: Visuelles Regressionstesting

Seitenstatus vergleichen:

1. Navigiere zu https://staging.example.com
2. Erstelle einen Screenshot der gesamten Seite mit dem Namen "staging-homepage"
3. Navigiere zu https://production.example.com
4. Erstelle einen Screenshot der gesamten Seite mit dem Namen "production-homepage"
5. Vergleiche die beiden Screenshots und melde eventuelle Unterschiede

Muster 5: Überwachung und Benachrichtigung

Überwachungs-Workflows erstellen:

Überprüfe, ob der Dienst fehlerfrei ist:
1. Navigiere zu https://status.example.com
2. Suche nach dem Text "Alle Systeme betriebsbereit"
3. Wenn nicht gefunden, extrahiere die aktuelle Statusmeldung
4. Erstelle einen Screenshot zur Dokumentation
5. Melde die Ergebnisse

Muster 6: E2E-Testing mit API-Validierung

Browser- und API-Tests kombinieren:

Teste den Benutzerregistrierungsablauf:
1. Navigiere zu https://app.example.com/register
2. Fülle das Registrierungsformular mit Testdaten aus
3. Sende das Formular ab
4. Warte auf die Bestätigungsseite
5. Überprüfe, ob der Benutzer erstellt wurde, indem du die API-Antwort überprüfst
6. Mache einen Screenshot der Erfolgsseite

Beim Testen von Workflows, die APIs involvieren, verwenden Sie Apidog, um die Backend-Antworten zu validieren. Sie können überprüfen, ob Ihre Browseraktionen die korrekten API-Aufrufe auslösen und erwartete Antworten erhalten.

Apidog - Backend API und Web Testing Dashboard

Anwendungsfälle aus der Praxis

Anwendungsfall 1: Automatisierte Code-Review-Screenshots

Visuelle Dokumentation für Code-Reviews erfassen:

Erfasse für das PR-Review Screenshots von:
1. Der Anmeldeseite vor Änderungen
2. Der Anmeldeseite nach Änderungen
3. Dem Fehlerzustand bei Eingabe ungültiger Anmeldeinformationen
4. Der erfolgreichen Weiterleitung nach gültiger Anmeldung

Speichere alle Screenshots unter ./review-screenshots/

Anwendungsfall 2: Wettbewerbsanalyse

Wettbewerber-Websites überwachen:

Analysiere die Preise der Wettbewerber:
1. Navigiere zu https://competitor.com/pricing
2. Extrahiere alle Plan-Namen und Preise
3. Erstelle einen Screenshot der Preisübersicht
4. Vergleiche mit unseren aktuellen Preisdaten
5. Erstelle einen zusammenfassenden Bericht

Anwendungsfall 3: Automatisiertes Formular-Testing

Formularvalidierung über verschiedene Szenarien hinweg testen:

Teste die Validierung des Kontaktformulars:

Test 1: Leere Übermittlung
- Leeres Formular absenden
- Überprüfen, ob alle erforderlichen Feldfehler angezeigt werden
- Screenshot: empty-form-errors.png

Test 2: Ungültige E-Mail
- "Max" als Name eingeben
- "ungültige-email" als E-Mail eingeben
- Absenden
- E-Mail-Validierungsfehler überprüfen
- Screenshot: invalid-email-error.png

Test 3: Gültige Übermittlung
- Alle Felder korrekt ausfüllen
- Absenden
- Erfolgsmeldung überprüfen
- Screenshot: form-success.png

Anwendungsfall 4: SEO-Audits

SEO-Checks automatisieren:

Führe ein SEO-Audit für https://mysite.com durch:
1. Überprüfe die Länge des Seitentitels (sollte 50-60 Zeichen sein)
2. Überprüfe, ob eine Meta-Beschreibung existiert und wie lang sie ist
3. Überprüfe, ob ein H1-Tag existiert und eindeutig ist
4. Überprüfe, ob alle Bilder Alt-Texte haben
5. Überprüfe, ob die kanonische URL gesetzt ist
6. Suche nach fehlerhaften Links auf der Seite
7. Erstelle einen Audit-Bericht

Anwendungsfall 5: Barrierefreiheitstests

Barrierefreiheitsprüfungen automatisieren:

Führe ein Barrierefreiheits-Audit für https://app.example.com durch:
1. Navigiere zur Startseite
2. Überprüfe die Kontrastverhältnisse der Farben
3. Überprüfe, ob alle interaktiven Elemente über die Tastatur zugänglich sind
4. Überprüfe, ob ARIA-Labels vorhanden sind
5. Überprüfe, ob Fokus-Indikatoren sichtbar sind
6. Teste mit Screenreader-Simulation
7. Erstelle einen Barrierefreiheitsbericht

Anwendungsfall 6: Performance-Monitoring

Seitenlade-Performance verfolgen:

Überwache die Ladeleistung der Seite:
1. Browser-Cache leeren
2. Navigiere zu https://app.example.com
3. Erfasse die Zeit bis zum ersten aussagekräftigen Inhalt (First Contentful Paint)
4. Erfasse die Zeit bis zur Interaktivität
5. Erfasse den Netzwerk-Wasserfall
6. Mache einen Screenshot, wenn vollständig geladen
7. Vergleiche mit Basis-Metriken

Integration in CI/CD-Pipelines

GitHub Actions Integration

Browser-Automatisierung zu Ihrer CI-Pipeline hinzufügen:

# .github/workflows/e2e-tests.yml
name: E2E Browser-Tests

on:
  pull_request:
    branches: [main, develop]

jobs:
  browser-tests:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Node.js einrichten
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Playwright Browser installieren
        run: npx playwright install --with-deps chromium

      - name: Claude Code installieren
        run: npm install -g @anthropic-ai/claude-code

      - name: Browser-Tests ausführen
        env:
          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
        run: |
          claude --mcp playwright "
            Führe die folgenden Browser-Tests aus:
            1. Navigiere zu ${{ env.STAGING_URL }}
            2. Teste den Anmeldevorgang mit Test-Anmeldeinformationen
            3. Überprüfe, ob das Dashboard korrekt geladen wird
            4. Erstelle Screenshots von jedem Schritt
            5. Melde eventuelle Fehler
          "

      - name: Screenshots hochladen
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: browser-test-screenshots
          path: screenshots/

Einen Browser-Test-Skill erstellen

Einen wiederverwendbaren Skill für Browser-Tests erstellen:

---
name: browser-test-runner
version: "1.0.0"
description: Führt browserbasierte E2E-Tests mit Playwright MCP aus
user-invocable: true
allowed-tools:
  - Bash
  - Read
  - Write
  - mcp_playwright
---

# Browser-Test-Runner

Automatisierter Browser-Test-Skill unter Verwendung von Playwright MCP.

## Verwendung

```bash
/browser-test-runner --url https://app.example.com --suite smoke
/browser-test-runner --url https://staging.example.com --suite full

Claude Computer Use API

Für Szenarien, die eine vollständige Desktop-Steuerung erfordern, bietet Claudes Computer Use API umfassende Automatisierungsfunktionen.

Übersicht

Computer Use ist eine Beta-Funktion, die es Claude ermöglicht:

Grundlegende Einrichtung

import anthropic

client = anthropic.Anthropic()

response = client.messages.create(
    model="claude-sonnet-4-20250514",
    max_tokens=1024,
    tools=[
        {
            "type": "computer_20250124",
            "name": "computer",
            "display_width_px": 1920,
            "display_height_px": 1080,
            "display_number": 1
        }
    ],
    messages=[
        {
            "role": "user",
            "content": "Öffne Chrome und navigiere zu github.com"
        }
    ],
    betas=["computer-use-2025-01-24"]
)

Wann Computer Use gegenüber MCP zu verwenden ist

SzenarioEmpfohlener Ansatz
Web ScrapingPlaywright MCP
E2E-TestingPlaywright MCP
Desktop-App-AutomatisierungComputer Use API
Cross-Anwendungs-WorkflowsComputer Use API
CI/CD-PipelinesPlaywright MCP (headless)
Visuelles TestingBeide

Best Practices für Computer Use

  1. Aktionen immer überprüfen, bevor geklickt wird
  2. Spezifische Koordinaten verwenden, wenn möglich
  3. Verzögerungen hinzufügen zwischen schnellen Aktionen
  4. Fehlerbehebung implementieren für verpasste Klicks
  5. Umfang auf benötigte Berechtigungen begrenzen

Sicherheitsüberlegungen

Authentifizierungsverwaltung

Tun Sie dies:

Tun Sie dies nicht:

# Umgebungsvariablen verwenden
export TEST_USERNAME="test@example.com"
export TEST_PASSWORD="sicheres-test-passwort"

Melden Sie sich mit den Anmeldeinformationen aus den Umgebungsvariablen an
TEST_USERNAME und TEST_PASSWORD

Datenschutz

Tun Sie dies:

Tun Sie dies nicht:

Netzwerksicherheit

Tun Sie dies:

Tun Sie dies nicht:

MCP Server-Sicherheit

  1. Lokal ausführen, wenn möglich
  2. MCP-Servercode überprüfen vor der Verwendung
  3. Tool-Berechtigungen auf das Minimum beschränken
  4. MCP-Server-Protokolle auf Anomalien überwachen

Fazit

Die Browser-Automatisierung mit Claude Code verändert die Art und Weise, wie Entwickler an Web-Tests, Scraping und Automatisierung herangehen. Durch die Kombination von Anweisungen in natürlicher Sprache mit leistungsstarken MCP-Servern wie Playwright können Sie ausgeklügelte Automatisierungs-Workflows erstellen, ohne komplexe Skripte schreiben zu müssen.

Für umfassende Tests kombinieren Sie die Claude Code Browser-Automatisierung mit API-Validierung. Laden Sie Apidog kostenlos herunter, um vollständige Test-Workflows zu erstellen, die sowohl Ihr Frontend als auch Ihr Backend abdecken.

button

Praktizieren Sie API Design-First in Apidog

Entdecken Sie eine einfachere Möglichkeit, APIs zu erstellen und zu nutzen

Kostenlos registrierenHerunterladen