Cloudflare Playwright

Controla un navegador para tareas de automatización web como navegación, escritura, clics y capturas de pantalla usando Playwright en Cloudflare Workers.

GitHubPrueba este MCPPatrocinado

Documentación

Ejemplo de Cloudflare Playwright MCP

Resumen

Este proyecto demuestra cómo usar Playwright con Cloudflare Workers como un servidor de Protocolo de Control de Modelos (MCP) utilizando Cloudflare Playwright MCP.

Permite que los asistentes de IA controlen un navegador a través de un conjunto de herramientas, lo que les permite realizar tareas de automatización web como navegación, escritura, clics y capturas de pantalla.

El servidor puede usarse con varias plataformas de IA, incluyendo Cloudflare AI Playground, Claude Desktop y GitHub Copilot en VS Code.

Despliegue

Sigue estos pasos para configurar y desplegar el proyecto:

Instala las dependencias:

npm ci

Despliega en Cloudflare Workers:

npx wrangler deploy

Uso con Cloudflare AI Playground

alt text

Cloudflare playground AI es una excelente manera de probar servidores MCP utilizando modelos LLM disponibles en Workers AI.

Navega a https://playground.ai.cloudflare.com/
Asegúrate de que el modelo esté configurado en llama-3.3-70b-instruct-fp8-fast
En Servidores MCP, establece la URL en https://[my-mcp-url].workers.dev/sse
Haz clic en Conectar
El estado debería actualizarse a Conectado y debería listar 14 herramientas disponibles

Ahora puedes comenzar a interactuar con el modelo, y este ejecutará las herramientas necesarias para lograr lo solicitado.

[!TIP] Para obtener los mejores resultados, da instrucciones simples que consistan en una sola acción, por ejemplo, "Crear una nueva entrada de tarea", "Ir al sitio de Cloudflare", "Tomar una captura de pantalla"

Ejemplo de una conversación:

Rol	Mensaje
Usuario	Ir a demo.playwright.dev/todomvc
Asistente	ejecuta la herramienta browser_navigate La página ha sido navegada a https://demo.playwright.dev/todomvc/. El título de la página es "React • TodoMVC". La instantánea de la página muestra el contenido de la página, incluyendo un encabezado, un cuadro de texto y varios enlaces.
Usuario	Crear alguna entrada de tarea
Asistente	ejecuta la herramienta browser_type Se ha creado una nueva entrada de tarea "Comprar víveres". La instantánea de la página muestra el contenido actualizado de la página, incluyendo la nueva entrada de tarea.
Usuario	Bien. Ahora crea una tarea en estilo loro
Asistente	ejecuta la herramienta browser_type Se ha creado una nueva entrada de tarea "Polly quiere una galleta" en estilo loro. La instantánea de la página muestra el contenido actualizado de la página, incluyendo la nueva entrada de tarea.
Usuario	Y crea otra tarea en estilo Yoda
Asistente	ejecuta la herramienta browser_type Se ha creado una nueva entrada de tarea "Un paseo, debo dar" en estilo Yoda. La instantánea de la página muestra el contenido actualizado de la página, incluyendo la nueva entrada de tarea.
Usuario	Tomar una captura de pantalla
Asistente	ejecuta la herramienta browser_take_screenshot Se ha tomado una captura de pantalla de la página actual. La captura está en formato PNG y tiene un tamaño de 56KB.
Usuario	Ahora haz clic en la casilla de verificación de la entrada de tarea del loro
Asistente	ejecuta la herramienta browser_clickt Se ha hecho clic en la casilla de verificación de la entrada de tarea del loro "Polly quiere una galleta". La instantánea de la página muestra el contenido actualizado de la página, con la casilla ahora marcada.
Usuario	Tomar una captura de pantalla
Asistente	ejecuta la herramienta browser_take_screenshot Se ha tomado una captura de pantalla de la página actual. La captura está en formato PNG y tiene un tamaño de 58KB.
Usuario	Eliminar las entradas de tarea completadas
Asistente	ejecuta la herramienta browser_clickt Se ha hecho clic en el botón "Borrar completadas". La instantánea de la página muestra el contenido actualizado de la página, con la entrada de tarea completada "Polly quiere una galleta" eliminada.
Usuario	Tomar una captura de pantalla final
Asistente	ejecuta la herramienta browser_take_screenshot Se ha tomado una captura de pantalla final de la página actual. La captura está en formato PNG y tiene un tamaño de 50KB.

Uso con Claude Desktop

Por ahora, Claude Desktop solo admite servidores MCP locales. Para usar playground-mcp con Claude Desktop, hacemos uso de mcp-remote, una herramienta que actúa como proxy para servidores MCP remotos y los expone localmente. Usa la siguiente configuración:

Abre el archivo de configuración de Claude Desktop.
Agrega el siguiente fragmento JSON bajo la sección mcpServers:

{
  "mcpServers": {
    "cloudflare-playwright-mcp": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://[my-mcp-url].workers.dev/sse"
      ]
    }
  }
}

Guarda el archivo de configuración y reinicia Claude Desktop para aplicar los cambios.

Esta configuración asegura que Claude Desktop pueda comunicarse con el servidor Cloudflare Playwright MCP.

Aquí hay un ejemplo de una sesión que abre la aplicación de demostración TODO, agrega "comprar limones" y toma una captura de pantalla, aprovechando las herramientas de playwright-mcp y Browser Rendering:

alt text

Configuración en VSCode

Puedes instalar el servidor Playwright MCP usando la CLI de VS Code:

# For VS Code
code --add-mcp '{"name":"cloudflare-playwright","type":"sse","url":"https://[my-mcp-url].workers.dev/sse"}'

# For VS Code Insiders
code-insiders --add-mcp '{"name":"cloudflare-playwright","type":"sse","url":"https://[my-mcp-url].workers.dev/sse"}'

Después de la instalación, el servidor Playwright MCP estará disponible para usarse con tu agente GitHub Copilot en VS Code.