Cómo usar Playwright MCP con Claude Code: automatización del navegador y configuración de proxy

Los scripts estándar de scraping y QA suelen fallar en cuanto un sitio web actualiza su diseño o cambia el nombre de una clase CSS. Conectar el paquete playwright-mcp a la CLI de Claude Code resuelve ese problema. A través del Model Context Protocol (MCP), el navegador envía directamente al agente de IA un mapa de texto limpio de la página. Ya no tienes que buscar selectores CSS a mano ni enviar capturas de pantalla pesadas a un modelo de visión. Los ingenieros de QA, los desarrolladores de scrapers y los analistas controlan Chromium, Firefox, WebKit y Microsoft Edge directamente desde la terminal, mientras enrutan el tráfico a través de proxies.

TL;DR: resumen rápido del flujo de trabajo de Claude con Playwright MCP

• Cómo funciona: el paquete playwright-mcp envía a Claude Code una instantánea de accesibilidad ligera de playwright mcp (browser_snapshot) en lugar de imágenes pesadas, lo que reduce el consumo de tokens hasta un 80 %.

• Configuración con un solo comando: al ejecutar claude mcp add playwright -- npx @playwright/mcp@latest se registra el servidor oficial de playwright mcp para una sola carpeta, para un repositorio compartido del equipo o de forma global en todo el ordenador.

• Aislamiento de perfiles: combinar la bandera --isolated con un archivo de cookies --storage-state (o con carpetas --user-data-dir independientes) permite ejecutar varias ventanas del navegador en paralelo sin errores de bloqueo de archivos.

• Enrutamiento por proxy: al pasar --proxy-server y HTTP_PROXY dentro de .mcp.json, el tráfico del navegador pasa por proxies móviles LTE/5G, proxies ISP residenciales estáticos o proxies residenciales rotativos.

• Comprobación previa de la IP: antes de lanzar la tarea, verifica la reputación de tu IP en el verificador Fraud Score integrado en tu panel de control de CyberYozh App.

👉 Explora el catálogo de proxies de CyberYozh App por país y tipo de proveedor

Qué hace Playwright MCP dentro del navegador

¿En qué se diferencia playwright mcp de las herramientas de navegador anteriores? Los agentes de IA visuales tradicionales tomaban imágenes de pantalla completa y hacían clic en los botones usando coordenadas X e Y aproximadas en píxeles. Cuando aparecía un banner promocional o cambiaba el diseño adaptable, el clic fallaba.

El servidor oficial de playwright mcp de Microsoft (@playwright/mcp) lee el árbol de accesibilidad del navegador en lugar de capturar píxeles. Al llamar a browser_snapshot, se obtiene un mapa de texto estructurado de todos los elementos interactivos de la página. Cada botón, enlace o campo de entrada recibe una etiqueta de referencia exacta, como textbox "Search catalog" [ref=e5] o button "Apply filter" [ref=e12]. Gracias a la instantánea de accesibilidad de playwright mcp, Claude Code pasa ref=e5 directamente a browser_type o browser_click sin adivinar coordenadas. El servidor también inspecciona el tráfico de API en segundo plano (browser_network_requests), lee los registros de la consola (browser_console_messages), cambia de pestaña y exporta PDF o capturas de pantalla (browser_pdf_save, browser_take_screenshot).

Este flujo de trabajo conecta tres etapas de la recopilación automatizada de datos. El web scraping estándar descarga el código HTML sin procesar, el screen scraping lee los datos visuales que el navegador renderiza tras ejecutar JavaScript, y el parseo de datos extrae campos estructurados a CSV, Excel o JSON. Con playwright-mcp, el agente lee el árbol DOM en vivo una vez que JavaScript termina de renderizar y extrae los datos estructurados de inmediato.

👉 Explora la infraestructura de proxies para agentes de IA y automatización de navegadores en CyberYozh App

Cómo usar Playwright MCP con Claude Code en la terminal

Antes de probar cómo usar playwright mcp con Claude Code en sitios web reales, comprueba tres requisitos previos en tu equipo: Node.js 18 o superior (se recomienda Node.js 20+ LTS), una CLI de Claude Code autenticada (@anthropic-ai/claude-code) y credenciales de proxy activas para evitar los límites de solicitudes.

Cómo añadir Playwright MCP a Claude Code: tres modos de configuración

Puedes añadir Playwright MCP a Claude Code con un solo comando usando la bandera --scope para definir el nivel de configuración: local (carpeta actual), project (repositorio compartido del equipo) o user (perfil global). La configuración de la carpeta local siempre prevalece sobre la del proyecto y la global.

Ejecuta los comandos siguientes para comprobar las versiones instaladas, precargar el binario de Chromium y registrar el servidor:

# 1. Check installed Node.js and Claude Code versions
node --version
claude --version

# 2. Pre-install the package and Chromium browser
npx @playwright/mcp@latest --version
npx playwright install chromium

# 3. Register the server (choose one of the three options)
# Option A: Only for the currently open folder
claude mcp add playwright -- npx @playwright/mcp@latest

# Option B: Globally for all your projects on this computer
claude mcp add playwright --scope user -- npx @playwright/mcp@latest

# Option C: Create a shared .mcp.json file in the project root for your team
claude mcp add playwright --scope project -- npx @playwright/mcp@latest

# 4. Verify the list of connected MCP servers
claude mcp list

Después de ejecutar claude mcp add playwright, también puedes instalar la versión de la comunidad de ExecuteAutomation (@executeautomation/playwright-mcp-server), que incluye preajustes de viewport para 143 modelos de smartphones y equipos de escritorio. Si prefieres hacer scraping de sitios web a través de Claude AI sin editar archivos de configuración manualmente, nuestro Yozh Scraper en GitHub, de código abierto, enruta el tráfico automáticamente a través de tus proxies de CyberYozh App.

👉 Alquila proxies móviles LTE/5G desde $1.70/día con tráfico ilimitado

Configuración del proxy de Playwright MCP en .mcp.json

Cuando una sesión de claude playwright mcp revisa landing pages publicitarias localizadas, compara precios regionales o hace scraping de catálogos de productos, las solicitudes rápidas desde una única IP doméstica o de oficina activan CAPTCHAs. Añadir una configuración de proxy de playwright mcp en .mcp.json (o en ~/.claude.json) enruta el tráfico del navegador a través de tu región objetivo:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest",
        "--browser",
        "chromium",
        "--isolated",
        "--proxy-server=http://proxy.cyberyozh.com:8080"
      ],
      "env": {
        "HTTP_PROXY": "http://username:password@proxy.cyberyozh.com:8080",
        "HTTPS_PROXY": "http://username:password@proxy.cyberyozh.com:8080",
        "PLAYWRIGHT_MCP_PING_TIMEOUT_MS": "15000"
      }
    }
  }
}

Nota: la dirección del servidor (proxy.cyberyozh.com), el puerto (8080), el nombre de usuario y la contraseña anteriores son marcadores de posición. Sustitúyelos por el host, el puerto y las credenciales de acceso de la tarjeta de tu proxy en el panel de control de CyberYozh App.

Cómo gestionar los perfiles del navegador, las cookies y la persistencia de la IP del proxy

Para evitar bloqueos de perfil durante las ejecuciones en paralelo y reinicios de sesión inesperados, mantén separados dos mecanismos:

1. Dónde se guardan las cookies y las sesiones del navegador: de forma predeterminada, playwright-mcp guarda las cookies y los datos de los sitios en una única carpeta compartida en disco. Abrir una segunda terminal de Claude Code con esa misma carpeta provoca un error de bloqueo. Para ejecutar varios navegadores en paralelo, lanza un perfil aislado de playwright mcp con la bandera --isolated (que crea un perfil limpio en memoria) e inyecta las cookies de inicio de sesión guardadas mediante --storage-state=./auth.json. Si necesitas un perfil permanente en disco en lugar de un perfil aislado de playwright mcp en memoria, asigna una carpeta dedicada por proyecto con --user-data-dir.

2. Cómo mantener constante la IP del proxy: las cookies y las IP de proxy funcionan de forma independiente. Una IP estática no renovará un token de cookie caducado, y las cookies guardadas no evitarán que se cierre la sesión si tu IP externa cambia en mitad del pago. Ten en cuenta también una limitación de Chromium: la bandera --proxy-server acepta nombre de usuario y contraseña solo a través de HTTP/HTTPS. Las conexiones SOCKS5 directas en Chromium solo funcionan con autorización por IP (lista blanca) sin contraseña en tu panel de control, mientras que SOCKS5 protegido con contraseña requiere un proxifier local.

👉 Elige proxies residenciales rotativos desde $4.00/GB con sesiones sticky de hasta 24 horas

Qué proxies de CyberYozh App elegir para playwright-mcp

La línea de proxies adecuada depende de tus sitios web objetivo y de la duración de la sesión. La plataforma CyberYozh App ofrece cuatro opciones para la automatización de navegadores:

• Proxies móviles LTE/4G/5G (desde $1.70/día con tráfico ilimitado): funcionan con módems físicos y tarjetas SIM reales de operadores. Como las redes móviles usan CGNAT, cientos de suscriptores habituales de smartphones comparten una misma IP del operador. Es mucho menos probable que los filtros antifraude y los buscadores como Google restrinjan esa dirección durante el scraping de búsquedas multihilo o las comprobaciones de anuncios. Los planes privados permiten rotar la IP mediante un enlace del panel de control o la API REST, mientras que los planes compartidos rotan con un temporizador de 5 o 30 minutos. Admiten HTTP/HTTPS, SOCKS5, UDP, configuraciones VPN/VLESS y cambio de huella TCP/IP del sistema operativo. Como las torres de telefonía del operador renuevan periódicamente las concesiones de IP por su cuenta, alquila primero un plan diario para probar la duración de la sesión en ejecuciones de varias horas.

• Proxies ISP residenciales estáticos (desde $5.29/mes con tráfico ilimitado): ofrecen una IP doméstica dedicada de un proveedor de servicios de internet (ISP) real durante todo el período de alquiler, con un 99.9 % de disponibilidad y compatibilidad con HTTP/HTTPS y SOCKS5. Pensados para sesiones de varias semanas y meses en proyectos de clientes y marcas, paneles publicitarios, paneles de administración y tiendas online. Las agencias vinculan un proxy ISP estático a una carpeta de perfil de navegador dedicada (--user-data-dir) por cliente, de modo que las sesiones y las cookies nunca se mezclen.

• Proxies residenciales rotativos (desde $4.00/GB, mínimo 3 GB; hasta $2.50/GB con 100 GB): dan acceso a más de 100M de IP residenciales en más de 195 países. Incluyen segmentación gratuita por país, estado/región y ciudad, filtrado avanzado de IP previo a la asignación, 99.9 % de disponibilidad y hasta un 99.99 % de tasa de éxito de solicitudes. Puedes usar rotación por solicitud para el scraping de catálogos o mantener una IP hasta 24 horas con sesiones sticky. Los gigabytes sin usar se acumulan para el mes de facturación siguiente, y el Mass Credentials Generator y la API REST simplifican las configuraciones masivas.

• Proxies de datacenter (servidor) (desde $1.77/mes): ofrecen canales IPv4/IPv6 dedicados y compartidos, con tráfico ilimitado en los planes dedicados y un 99.99 % de disponibilidad para el scraping de alta velocidad de páginas públicas, la monitorización de disponibilidad y las pruebas de API.

👉 Selecciona proxies con tráfico ilimitado para web scraping y automatización de navegadores

Comprobación de la reputación de la IP con Fraud Score y solución de errores comunes

Antes de añadir un proxy a la configuración de playwright-mcp, comprueba su IP en el verificador de riesgo Fraud Score integrado ($0.15 por comprobación de IP, o $19.00/mes por 1,500 comprobaciones de IP, 1,500 comprobaciones de números de teléfono y 500 comprobaciones de tarjetas bancarias, con un ahorro de hasta $600/mes). La herramienta consulta IPQualityScore (IPQS), CyberSource, ThreatMetrix, Stripe Radar, PerimeterX y 118 listas negras OSINT, y muestra la etiqueta ISP/ASN, la puntuación de riesgo y el estado de Abuse Velocity antes de que lances el navegador.

Para probar la conexión, inicia el cliente con MCP_TIMEOUT=10000 claude para que npx tenga tiempo suficiente para descargar el paquete en la primera ejecución. Escribe /mcp en el chat para confirmar que playwright muestra el estado connected en verde. En tu primer prompt, nombra la herramienta de forma explícita para que Claude abra el navegador en lugar de escribir código de script:

Use Playwright MCP: open https://app.cyberyozh.com/checkers/, read the page structure, and list the available checkers for verifying IP addresses, phone numbers, and cards.

Si tus pruebas automatizadas cubren formularios de registro por SMS o flujos de pago, puedes alquilar números de teléfono virtuales para recibir SMS y emitir tarjetas virtuales en el mismo panel de control de CyberYozh App.

👉 Comprueba la reputación de la IP y el Fraud Score antes de lanzar el navegador

Primeros pasos con la automatización de navegadores en Claude Code

Combinar playwright-mcp con Claude Code permite controlar un navegador real con comandos de texto desde la terminal: el agente abre páginas, localiza elementos a través del árbol de accesibilidad y extrae datos sin depender de selectores frágiles. Si se complementa esa configuración con proxies móviles LTE/5G, ISP estáticos o residenciales rotativos de CyberYozh App, las pruebas regionales, las comprobaciones de tiendas y el scraping de catálogos se mantienen estables desde cualquier ubicación.

👉 Alquila números de teléfono virtuales para la verificación por SMS al probar flujos de registro