Skip to main content
Glama
enesjakozh

Playwright MCP

by korwabs
GitHub
TypeScript
Apache 2.0
2
  • Apple
  • Linux
OverviewInspectNewEndpointsSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

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

O

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:

  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.

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

This server cannot be installed

-
security - not tested
A
license - permissive license
-
quality - not tested

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

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, brindando capacidades de automatización del navegador sin necesidad de capturas de pantalla o modelos visualmente ajustados.

  1. Características principales
    1. Casos de uso
      1. Instalación
        1. Instalación mediante NPM
        2. Ejemplo de configuración
        3. Instalación en VS Code
      2. Opciones de CLI
        1. Directorio de datos de usuario
          1. Ejecución de un navegador sin interfaz gráfica de usuario (headless browser)
            1. Uso de grabación de vídeo
              1. Ejecutar Headed Browser en Linux sin DISPLAY
                1. Estibador
                  1. Modos de herramienta
                    1. Uso programático con transportes personalizados
                      1. Interacciones basadas en instantáneas
                        1. Herramientas de grabación de vídeo (nueva función)
                          1. Ejemplos
                            1. Iniciar y detener la grabación de vídeo
                          2. Navegadores compatibles
                            1. Requisitos
                              1. Licencia

                                Related MCP Servers

                                • MCP Web Tools Server

                                  surya-madhav
                                  -
                                  security
                                  A
                                  license
                                  -
                                  quality
                                  A Model Context Protocol server that allows LLMs to interact with web content through standardized tools, currently supporting web scraping functionality.
                                  Last updated -
                                  1
                                  MIT License
                                  • Linux
                                  • Apple

                                • Playwright MCP Serverofficial

                                  microsoft
                                  A
                                  security
                                  A
                                  license
                                  A
                                  quality
                                  A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.
                                  Last updated -
                                  24
                                  524,380
                                  21,202
                                  Apache 2.0
                                  • Linux
                                  • Apple

                                • Playwright MCP Server

                                  pvinis
                                  A
                                  security
                                  A
                                  license
                                  A
                                  quality
                                  A 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 -
                                  29
                                  9
                                  13
                                  MIT License

                                • Playwright MCP

                                  markbustamante77
                                  A
                                  security
                                  A
                                  license
                                  A
                                  quality
                                  A Model Context Protocol server that provides browser automation capabilities using Playwright, enabling LLMs to interact with web pages through structured accessibility snapshots without requiring screenshots or vision models.
                                  Last updated -
                                  24
                                  524,380
                                  1
                                  Apache 2.0
                                  • Apple
                                  • Linux

                                View all related MCP servers

                                Appeared in Searches

                                New MCP Servers

                                MCP directory API

                                We provide all the information about MCP servers via our MCP API.

                                curl -X GET 'https://glama.ai/api/mcp/v1/servers/korwabs/playwright-record-mcp'

                                If you have feedback or need assistance with the MCP directory API, please join our Discord server