Skip to main content
Glama

Playwright MCP Server

Official
by microsoft

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:

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

También puedes instalar el servidor Playwright MCP usando la CLI de VS Code:

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

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 .

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

Consulte la documentación de Windsuff MCP. Utilice la siguiente configuración:

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

Siga la guía de instalación de MCP, utilice la siguiente configuración:

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

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" :

> npx @playwright/mcp@latest --help --allowed-origins <origins> semicolon-separated list of origins to allow the browser to request. Default is to allow all. --blocked-origins <origins> semicolon-separated list of origins to block the browser from requesting. Blocklist is evaluated before allowlist. If used without the allowlist, requests not matching the blocklist are still allowed. --block-service-workers block service workers --browser <browser> browser or chrome channel to use, possible values: chrome, firefox, webkit, msedge. --caps <caps> comma-separated list of capabilities to enable, possible values: tabs, pdf, history, wait, files, install. Default is all. --cdp-endpoint <endpoint> CDP endpoint to connect to. --config <path> path to the configuration file. --device <device> device to emulate, for example: "iPhone 15" --executable-path <path> path to the browser executable. --headless run browser in headless mode, headed by default --host <host> host to bind server to. Default is localhost. Use 0.0.0.0 to bind to all interfaces. --ignore-https-errors ignore https errors --isolated keep the browser profile in memory, do not save it to disk. --no-image-responses do not send image responses to the client. --no-sandbox disable the sandbox for all process types that are normally sandboxed. --output-dir <path> path to the directory for output files. --port <port> port to listen on for SSE transport. --proxy-bypass <bypass> comma-separated domains to bypass proxy, for example ".com,chromium.org,.domain.com" --proxy-server <proxy> specify proxy server, for example "http://myproxy:3128" or "socks5://myproxy:8080" --save-trace Whether to save the Playwright Trace of the session into the output directory. --storage-state <path> path to the storage state file for isolated sessions. --user-agent <ua string> specify user agent string --user-data-dir <path> path to the user data directory. If not specified, a temporary directory will be created. --viewport-size <size> specify browser viewport size in pixels, for example "1280, 720" --vision Run server that uses screenshots (Aria snapshots are used by default)

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 .

# Windows %USERPROFILE%\AppData\Local\ms-playwright\mcp-{channel}-profile # macOS - ~/Library/Caches/ms-playwright/mcp-{channel}-profile # Linux - ~/.cache/ms-playwright/mcp-{channel}-profile

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í .

{ "mcpServers": { "playwright": { "command": "npx", "args": [ "@playwright/mcp@latest", "--isolated", "--storage-state={path/to/storage.json} ] } } }

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 :

npx @playwright/mcp@latest --config path/to/config.json
{ // Browser configuration browser?: { // Browser type to use (chromium, firefox, or webkit) browserName?: 'chromium' | 'firefox' | 'webkit'; // Keep the browser profile in memory, do not save it to disk. isolated?: boolean; // Path to user data directory for browser profile persistence userDataDir?: string; // Browser launch options (see Playwright docs) // @see https://playwright.dev/docs/api/class-browsertype#browser-type-launch launchOptions?: { channel?: string; // Browser channel (e.g. 'chrome') headless?: boolean; // Run in headless mode executablePath?: string; // Path to browser executable // ... other Playwright launch options }; // Browser context options // @see https://playwright.dev/docs/api/class-browser#browser-new-context contextOptions?: { viewport?: { width: number, height: number }; // ... other Playwright context options }; // CDP endpoint for connecting to existing browser cdpEndpoint?: string; // Remote Playwright server endpoint remoteEndpoint?: string; }, // Server configuration server?: { port?: number; // Port to listen on host?: string; // Host to bind to (default: localhost) }, // List of enabled capabilities capabilities?: Array< 'core' | // Core browser automation 'tabs' | // Tab management 'pdf' | // PDF generation 'history' | // Browser history 'wait' | // Wait utilities 'files' | // File handling 'install' | // Browser installation 'testing' // Testing >; // Enable vision mode (screenshots instead of accessibility snapshots) vision?: boolean; // Directory for output files outputDir?: string; // Network configuration network?: { // List of origins to allow the browser to request. Default is to allow all. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked. allowedOrigins?: string[]; // List of origins to block the browser to request. Origins matching both `allowedOrigins` and `blockedOrigins` will be blocked. blockedOrigins?: string[]; }; /** * Do not send image responses to the client. */ noImageResponses?: boolean; }

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.

npx @playwright/mcp@latest --port 8931

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

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

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

{ "mcpServers": { "playwright": { "command": "docker", "args": ["run", "-i", "--rm", "--init", "--pull=always", "mcr.microsoft.com/playwright/mcp"] } } }

Puedes crear la imagen de Docker tú mismo.

docker build -t mcr.microsoft.com/playwright/mcp .
import http from 'http'; import { createConnection } from '@playwright/mcp'; import { SSEServerTransport } from '@modelcontextprotocol/sdk/server/sse.js'; http.createServer(async (req, res) => { // ... // Creates a headless Playwright MCP server with SSE transport const connection = await createConnection({ browser: { launchOptions: { headless: true } } }); const transport = new SSEServerTransport('/messages', res); await connection.connect(transport); // ... });

Herramientas

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/mcp@latest", "--vision" ] } } }

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 elemento
      • ref (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 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
    • 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 elemento
      • ref (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 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.
    • 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 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.
    • 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, como ArrowLeft o a
    • 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 segundos
      • text (cadena, opcional): el texto que se debe esperar
      • textGone (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 es page-{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 es page-{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 navegador
      • height (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 prueba
      • description (cadena): La descripción de la prueba
      • steps (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 elemento
      • x (número): coordenada X
      • y (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 elemento
      • x (número): coordenada X
      • y (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 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
    • 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 elemento
      • submit (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, como ArrowLeft o a
    • 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 segundos
      • text (cadena, opcional): el texto que se debe esperar
      • textGone (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
Install Server
A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

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.

  1. Características principales
    1. Requisitos
      1. Empezando
        1. Configuración
          1. Perfil de usuario
            1. Archivo de configuración
              1. Servidor MCP independiente
                1. Herramientas

                  Related MCP Servers

                  • -
                    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 -
                    Python
                    MIT License
                    • Linux
                    • Apple
                  • -
                    security
                    F
                    license
                    -
                    quality
                    A Model Context Protocol server that enables LLMs to extract and use content from unstructured documents across a wide variety of file formats.
                    Last updated -
                    2
                    Python
                    • Apple
                  • -
                    security
                    F
                    license
                    -
                    quality
                    A 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
                    • Apple
                  • 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
                    10
                    1
                    TypeScript
                    MIT License

                  View all related 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/microsoft/playwright-mcp'

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