Cloudflare Playwright MCP

Dramaturgo de Cloudflare MCP

Descripción general

Este proyecto aprovecha Playwright para las pruebas automatizadas del navegador y se integra con Cloudflare Workers, Browser Rendering y @cloudflare/playwright para la implementación.

Construir e implementar

Siga estos pasos para configurar e implementar el proyecto:

1. Instalar dependencias:

2. Construir:

3. Implementar en Cloudflare Workers:

Úselo con Cloudflare AI Playground

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

• Vaya a https://playground.ai.cloudflare.com/

• Asegúrese de que el modelo esté configurado en llama-3.3-70b-instruct-fp8-fast

• En Servidores MCP , configure la URL en https://[my-mcp-url].workers.dev/sse

• Haga clic en Conectar

• El estado debería actualizarse a Conectado y debería enumerar 14 herramientas disponibles

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

Ejemplo de conversación:

Usar con Claude Desktop

Actualmente, Claude Desktop solo admite servidores MCP locales. Para usar playground-mcp con Claude Desktop, utilizamos mcp-remote , una herramienta que redirige servidores MCP remotos y los expone localmente. Utilice la siguiente configuración:

1. Abra el archivo de configuración de Claude Desktop.

2. Agregue el siguiente fragmento JSON en la sección mcpServers :

3. Guarde el archivo de configuración y reinicie Claude Desktop para aplicar los cambios.

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

A continuación, se muestra un ejemplo de una sesión que abre la aplicación de demostración TODO, agrega "comprar limones" y realiza una captura de pantalla, aprovechando las herramientas de playwright-mcp y la representación del navegador:

Configurar en VSCode

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

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

Modos de herramienta

Las herramientas están disponibles en dos modos:

1. Modo instantánea (predeterminado): utiliza instantáneas de accesibilidad para un mejor rendimiento y confiabilidad

2. Modo visión : utiliza capturas de pantalla para interacciones visuales.

El modo Visión funciona mejor con los modelos de uso de computadora que pueden interactuar con elementos utilizando el espacio de coordenadas XY, según la captura de pantalla proporcionada.

Interacciones basadas en instantáneas

• instantánea del navegador

  • Descripción: Captura una instantánea de accesibilidad de la página actual, esto es mejor que una captura de pantalla.

  • Parámetros: Ninguno

• clic del navegador

  • Descripción: Realizar clic en una página web

  • Parámetros:

    • element (cadena): Descripción del elemento legible por humanos que se utiliza para obtener permiso para interactuar con el elemento

    • ref (cadena): referencia exacta del elemento de destino de la instantánea de la página

• arrastrar_del_navegador

  • Descripción: Realizar arrastrar y soltar entre dos elementos

  • Parámetros:

    • startElement (cadena): descripción del elemento fuente legible por humanos que se utiliza para obtener el permiso para interactuar con el elemento

    • startRef (cadena): referencia exacta del elemento fuente de la instantánea de la página

    • endElement (cadena): descripción del elemento de destino legible por humanos que se utiliza para obtener el permiso para interactuar con el elemento

    • endRef (cadena): referencia exacta del elemento de destino de la instantánea de la página

• pasar el cursor por el navegador

  • Descripción: Pase el cursor sobre el elemento en la página

  • Parámetros:

    • element (cadena): Descripción del elemento legible por humanos que se utiliza para obtener permiso para interactuar con el elemento

    • ref (cadena): referencia exacta del elemento de destino de la instantánea de la página

• tipo de navegador

  • Descripción: Escriba texto en un elemento editable

  • Parámetros:

    • element (cadena): Descripción del elemento legible por humanos que se utiliza para obtener permiso para interactuar con el elemento

    • ref (cadena): referencia exacta del elemento de destino de la instantánea de la página

    • text (cadena): Texto a escribir en el elemento

    • submit (booleano, opcional): si se debe enviar el texto ingresado (presione Enter después)

    • slowly (booleano, opcional): Indica si se escribe un carácter a la vez. Útil para activar los controladores de teclas en la página. Por defecto, todo el texto se completa de una vez.

• opción de selección del navegador

  • Descripción: Seleccione una opción en un menú desplegable

  • Parámetros:

    • element (cadena): Descripción del elemento legible por humanos que se utiliza para obtener permiso para interactuar con el elemento

    • ref (cadena): referencia exacta del elemento de destino de la instantánea de la página

    • values (matriz): Matriz de valores para seleccionar en el menú desplegable. Puede ser un solo valor o varios.

• captura de pantalla del navegador

  • Descripción: Toma una captura de pantalla de la página actual. No se pueden realizar acciones basándose en la captura de pantalla; para ello, usa `browser_snapshot`.

  • Parámetros:

    • raw (booleano, opcional): Indica si se retorna sin compresión (en formato PNG). El valor predeterminado es falso, lo que devuelve una imagen JPEG.

    • element (cadena, opcional): Descripción legible del elemento que se utiliza para obtener permiso para capturar la pantalla del elemento. Si no se proporciona, la captura se realizará desde la ventana gráfica. Si se proporciona el elemento, también se debe proporcionar la referencia.

    • ref (cadena, opcional): Referencia exacta del elemento de destino de la captura de pantalla de la página. Si no se proporciona, se tomará una captura de pantalla de la ventana gráfica. Si se proporciona ref, también se debe proporcionar element.

Interacciones basadas en la visión

• captura de pantalla del navegador

  • Descripción: Toma una captura de pantalla de la página actual

  • Parámetros: Ninguno

• mover_ratón_pantalla_navegador

  • Descripción: Mueve el ratón a una posición determinada

  • Parámetros:

    • element (cadena): Descripción del elemento legible por humanos que se utiliza para obtener permiso para interactuar con el elemento

    • x (número): coordenada X

    • y (número): coordenada Y

• clic en la pantalla del navegador

  • Descripción: Haga clic con el botón izquierdo del ratón.

  • Parámetros:

    • element (cadena): Descripción del elemento legible por humanos que se utiliza para obtener permiso para interactuar con el elemento

    • x (número): coordenada X

    • y (número): coordenada Y

• arrastrar la pantalla del navegador

  • Descripción: Arrastre el botón izquierdo del ratón

  • Parámetros:

    • element (cadena): Descripción del elemento legible por humanos que se utiliza para obtener permiso para interactuar con el elemento

    • startX (número): Coordenada X de inicio

    • startY (número): Coordenada Y de inicio

    • endX (número): Coordenada final X

    • endY (número): Coordenada Y final

• tipo de pantalla del navegador

  • Descripción: Escriba texto

  • Parámetros:

    • text (cadena): Texto a escribir en el elemento

    • submit (booleano, opcional): si se debe enviar el texto ingresado (presione Enter después)

Gestión de pestañas

• lista de pestañas del navegador

  • Descripción: Lista de pestañas del navegador

  • Parámetros: Ninguno

• pestaña_del_navegador_nueva

  • Descripción: Abre una nueva pestaña

  • Parámetros:

    • url (cadena, opcional): URL a la que se accederá en la nueva pestaña. Si no se proporciona, la nueva pestaña estará en blanco.

• selección de pestaña del navegador

  • Descripción: Seleccionar una pestaña por índice

  • Parámetros:

    • index (número): El índice de la pestaña a seleccionar

• cerrar pestaña del navegador

  • Descripción: Cerrar una pestaña

  • Parámetros:

    • index (número, opcional): El índice de la pestaña que se cerrará. Cierra la pestaña actual si no se proporciona.

Navegación

• navegador_navegar

  • Descripción: Navegar a una URL

  • Parámetros:

    • url (cadena): La URL a la que navegar

• navegador_navegar_atrás

  • Descripción: Volver a la página anterior

  • Parámetros: Ninguno

• navegador_navegar_hacia_adelante

  • Descripción: Avanzar a la página siguiente

  • Parámetros: Ninguno

Teclado

• tecla_pulsar_del_navegador

  • Descripción: Presione una tecla del teclado

  • Parámetros:

    • key (cadena): Nombre de la tecla a presionar o un carácter a generar, como ArrowLeft o a

Consola

• mensajes de la consola del navegador

  • Descripción: Devuelve todos los mensajes de la consola.

  • Parámetros: Ninguno

Archivos y medios

• carga de archivos del navegador

  • Descripción: Subir uno o varios archivos

  • Parámetros:

    • paths (matriz): Las rutas absolutas de los archivos que se van a cargar. Pueden ser uno o varios archivos.

• guardar_pdf_del_navegador

  • Descripción: Guardar página como PDF

  • Parámetros: Ninguno

Servicios públicos

• cerrar navegador

  • Descripción: Cerrar la página

  • Parámetros: Ninguno

• espera del navegador

  • Descripción: Esperar un tiempo especificado en segundos

  • Parámetros:

    • time (número): El tiempo de espera en segundos

• cambio de tamaño del navegador

  • Descripción: Cambiar el tamaño de la ventana del navegador

  • Parámetros:

    • width (número): Ancho de la ventana del navegador

    • height (número): Altura de la ventana del navegador

• diálogo del identificador del navegador

  • Descripción: Manejar un diálogo

  • Parámetros:

    • accept (booleano): si se debe aceptar el diálogo.

    • promptText (cadena, opcional): el texto del mensaje en caso de un cuadro de diálogo de mensaje.