Option
HeimHeim Skill Browser-Automatisierung browsing-with-playwright

browsing-with-playwright

bilalmk/todo_correct bilalmk/todo_correct

Browser-Automatisierung mit Playwright MCP. Navigieren Sie auf Websites, füllen Sie Formulare aus, klicken Sie auf Elemente, erstellen Sie Screenshots und extrahieren Sie Daten. Verwenden Sie diese Funktion, wenn Aufgaben das Surfen im Internet, das Absenden von Formularen, Web-Scraping, UI-Tests oder sonstige Browser-Interaktionen erfordern. NICHT, wenn lediglich statische Inhalte abgerufen werden sollen (verwenden Sie stattdessen curl/wget).

...Alle erweitern
15
Zeit aktualisiert 25. August 2026

Über browsing-with-playwright

Die Funktion „ browsing-with-playwright “ ermöglicht die Browser-Automatisierung über den Playwright-MCP-Server, sodass Sie Webbrowser programmgesteuert für Aufgaben steuern können, die eine tatsächliche Browser-Interaktion erfordern. Diese Funktion löst das Problem, dass Sie mit dynamischen Webinhalten interagieren, Formulare ausfüllen, auf Schaltflächen klicken, Daten aus JavaScript-intensiven Websites extrahieren und UI-Tests durchführen müssen – alles Szenarien, in denen einfache HTTP-Anfragen nicht ausreichen, da sie kein JavaScript ausführen oder mit dem DOM interagieren können.

Die Funktion bietet umfassende Möglichkeiten zur Browsersteuerung, darunter Navigation, Interaktion mit Elementen (Klicken, Eingaben, Ausfüllen von Formularen, Auswahl aus Dropdown-Menüs), Überprüfung des Seitenzustands durch Barrierefreiheits-Snapshots und Screenshots, Warten auf dynamische Inhalte sowie die Ausführung von JavaScript. Sie behält den Browserstatus über mehrere Vorgänge hinweg mithilfe eines gemeinsamen Browserkontexts bei und eignet sich daher für mehrstufige Arbeitsabläufe wie das Einloggen in Konten, das Navigieren durch mehrseitige Formulare oder das Extrahieren von Daten aus Websites, die eine Interaktion erfordern. Der MCP-Server kann über Befehlszeilenaufrufe gesteuert werden, um mit bestimmten Elementen zu interagieren, die über Barrierefreiheits-Snapshots identifiziert wurden.

Diese Funktion eignet sich ideal für Entwickler und Automatisierungsingenieure, die Web-Interaktionen automatisieren müssen, für QA-Experten, die UI-Tests durchführen, für Dateningenieure, die dynamische Websites auslesen, sowie für alle, die mit Webanwendungen arbeiten, die eine tatsächliche Browser-Darstellung und Interaktion erfordern. Verwenden Sie diese Funktion, wenn Aufgaben das Absenden von Formularen, das Durchklicken von Benutzeroberflächen, das Warten auf das Laden dynamischer Inhalte oder andere Szenarien umfassen, in denen die JavaScript-Engine und die Rendering-Fähigkeiten des Browsers erforderlich sind. Für das einfache Abrufen statischer Inhalte sind herkömmliche Tools wie `curl` oder `wget` nach wie vor effizienter.

FAQ

Wann sollte ich diese Funktion anstelle einfacher HTTP-Anfragen verwenden?

Verwenden Sie diese Funktion, wenn Sie mit dynamischen Webinhalten interagieren müssen, die die Ausführung von JavaScript erfordern, Formulare ausfüllen, auf Schaltflächen klicken, auf das Laden von Inhalten warten oder sonstige browserbasierte Interaktionen durchführen müssen. Verwenden Sie „curl“ oder „wget“ zum Abrufen statischer Inhalte, bei denen keine Browserinteraktion erforderlich ist.

Warum ist das Flag „--shared-browser-context“ wichtig?

Das Flag „--shared-browser-context“ bewahrt den Browser-Zustand (Cookies, localStorage, Sitzungsdaten) über mehrere Aufrufe von „mcp-client.py“ hinweg. Ohne dieses Flag beginnt jeder Aufruf mit einem neuen Browser-Kontext, wodurch Anmeldesitzungen und andere zustandsbezogene Daten zwischen den Vorgängen verloren gehen.

Wie interagiere ich mit bestimmten Elementen auf einer Seite?

Verwenden Sie zunächst `browser_snapshot`, um einen Barrierefreiheitsbaum der Seite abzurufen, der Elementreferenzen (wie „e42“, „e15“) zurückgibt. Verwenden Sie diese Referenzen dann in Interaktionsbefehlen wie `browser_click`, `browser_type` oder `browser_fill_form`, um bestimmte Elemente anzusteuern.

Wann sollte ich „browser_run_code“ anstelle einzelner Befehle verwenden?

Verwenden Sie „browser_run_code“ für komplexe, mehrstufige Workflows, die atomar (alles oder nichts) ausgeführt werden sollen. Dies ist effizienter als mehrere separate Aufrufe und stellt sicher, dass der gesamte Vorgang als Einheit erfolgreich ist oder fehlschlägt.

Wann sollte ich den Playwright-Server anhalten?

Beenden Sie den Server, wenn Ihre Browser-Automatisierungsaufgabe abgeschlossen ist, um Ressourcen freizugeben. Lassen Sie ihn laufen, wenn Sie mehrere Browser-Aufgaben nacheinander ausführen. Wenn der Browser nicht mehr reagiert, beenden Sie den Server und starten Sie ihn neu.

Alle Dateien

6Dateien scripts/mcp-client.py 16,9KB Anzeigen SKILL.md 4,9KB Anzeigen scripts/stop-server.sh 0,9KB Anzeigen references/playwright-tools.md20,7KB Anzeigen scripts/verify.py 0,5KB Anzeigen scripts/start-server.sh 0,7 KB Anzeigen
Auf GitHub ansehen

Automate browser interactions via Playwright MCP server.

Server Lifecycle

Start Server

# Using helper script (recommended)bash scripts/start-server.sh# Or manuallynpx @playwright/mcp@latest --port 8808 --shared-browser-context &

Stop Server

# Using helper script (closes browser first)bash scripts/stop-server.sh# Or manuallypython3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_close -p '{}'pkill -f "@playwright/mcp"

When to Stop

  • End of task: Stop when browser work is complete
  • Long sessions: Keep running if doing multiple browser tasks
  • Errors: Stop and restart if browser becomes unresponsive

Important: The --shared-browser-context flag is required to maintain browser state across multiple mcp-client.py calls. Without it, each call gets a fresh browser context.

Quick Reference

Navigation

# Go to URLpython3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_navigate \  -p '{"url": "https://example.com"}'# Go backpython3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_navigate_back -p '{}'

Get Page State

# Accessibility snapshot (returns element refs for clicking/typing)python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_snapshot -p '{}'# Screenshotpython3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_take_screenshot \  -p '{"type": "png", "fullPage": true}'

Interact with Elements

Use ref from snapshot output to target elements:

# Click elementpython3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_click \  -p '{"element": "Submit button", "ref": "e42"}'# Type textpython3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_type \  -p '{"element": "Search input", "ref": "e15", "text": "hello world", "submit": true}'# Fill form (multiple fields)python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_fill_form \  -p '{"fields": [{"ref": "e10", "value": "[email protected]"}, {"ref": "e12", "value": "password123"}]}'# Select dropdownpython3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_select_option \  -p '{"element": "Country dropdown", "ref": "e20", "values": ["US"]}'

Wait for Conditions

# Wait for text to appearpython3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_wait_for \  -p '{"text": "Success"}'# Wait for time (ms)python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_wait_for \  -p '{"time": 2000}'

Execute JavaScript

python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_evaluate \  -p '{"function": "return document.title"}'

Multi-Step Playwright Code

For complex workflows, use browser_run_code to run multiple actions in one call:

python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_run_code \  -p '{"code": "async (page) => { await page.goto(\"https://example.com\"); await page.click(\"text=Learn more\"); return await page.title(); }"}'

Tip: Use browser_run_code for complex multi-step operations that should be atomic (all-or-nothing).

Workflow: Form Submission

  1. Navigate to page
  2. Get snapshot to find element refs
  3. Fill form fields using refs
  4. Click submit
  5. Wait for confirmation
  6. Screenshot result

Workflow: Data Extraction

  1. Navigate to page
  2. Get snapshot (contains text content)
  3. Use browser_evaluate for complex extraction
  4. Process results

Verification

Run: python3 scripts/verify.py

Expected: ✓ Playwright MCP server running

If Verification Fails

  1. Run diagnostic: pgrep -f "@playwright/mcp"
  2. Check: Server process running on port 8808
  3. Try: bash scripts/start-server.sh
  4. Stop and report if still failing - do not proceed with downstream steps

Tool Reference

See references/playwright-tools.md for complete tool documentation.

Troubleshooting

IssueSolution
Element not foundRun browser_snapshot first to get current refs
Click failsTry browser_hover first, then click
Form not submittingUse "submit": true with browser_type
Page not loadingIncrease wait time or use browser_wait_for
Server not respondingStop and restart: bash scripts/stop-server.sh && bash scripts/start-server.sh

browsing-with-playwright installieren

Laden Sie die Skill-Dateien herunter und entpacken Sie sie in Ihr Verzeichnis „.claude/skills/“.

ZIP herunterladen

Klonen Sie das Repository und kopieren Sie die Skill-Dateien in Ihr Projekt.

git clone https://github.com/bilalmk/todo_correct/blob/main/.claude/skills/mjs/browsing-with-playwright/SKILL.md # Copy SKILL.md to your .claude/skills/ directory

Kopieren Kopieren
Schnelle Einrichtung: Kopiere den Skill-Ordner nach „.claude/skills/“. Claude erkennt den Skill automatisch und nutzt ihn.

Ähnliche Skills

playwright-cli
Zeit aktualisiert 29. Juni 2026
frontend-testing-best-practices
Zeit aktualisiert 7. Juli 2026
Playwright Browser Automation
Zeit aktualisiert 29. Juni 2026
playwright-generate-test
Zeit aktualisiert 29. Juni 2026
OR