browsing-with-playwright
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Ü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 AnzeigenAutomate 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
- Navigate to page
- Get snapshot to find element refs
- Fill form fields using refs
- Click submit
- Wait for confirmation
- Screenshot result
Workflow: Data Extraction
- Navigate to page
- Get snapshot (contains text content)
- Use browser_evaluate for complex extraction
- Process results
Verification
Run: python3 scripts/verify.py
Expected: ✓ Playwright MCP server running
If Verification Fails
- Run diagnostic:
pgrep -f "@playwright/mcp" - Check: Server process running on port 8808
- Try:
bash scripts/start-server.sh - Stop and report if still failing - do not proceed with downstream steps
Tool Reference
See references/playwright-tools.md for complete tool documentation.
Troubleshooting
| Issue | Solution |
|---|---|
| Element not found | Run browser_snapshot first to get current refs |
| Click fails | Try browser_hover first, then click |
| Form not submitting | Use "submit": true with browser_type |
| Page not loading | Increase wait time or use browser_wait_for |
| Server not responding | Stop 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 herunterladenKlonen 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





Heim
