Website Snapshot

Un servidor MCP que proporciona capacidades completas de captura de sitios web utilizando Playwright. Este servidor permite a los LLMs capturar y analizar páginas web a través de capturas de accesibilidad estructuradas, monitoreo de red y recopilación de mensajes de consola.

GitHub

Prueba este MCPPatrocinado

Documentación

MCP Web Snapshot

Un servidor de Model Context Protocol (MCP) que proporciona capacidades integrales de captura de sitios web utilizando Playwright. Este servidor permite a los LLM capturar y analizar páginas web mediante capturas estructuradas de accesibilidad, monitoreo de red y recopilación de mensajes de consola.

Características Principales

🚀 Rápido y ligero: Utiliza el árbol de accesibilidad de Playwright para capturas eficientes
🎯 Optimizado para LLM: Salida de datos estructurada diseñada específicamente para consumo de IA
📊 Monitoreo integral: Captura solicitudes de red, respuestas y mensajes de consola
🔍 Referencias a elementos: Agrega identificadores únicos a elementos interactivos para un direccionamiento preciso
🛡️ Listo para producción: Manejo de errores integrado, límites de recursos y gestión de tiempos de espera
✅ Bien probado: Suite de pruebas integral con cobertura de código

Requisitos

Python 3.11 o superior
VS Code, Cursor, Windsurf, Claude Desktop o cualquier otro cliente MCP

Primeros Pasos

Primero, instale el servidor MCP Web Snapshot con su cliente. Una configuración típica se ve así:

{
  "mcpServers": {
    "mcp-web-snapshot": {
      "command": "uv",
      "args": [
        "--directory",
        "/path/to/mcp-web-snapshot",
        "run",
        "python",
        "src/server.py"
      ]
    }
  }
}

Instalación en VS Code

Puede instalar el servidor MCP Web Snapshot usando la CLI de VS Code:

# For VS Code
code --add-mcp '{"name":"mcp-web-snapshot","command":"uv","args":["--directory","/path/to/mcp-web-snapshot","run","python","src/server.py"]}'

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

Instalación en Cursor

Vaya a Cursor Settings → MCP → Add new MCP Server. Póngale el nombre que desee, use el tipo command con el comando uv y los argumentos ["--directory", "/path/to/mcp-web-snapshot", "run", "python", "src/server.py"].

{
  "mcpServers": {
    "mcp-web-snapshot": {
      "command": "uv",
      "args": [
        "--directory",
        "/path/to/mcp-web-snapshot",
        "run",
        "python",
        "src/server.py"
      ]
    }
  }
}

Configuración de Desarrollo

Instalación Local

Clone este repositorio:

git clone https://github.com/your-username/mcp-web-snapshot.git
cd mcp-web-snapshot

Instale las dependencias usando uv:

uv sync

Instale los navegadores de Playwright:

uv run playwright install

Ejecute el servidor:

uv run python src/server.py

Estructura del Proyecto

├── src/
│   ├── server.py               # Main MCP server entry point
│   ├── registry.py             # Tool registration logic
│   └── tools/
│       ├── __init__.py
│       └── snapshot_url.py     # Web snapshot implementation
├── tests/                      # Test suite
│   ├── __init__.py
│   ├── test_snapshot_url.py    # Unit tests for website_snapshot
│   └── README.md               # Test documentation
├── pyproject.toml              # Project configuration
├── pytest.ini                  # Pytest configuration
├── uv.lock                     # Lock file for dependencies
└── README.md                   # This file

Pruebas

El proyecto incluye una suite de pruebas integral usando pytest:

# Run all tests
uv run pytest

# Run with verbose output
uv run pytest -v

# Run with coverage report
PYTHONPATH=. uv run pytest --cov=src.tools.snapshot_url --cov-report=term-missing

La cobertura de pruebas actualmente es del 92%, cubriendo:

Captura y formato exitoso de capturas
Monitoreo de solicitudes de red y mensajes de consola
Validación de URL
Manejo de errores y recuperación

Herramientas Disponibles

Website Snapshot

Herramienta: website_snapshot

Descripción: Tome capturas integrales de páginas web con capacidades de monitoreo

Parámetros:

target_url (cadena): La URL a capturar (debe ser una URL válida con protocolo)

Características:

🎭 Captura de Accesibilidad: Captura la estructura completa del árbol de accesibilidad
🌐 Monitoreo de Red: Registra todas las solicitudes y respuestas de red durante la carga de la página
🖥️ Mensajes de Consola: Captura la salida de consola del lado del cliente (registros, advertencias, errores)
🎯 Referencias a Elementos: Agrega ID de referencia únicos a elementos interactivos
📊 Métricas de Rendimiento: Proporciona un resumen de los elementos capturados y la actividad de red

Ejemplo de Uso:

# Through MCP client
result = await website_snapshot("https://example.com")

Estructura de Salida:

✅ Captured snapshot with 25 elements, 12 requests, 0 console messages
🔍 Example Website - Home Page
📍 https://example.com

🎭 Accessibility Snapshot:
- navigation "Main":
  - link "Home": [ref=1]
  - link "About": [ref=2]
  - button "Contact" [ref=3]
- main:
  - heading "Welcome to Example"
  - link "Get Started": [ref=4]

🌐 Network Requests:
🌐 GET https://example.com
   Status: 200
   Response: <!DOCTYPE html><html>...

🖥️ Console:
No console messages

🎯 Element References:
[ref=1]: link "Home"
[ref=2]: link "About"
[ref=3]: button "Contact"
[ref=4]: link "Get Started"

Configuración

El servidor se puede configurar a través del diccionario CONFIG en src/tools/snapshot_url.py:

CONFIG = {
    "viewport": {"width": 1920, "height": 1080},
    "user_agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36",
    "timeout": 15000,  # 15 seconds
}

Opciones de Personalización

Tamaño de Viewport: Ajuste las dimensiones de la ventana del navegador
User Agent: Personalice la identificación del navegador
Tiempo de Espera: Controle el tiempo máximo de espera para operaciones de página
Filtrado de Contenido: Modifique los límites de tamaño del cuerpo de respuesta y los filtros de tipo de contenido

Casos de Uso

Pruebas Guiadas por LLM

Capture el estado integral de la página para la generación automatizada de pruebas:

"Please take a snapshot of https://myapp.com/login and help me create Page Object Model classes based on the discovered elements and structure."

Análisis de Contenido Web

Extraiga datos estructurados para análisis de contenido y monitoreo:

"Take a snapshot of https://competitor.com/pricing and analyze any pricing changes or new features compared to what we discussed last week."

Auditoría de Accesibilidad

Aproveche los datos del árbol de accesibilidad para verificación de cumplimiento:

"Please capture a snapshot of https://myapp.com and identify any accessibility issues or areas for improvement based on WCAG guidelines."

Análisis de Integración de API

Monitoree la actividad de red para comprender el comportamiento de la aplicación:

"Take a snapshot of https://dashboard.example.com after I log in and show me what API calls are being made so I can understand the data flow."

Configuración de Pruebas Multi-Navegador

Genere escenarios de prueba basados en interacciones capturadas:

"Snapshot https://myapp.com/checkout and help me create comprehensive test cases that cover all the interactive elements and user workflows."

Manejo de Errores

El servidor incluye manejo integral de errores:

URLs Inválidas: Devuelve mensajes de error útiles para URLs mal formadas
Tiempos de Espera de Red: Límites de tiempo de espera configurables con respaldos elegantes
Fallos del Navegador: Limpieza automática y gestión de recursos
Límites de Contenido: Filtrado inteligente de cuerpos de respuesta grandes para prevenir problemas de memoria

Contribuciones

Haga un fork del repositorio
Cree una rama de características: git checkout -b feature-name
Realice sus cambios y agregue pruebas
Ejecute las pruebas: uv run pytest
Verifique la cobertura de pruebas: PYTHONPATH=. uv run pytest --cov=src.tools.snapshot_url --cov-report=term-missing
Asegure el cumplimiento del estilo de código: uv run ruff check
Envíe una solicitud de pull

Asegúrese de que todas las pruebas pasen y mantenga o mejore la cobertura de pruebas actual.

Licencia

Este proyecto está licenciado bajo la Licencia MIT - consulte el archivo LICENSE para más detalles.

Agradecimientos

Inspirado en el artículo MCP Server Website Snapshot
Construido sobre la base de Microsoft's Playwright MCP
Impulsado por Playwright para automatización confiable del navegador
Utiliza Model Context Protocol para integración con LLM

Proyectos Relacionados

Playwright MCP - Servidor MCP de automatización interactiva del navegador
MCP Python SDK - Marco de trabajo de servidor MCP en Python