Playwright MCP

playwright-mcp

Envoltorio de Playwright para MCP (Model Context Protocol). Este servidor permite que clientes impulsados por LLM controlen un navegador para tareas de automatización.

Componentes

Recursos

El servidor expone recursos para acceder a capturas de pantalla del navegador:

• URI del recurso de captura de pantalla: screenshot://{page_id}
• Los recursos de captura de pantalla están disponibles automáticamente para todas las páginas abiertas

Prompts

El servidor proporciona un prompt para ayudar a los clientes a interpretar páginas web:

• interpret-page: Analiza el contenido y la estructura de la página web actual
  • Argumento opcional page_id para seleccionar qué página interpretar
  • Argumento opcional focus para centrarse en aspectos específicos (full, forms, navigation, text)
  • Devuelve tanto un análisis de texto como una captura de pantalla de la página

Herramientas

El servidor implementa un conjunto completo de herramientas de automatización del navegador:

• Navegación del navegador

  • navigate: Ir a una URL específica
  • new_page: Crear una nueva página del navegador con un ID específico
  • switch_page: Cambiar a una página diferente del navegador
  • get_pages: Listar todas las páginas disponibles del navegador

• Interacción con la página

  • click: Hacer clic en un elemento usando un selector CSS
  • type: Escribir texto en un elemento de entrada
  • wait_for_selector: Esperar a que un elemento aparezca en la página

• Extracción de contenido

  • get_text: Obtener el contenido de texto de un elemento
  • get_page_content: Obtener el HTML completo de la página
  • take_screenshot: Capturar el estado visual de la página o elemento

Configuración

Instalar dependencias

uv add playwright
playwright install chromium

Inicio rápido

Instalación

Claude Desktop

En MacOS: ~/Library/Application\ Support/Claude/claude_desktop_config.json
En Windows: %APPDATA%/Claude/claude_desktop_config.json

"mcpServers": {
  "playwright-mcp": {
    "command": "uv",
    "args": [
      "--directory",
      "/Users/shannon/Workspace/artivus/playwright-mcp",
      "run",
      "playwright-mcp"
    ]
  }
}

"mcpServers": {
  "playwright-mcp": {
    "command": "uvx",
    "args": [
      "playwright-mcp"
    ]
  }
}

Desarrollo

Compilación y publicación

Para preparar el paquete para su distribución:

1. Sincronizar dependencias y actualizar el archivo de bloqueo:

uv sync

2. Compilar las distribuciones del paquete:

uv build

Esto creará distribuciones de código fuente y wheel en el directorio dist/.

3. Publicar en PyPI:

uv publish

Nota: Necesitarás configurar las credenciales de PyPI mediante variables de entorno o banderas de comando:

• Token: --token o UV_PUBLISH_TOKEN
• O nombre de usuario/contraseña: --username/UV_PUBLISH_USERNAME y --password/UV_PUBLISH_PASSWORD

Depuración

Dado que los servidores MCP se ejecutan sobre stdio, la depuración puede ser un desafío. Para la mejor experiencia de depuración, recomendamos encarecidamente usar el MCP Inspector.

Puedes iniciar el MCP Inspector mediante npm con este comando:

npx @modelcontextprotocol/inspector uv --directory /Users/shannon/Workspace/artivus/playwright-mcp run playwright-mcp

Al iniciarlo, el Inspector mostrará una URL que podrás acceder en tu navegador para comenzar a depurar.