Hogar
browsing-with-playwright
bilalmk/todo_correct
Automatización del navegador mediante Playwright MCP. Navega por sitios web, rellena formularios, haz clic en elementos, haz capturas de pantalla y extrae datos. Úsalo cuando las tareas requieran navegar por la web, enviar formularios, extraer datos de la web, realizar pruebas de la interfaz de usuario o cualquier interacción con el navegador. NO lo utilices cuando solo se trate de recuperar contenido estático (en ese caso, utiliza curl o wget).
...Expandir todoAcerca de browsing-with-playwright
La habilidad « browsing-with-playwright » permite automatizar navegadores a través del servidor Playwright MCP, lo que te permite controlar mediante programación los navegadores web para tareas que requieren una interacción real con el navegador. Esta skill resuelve el problema de tener que interactuar con contenido web dinámico, rellenar formularios, hacer clic en botones, extraer datos de sitios con gran cantidad de JavaScript y realizar pruebas de la interfaz de usuario —todos ellos escenarios en los que las simples solicitudes HTTP se quedan cortas porque no pueden ejecutar JavaScript ni interactuar con el DOM—.
La habilidad ofrece capacidades completas de control del navegador, incluyendo navegación, interacción con elementos (hacer clic, escribir, rellenar formularios, seleccionar opciones en menús desplegables), inspección del estado de la página mediante instantáneas de accesibilidad y capturas de pantalla, espera de contenido dinámico y ejecución de JavaScript. Mantiene el estado del navegador a lo largo de múltiples operaciones mediante un contexto de navegador compartido, lo que la hace adecuada para flujos de trabajo de varios pasos, como iniciar sesión en cuentas, navegar por formularios de varias páginas o extraer datos de sitios que requieren interacción. El servidor MCP se puede controlar mediante llamadas de línea de comandos para interactuar con elementos específicos identificados a través de instantáneas de accesibilidad.
Esta skill es ideal para desarrolladores e ingenieros de automatización que necesitan automatizar interacciones web, profesionales de control de calidad que realizan pruebas de interfaz de usuario, ingenieros de datos que extraen datos de sitios web dinámicos y cualquier persona que trabaje con aplicaciones web que requieran una representación e interacción reales del navegador. Utilízala cuando las tareas impliquen el envío de formularios, hacer clic en interfaces, esperar a que se cargue contenido dinámico o cualquier situación en la que se requieran el motor JavaScript del navegador y sus capacidades de renderizado. Para la simple obtención de contenido estático, las herramientas tradicionales como curl o wget siguen siendo más eficientes.
Preguntas frecuentes
¿Cuándo debo utilizar esta habilidad en lugar de simples solicitudes HTTP?
Utiliza esta habilidad cuando necesites interactuar con contenido web dinámico que requiera la ejecución de JavaScript, rellenar formularios, hacer clic en botones, esperar a que se cargue el contenido o realizar cualquier interacción basada en el navegador. Utiliza curl o wget para recuperar contenido estático en el que no se necesite interacción con el navegador.
¿Por qué es importante el indicador --shared-browser-context?
El indicador --shared-browser-context mantiene el estado del navegador (cookies, localStorage, datos de sesión) a lo largo de múltiples llamadas a mcp-client.py. Sin él, cada llamada comienza con un contexto de navegador nuevo, lo que provoca la pérdida de sesiones de inicio de sesión y otros datos de estado entre operaciones.
¿Cómo puedo interactuar con elementos específicos de una página?
En primer lugar, utiliza browser_snapshot para obtener un árbol de accesibilidad de la página, que devuelve referencias a elementos (como «e42» o «e15»). A continuación, utiliza estas referencias en comandos de interacción como browser_click, browser_type o browser_fill_form para seleccionar elementos específicos.
¿Cuándo debo utilizar `browser_run_code` en lugar de comandos individuales?
Utiliza `browser_run_code` para flujos de trabajo complejos de varios pasos que deban ejecutarse de forma atómica (todo o nada). Esto resulta más eficiente que realizar varias llamadas por separado y garantiza que toda la operación se complete con éxito o falle en su conjunto.
¿Cuándo debo detener el servidor de Playwright?
Detén el servidor cuando haya finalizado tu tarea de automatización del navegador para liberar recursos. Manténlo en funcionamiento si estás realizando varias tareas del navegador de forma secuencial. Si el navegador deja de responder, detén y reinicia el servidor.
Todos los archivos
6archivos scripts/mcp-client.py 16,9KB Ver SKILL.md 4,9KB Ver scripts/stop-server.sh 0,9KB Ver references/playwright-tools.md20,7KBVer scripts/verify.py0,5KBVer scripts/start-server.sh0,7 KBVerAutomate 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 |
Instalar browsing-with-playwright
Descarga y descomprime los archivos de habilidades en tu directorio .claude/skills/.
Descargar ZIPClona el repositorio y copia los archivos de la habilidad a tu proyecto.
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
Copiar
