Dramaturgo MCP
Un servidor de Protocolo de Contexto de Modelo (MCP) que proporciona funciones de automatización del navegador mediante Playwright . Este servidor permite a los LLM interactuar con páginas web mediante instantáneas de accesibilidad estructuradas, eliminando la necesidad de capturas de pantalla o modelos visualmente optimizados.
Características principales
- Rápido y ligero . Utiliza el árbol de accesibilidad de Playwright, no la entrada basada en píxeles.
- Compatible con LLM . No requiere modelos de visión; opera exclusivamente con datos estructurados.
- Aplicación de herramientas deterministas . Evita la ambigüedad común en los enfoques basados en capturas de pantalla.
Requisitos
- Node.js 18 o más reciente
- VS Code, Cursor, Windsurf, Claude Desktop o cualquier otro cliente MCP
Empezando
Primero, instala el servidor Playwright MCP con tu cliente. Una configuración típica es la siguiente:
También puedes 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.
Vaya a Cursor Settings
-> MCP
-> Add new MCP Server
. Asigne un nombre a su gusto y command
el comando npx @playwright/mcp
. También puede verificar la configuración o agregar argumentos similares a los de un comando haciendo clic en Edit
.
Consulte la documentación de Windsuff MCP. Utilice la siguiente configuración:
Siga la guía de instalación de MCP, utilice la siguiente configuración:
Configuración
El servidor Playwright MCP admite los siguientes argumentos. Se pueden proporcionar en la configuración JSON anterior, como parte de la lista "args"
:
Perfil de usuario
Puede ejecutar Playwright MCP con un perfil persistente como un navegador normal (predeterminado) o en contextos aislados para las sesiones de prueba.
Perfil persistente
Toda la información de inicio de sesión se almacenará en el perfil persistente. Puede eliminarlo entre sesiones si desea desactivar el estado sin conexión. El perfil persistente se encuentra en las siguientes ubicaciones y puede sobrescribirlo con el argumento --user-data-dir
.
Aislado
En el modo aislado, cada sesión se inicia en el perfil aislado. Cada vez que se solicita a MCP que cierre el navegador, la sesión se cierra y se pierde todo el estado de almacenamiento de esta sesión. Puede proporcionar el estado de almacenamiento inicial al navegador mediante las contextOptions
de la configuración o el argumento --storage-state
. Obtenga más información sobre el estado de almacenamiento aquí .
Archivo de configuración
El servidor Playwright MCP se puede configurar mediante un archivo de configuración JSON. Puede especificar el archivo de configuración con la opción de línea de comandos --config
:
Servidor MCP independiente
Al ejecutar el navegador en un sistema sin pantalla o desde procesos de trabajo de los IDE, ejecute el servidor MCP desde el entorno con PANTALLA y pase el indicador --port
para habilitar el transporte SSE.
Y luego, en la configuración del cliente MCP, configure la url
del punto final SSE:
NOTA: La implementación de Docker solo admite Chromium sin interfaz gráfica por el momento.
Puedes crear la imagen de Docker tú mismo.
Herramientas
Las herramientas están disponibles en dos modos:
- Modo instantánea (predeterminado): utiliza instantáneas de accesibilidad para un mejor rendimiento y confiabilidad
- Modo visión : utiliza capturas de pantalla para interacciones visuales.
Para utilizar el modo Visión, agregue el indicador --vision
al iniciar el servidor:
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.
- instantánea del navegador
- Título: Instantánea de la página
- Descripción: Captura una instantánea de accesibilidad de la página actual, esto es mejor que una captura de pantalla.
- Parámetros: Ninguno
- Solo lectura: verdadero
- clic del navegador
- Título: Haga clic
- 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 elementoref
(cadena): referencia exacta del elemento de destino de la instantánea de la página
- Solo lectura: falso
- arrastrar_del_navegador
- Título: Arrastre el ratón
- 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 elementostartRef
(cadena): referencia exacta del elemento fuente de la instantánea de la páginaendElement
(cadena): descripción del elemento de destino legible por humanos que se utiliza para obtener el permiso para interactuar con el elementoendRef
(cadena): referencia exacta del elemento de destino de la instantánea de la página
- Solo lectura: falso
- pasar el cursor por el navegador
- Título: Pasar el ratón
- 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 elementoref
(cadena): referencia exacta del elemento de destino de la instantánea de la página
- Solo lectura: verdadero
- tipo de navegador
- Título: Escriba el texto
- 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 elementoref
(cadena): referencia exacta del elemento de destino de la instantánea de la páginatext
(cadena): Texto a escribir en el elementosubmit
(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.
- Solo lectura: falso
- opción de selección del navegador
- Título: Seleccionar opción
- 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 elementoref
(cadena): referencia exacta del elemento de destino de la instantánea de la páginavalues
(matriz): Matriz de valores para seleccionar en el menú desplegable. Puede ser un solo valor o varios.
- Solo lectura: falso
- tecla_pulsar_del_navegador
- Título: Presiona una tecla
- Descripción: Presione una tecla del teclado
- Parámetros:
key
(cadena): Nombre de la tecla a presionar o un carácter a generar, comoArrowLeft
oa
- Solo lectura: falso
- espera del navegador
- Título: Espera
- Descripción: Esperar a que aparezca o desaparezca el texto o que transcurra un tiempo específico
- Parámetros:
time
(número, opcional): el tiempo de espera en segundostext
(cadena, opcional): el texto que se debe esperartextGone
(cadena, opcional): el texto que se debe esperar a que desaparezca
- Solo lectura: verdadero
- carga de archivos del navegador
- Título: Subir archivos
- 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.
- Solo lectura: falso
- diálogo del identificador del navegador
- Título: Manejar un diálogo
- 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.
- Solo lectura: falso
- navegador_navegar
- Título: Navegar a una URL
- Descripción: Navegar a una URL
- Parámetros:
url
(cadena): La URL a la que navegar
- Solo lectura: falso
- navegador_navegar_atrás
- Título: Regresar
- Descripción: Volver a la página anterior
- Parámetros: Ninguno
- Solo lectura: verdadero
- navegador_navegar_hacia_adelante
- Título: Avanzar
- Descripción: Avanzar a la página siguiente
- Parámetros: Ninguno
- Solo lectura: verdadero
- captura de pantalla del navegador
- Título: Tomar una captura de pantalla
- 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.filename
(cadena, opcional): Nombre del archivo donde se guardará la captura de pantalla. El valor predeterminado espage-{timestamp}.{png|jpeg}
si no se especifica.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.
- Solo lectura: verdadero
- guardar_pdf_del_navegador
- Título: Guardar como PDF
- Descripción: Guardar página como PDF
- Parámetros:
filename
(cadena, opcional): nombre del archivo donde se guardará el PDF. El valor predeterminado espage-{timestamp}.pdf
si no se especifica.
- Solo lectura: verdadero
- solicitudes de red del navegador
- Título: Lista de solicitudes de red
- Descripción: Devuelve todas las solicitudes de red desde que se cargó la página.
- Parámetros: Ninguno
- Solo lectura: verdadero
- mensajes de la consola del navegador
- Título: Obtener mensajes de la consola
- Descripción: Devuelve todos los mensajes de la consola.
- Parámetros: Ninguno
- Solo lectura: verdadero
- instalación del navegador
- Título: Instalar el navegador especificado en la configuración
- Descripción: Instala el navegador especificado en la configuración. Llámalo si recibes un error indicando que el navegador no está instalado.
- Parámetros: Ninguno
- Solo lectura: falso
- cerrar navegador
- Título: Cerrar navegador
- Descripción: Cerrar la página
- Parámetros: Ninguno
- Solo lectura: verdadero
- cambio de tamaño del navegador
- Título: Cambiar el tamaño de la ventana del navegador
- Descripción: Cambiar el tamaño de la ventana del navegador
- Parámetros:
width
(número): Ancho de la ventana del navegadorheight
(número): Altura de la ventana del navegador
- Solo lectura: verdadero
- lista de pestañas del navegador
- Título: Pestañas de lista
- Descripción: Lista de pestañas del navegador
- Parámetros: Ninguno
- Solo lectura: verdadero
- pestaña_del_navegador_nueva
- Título: Abrir una nueva pestaña
- 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.
- Solo lectura: verdadero
- selección de pestaña del navegador
- Título: Seleccionar una pestaña
- Descripción: Seleccionar una pestaña por índice
- Parámetros:
index
(número): El índice de la pestaña a seleccionar
- Solo lectura: verdadero
- cerrar pestaña del navegador
- Título: Cerrar una pestaña
- 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.
- Solo lectura: falso
- prueba de dramaturgo generada por el navegador
- Título: Generar una prueba de dramaturgo
- Descripción: Generar una prueba de dramaturgo para un escenario determinado
- Parámetros:
name
(cadena): el nombre de la pruebadescription
(cadena): La descripción de la pruebasteps
(matriz): Los pasos de la prueba
- Solo lectura: verdadero
- captura de pantalla del navegador
- Título: Tomar una captura de pantalla
- Descripción: Toma una captura de pantalla de la página actual
- Parámetros: Ninguno
- Solo lectura: verdadero
- mover_ratón_pantalla_navegador
- Título: Mover el ratón
- 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 elementox
(número): coordenada Xy
(número): coordenada Y
- Solo lectura: verdadero
- clic en la pantalla del navegador
- Título: Haga clic
- 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 elementox
(número): coordenada Xy
(número): coordenada Y
- Solo lectura: falso
- arrastrar la pantalla del navegador
- Título: Arrastre el ratón
- 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 elementostartX
(número): Coordenada X de iniciostartY
(número): Coordenada Y de inicioendX
(número): Coordenada final XendY
(número): Coordenada Y final
- Solo lectura: falso
- tipo de pantalla del navegador
- Título: Escriba el texto
- Descripción: Escriba texto
- Parámetros:
text
(cadena): Texto a escribir en el elementosubmit
(booleano, opcional): si se debe enviar el texto ingresado (presione Enter después)
- Solo lectura: falso
- tecla_pulsar_del_navegador
- Título: Presiona una tecla
- Descripción: Presione una tecla del teclado
- Parámetros:
key
(cadena): Nombre de la tecla a presionar o un carácter a generar, comoArrowLeft
oa
- Solo lectura: falso
- espera del navegador
- Título: Espera
- Descripción: Esperar a que aparezca o desaparezca el texto o que transcurra un tiempo específico
- Parámetros:
time
(número, opcional): el tiempo de espera en segundostext
(cadena, opcional): el texto que se debe esperartextGone
(cadena, opcional): el texto que se debe esperar a que desaparezca
- Solo lectura: verdadero
- carga de archivos del navegador
- Título: Subir archivos
- 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.
- Solo lectura: falso
- diálogo del identificador del navegador
- Título: Manejar un diálogo
- 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.
- Solo lectura: falso
local-only server
The server can only run on the client's local machine because it depends on local resources.
Un servidor de protocolo de contexto de modelo que permite a los LLM interactuar con páginas web a través de instantáneas de accesibilidad estructuradas sin necesidad de modelos de visión o capturas de pantalla.
Related MCP Servers
- -securityAlicense-qualityA Model Context Protocol server that allows LLMs to interact with web content through standardized tools, currently supporting web scraping functionality.Last updated -PythonMIT License
- -securityFlicense-qualityA Model Context Protocol server that enables LLMs to extract and use content from unstructured documents across a wide variety of file formats.Last updated -2Python
- -securityFlicense-qualityA Model Context Protocol server that enables LLMs to fetch and process web content in multiple formats (HTML, JSON, Markdown, text) with automatic format detection.Last updated -TypeScript
- AsecurityAlicenseAqualityA Model Context Protocol server that enables LLMs to interact with web pages, take screenshots, generate test code, scrape web pages, and execute JavaScript in a real browser environment.Last updated -29101TypeScriptMIT License