Playwright Record MCP

Automatización de navegadores usando Playwright con grabación de video. Permite que los LLMs interactúen con páginas web a través de instantáneas de accesibilidad estructuradas.

GitHub

Prueba este MCPPatrocinado

Documentación

Playwright Record MCP

Playwright Record MCP es un servidor de Protocolo de Contexto de Modelo (MCP) que proporciona capacidades de automatización de navegador utilizando Playwright. Este servidor añade funcionalidad de grabación de video para registrar interacciones del navegador. Permite a los LLM (Modelos de Lenguaje de Gran Tamaño) interactuar con páginas web a través de instantáneas estructuradas de accesibilidad, sin requerir capturas de pantalla o modelos visuales.

Características principales

Rápido y ligero: Utiliza el árbol de accesibilidad de Playwright, no entrada basada en píxeles.
Amigable con LLM: No se necesitan modelos de visión, opera puramente con datos estructurados.
Aplicación determinista de herramientas: Evita la ambigüedad común con enfoques basados en capturas de pantalla.
Grabación de video: Capacidad de grabar interacciones del navegador como video.

Casos de uso

Navegación web y relleno de formularios
Extracción de datos de contenido estructurado
Pruebas automatizadas impulsadas por LLM
Interacción general del navegador para agentes
Grabación y análisis de 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 usando 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 Playwright Record MCP estará disponible para usarse con su agente GitHub Copilot en VS Code.

Opciones de línea de comandos

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

--browser <browser>: Navegador o canal de Chrome a usar. Valores posibles:
- chrome, firefox, webkit, msedge
- Canales de Chrome: chrome-beta, chrome-canary, chrome-dev
- Canales de Edge: msedge-beta, msedge-canary, msedge-dev
- Predeterminado: chrome
--caps <caps>: Lista separada por comas de capacidades a habilitar, valores posibles: tabs, pdf, history, wait, files, install. El valor predeterminado es todos.
--cdp-endpoint <endpoint>: Punto final CDP al que conectarse
--executable-path <path>: Ruta al ejecutable del navegador
--headless: Ejecutar el navegador en modo sin interfaz (con interfaz por defecto)
--port <port>: Puerto para escuchar en el transporte SSE
--user-data-dir <path>: Ruta al directorio de datos de usuario
--vision: Ejecutar servidor que usa capturas de pantalla (las instantáneas Aria se usan por defecto)
--record: Grabar interacciones del navegador como video (nueva característica)
--record-path <path>: Ruta para guardar 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; puede eliminarlo entre sesiones si desea borrar el estado sin conexión.

Ejecutar navegador sin interfaz (navegador sin GUI)

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

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

Uso de la grabación de video

Para usar la función de grabación de video, use la bandera --record:

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

Para especificar la ruta de guardado del 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 navegador con interfaz en Linux sin DISPLAY

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

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

Luego, en la configuración del cliente MCP, establezca el url al punto final SSE:

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

Docker

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

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

Para compilar con Docker:

docker build -t mcp/playwright-record .

Modos de herramientas

Las herramientas están disponibles en dos modos:

Modo instantánea (predeterminado): Usa instantáneas de accesibilidad para mejor rendimiento y fiabilidad
Modo visión: Usa capturas de pantalla para interacciones basadas en visual

Para usar el Modo Visión, agregue la bandera --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 de computadora que pueden interactuar con elementos usando el espacio de coordenadas X-Y, basado en 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

browser_snapshot
- Descripción: Capturar instantánea de accesibilidad de la página actual, esto es mejor que la captura de pantalla
- Parámetros: Ninguno
browser_click
- Descripción: Realizar clic en una página web
- Parámetros:
  - element (cadena): Descripción legible del elemento utilizada para obtener permiso para interactuar con el elemento
  - ref (cadena): Referencia exacta del elemento objetivo de la instantánea de la página
browser_drag
- Descripción: Realizar arrastrar y soltar entre dos elementos
- Parámetros:
  - startElement (cadena): Descripción legible del elemento de origen utilizada para obtener el permiso para interactuar con el elemento
  - startRef (cadena): Referencia exacta del elemento de origen de la instantánea de la página
  - endElement (cadena): Descripción legible del elemento de destino utilizada 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
browser_hover
- Descripción: Pasar el cursor sobre un elemento en la página
- Parámetros:
  - element (cadena): Descripción legible del elemento utilizada para obtener permiso para interactuar con el elemento
  - ref (cadena): Referencia exacta del elemento objetivo de la instantánea de la página
browser_type
- Descripción: Escribir texto en un elemento editable
- Parámetros:
  - element (cadena): Descripción legible del elemento utilizada para obtener permiso para interactuar con el elemento
  - ref (cadena): Referencia exacta del elemento objetivo de la instantánea de la página
  - text (cadena): Texto para escribir en el elemento
  - submit (booleano, opcional): Si se debe enviar el texto ingresado (presionar Enter después)
  - slowly (booleano, opcional): Si se debe escribir un carácter a la vez. Útil para activar manejadores de teclas en la página. Por defecto, todo el texto se rellena de una vez.

Herramientas de grabación de video (Nueva característica)

browser_record_start
- Descripción: Iniciar grabación de 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)
browser_record_stop
- Descripción: Detener y guardar la grabación de interacciones del navegador
- Parámetros: Ninguno
browser_record_pause
- Descripción: Pausar la grabación actual
- Parámetros: Ninguno
browser_record_resume
- Descripción: Reanudar una grabación pausada
- Parámetros: Ninguno
browser_record_list
- Descripción: Devolver una lista de los archivos de grabación actuales
- Parámetros: Ninguno

Ejemplos

Iniciar y detener la grabación de video

// 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

Chrome
Firefox
WebKit
Microsoft Edge

Requisitos

Node.js 18 o superior
El navegador requerido debe estar instalado (o use la herramienta browser_install para instalarlo)

Licencia

Licencia Apache-2.0