Dramaturgo MCP

Registro del dramaturgo MCP

Playwright Record MCP es un servidor de Protocolo de Contexto de Modelo (MCP) que proporciona funciones de automatización del navegador mediante Playwright . Este servidor añade la función de grabación de vídeo para registrar las interacciones del navegador. Permite a los LLM (Grandes Modelos de Lenguaje) interactuar con páginas web mediante instantáneas de accesibilidad estructuradas, sin necesidad de capturas de pantalla ni modelos visuales.

Características principales

Rápido y liviano : utiliza el árbol de accesibilidad de Playwright, no una entrada basada en píxeles.
Compatible con LLM : no necesita modelos de visión y funciona exclusivamente con datos estructurados.
Aplicación de herramientas deterministas : evita la ambigüedad común en los enfoques basados en capturas de pantalla.
Grabación de vídeo : capacidad de grabar las interacciones del navegador como vídeo.

Casos de uso

Navegación web y llenado de formularios
Extracción de datos de contenido estructurado
Pruebas automatizadas impulsadas por LLM
Interacción del navegador de propósito general para agentes
Registrar y analizar las interacciones del navegador

Instalación

Instalación mediante NPM

npm install @playwright/record-mcp

npx @playwright/record-mcp

Ejemplo de configuración

NPX

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/record-mcp@latest"
      ]
    }
  }
}

Instalación en VS Code

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

# For VS Code
code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/record-mcp@latest"]}'

# For VS Code Insiders
code-insiders --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/record-mcp@latest"]}'

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

Opciones de CLI

El servidor MCP de Playwright Record admite las siguientes opciones de línea de comandos:

--browser <browser> : Navegador o canal de Chrome a utilizar. Valores posibles:
- chrome , firefox , webkit , msedge
- Canales de Chrome: chrome-beta , chrome-canary , chrome-dev
- Canales de borde: msedge-beta , msedge-canary , msedge-dev
- Predeterminado: chrome
--caps <caps> : Lista separada por comas de las funciones a habilitar. Valores posibles: pestañas, PDF, historial, espera, archivos, instalación. El valor predeterminado es "todos".
--cdp-endpoint <endpoint> : punto final CDP al que conectarse
--executable-path <path> : Ruta al ejecutable del navegador
--headless : Ejecuta el navegador en modo sin cabeza (con cabeza de manera predeterminada)
--port <port> : Puerto para escuchar el transporte SSE
--user-data-dir <path> : Ruta al directorio de datos del usuario
--vision : ejecuta el servidor que utiliza capturas de pantalla (las instantáneas de Aria se utilizan de forma predeterminada)
--record : graba las interacciones del navegador como video (nueva función)
--record-path <path> : Ruta para guardar los archivos de grabación (predeterminado: ./recordings)
--record-format <format> : Formato de grabación, valores posibles: mp4, webm (predeterminado: mp4)

Directorio de datos de usuario

Playwright Record MCP lanzará el navegador con un nuevo perfil, ubicado en:

Windows: %USERPROFILE%\AppData\Local\ms-playwright\mcp-chrome-profile
macOS: ~/Library/Caches/ms-playwright/mcp-chrome-profile
Linux: ~/.cache/ms-playwright/mcp-chrome-profile

Toda la información de inicio de sesión se almacenará en ese perfil; puedes eliminarla entre sesiones si deseas borrar el estado fuera de línea.

Ejecución de un navegador sin interfaz gráfica de usuario (headless browser)

Este modo es útil para operaciones en segundo plano o por lotes.

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/record-mcp@latest",
        "--headless"
      ]
    }
  }
}

Uso de grabación de vídeo

Para utilizar la función de grabación de video, utilice el indicador --record :

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/record-mcp@latest",
        "--record"
      ]
    }
  }
}

Para especificar la ruta para guardar el archivo de grabación:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/record-mcp@latest",
        "--record",
        "--record-path", "./my-recordings"
      ]
    }
  }
}

Para especificar el formato de grabación:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/record-mcp@latest",
        "--record",
        "--record-format", "webm"
      ]
    }
  }
}

Ejecutar Headed Browser en Linux sin DISPLAY

Al ejecutar un navegador con encabezado en un sistema sin pantalla o desde procesos de trabajo de IDE, ejecute el servidor MCP desde un entorno con DISPLAY y pase el indicador --port para habilitar el transporte SSE.

npx @playwright/record-mcp@latest --port 8931

Luego, en la configuración del cliente MCP, configure la url del punto final SSE:

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/sse"
    }
  }
}

Estibador

NOTA: La implementación de Docker actualmente solo admite Chromium sin interfaz gráfica.

{
  "mcpServers": {
    "playwright": {
      "command": "docker",
      "args": ["run", "-i", "--rm", "--init", "mcp/playwright-record"]
    }
  }
}

Para construir con Docker:

docker build -t mcp/playwright-record .

Modos de herramienta

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:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/record-mcp@latest",
        "--vision"
      ]
    }
  }
}

El modo Visión funciona mejor con modelos de uso informático que puedan interactuar con elementos utilizando el espacio de coordenadas XY, según la captura de pantalla proporcionada.

Uso programático con transportes personalizados

import http from 'http';

import { createServer } from '@playwright/record-mcp';
import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js';

http.createServer(async (req, res) => {
  // ...

  // Creates a headless Playwright Record MCP server with SSE transport
  const mcpServer = await createServer({ headless: true, record: true });
  const transport = new SSEServerTransport('/messages', res);
  await mcpServer.connect(transport);

  // ...
});

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.

Herramientas de grabación de vídeo (nueva función)

inicio del registro del navegador
- Descripción: Comienza a grabar las interacciones del navegador.
- Parámetros:
  - path (cadena, opcional): ruta para guardar el archivo de grabación
  - format (cadena, opcional): Formato de grabación (mp4 o webm)
parada de grabación del navegador
- Descripción: Detener y guardar la grabación de la interacción del navegador
- Parámetros: Ninguno
pausa de grabación del navegador
- Descripción: Pausa la grabación actual
- Parámetros: Ninguno
reanudación del registro del navegador
- Descripción: Reanudar una grabación pausada
- Parámetros: Ninguno
lista de registros del navegador
- Descripción: Devuelve una lista de archivos de grabación actuales
- Parámetros: Ninguno

Ejemplos

Iniciar y detener la grabación de vídeo

// Start video recording
await mcpServer.invoke('browser_record_start', {
  path: './my-recordings/test-recording.mp4',
  format: 'mp4'
});

// Perform browser navigation
await mcpServer.invoke('browser_navigate', {
  url: 'https://example.com'
});

// Interact with the page
const snapshot = await mcpServer.invoke('browser_snapshot');
// Find elements in the snapshot...

// Stop video recording
await mcpServer.invoke('browser_record_stop');

Navegadores compatibles

Cromo
Firefox
Kit web
Microsoft Edge

Requisitos

Node.js 18 o superior
Se debe instalar el navegador requerido (o utilizar la herramienta browser_install para instalarlo)

Licencia

Licencia Apache-2.0

Playwright MCP

Integrations