El ecosistema MCP sigue creciendo con herramientas que ya no se limitan a conectar modelos con bases de datos o APIs, sino que empiezan a darles ojos y manos dentro del navegador. En ese terreno aparece Glance, un servidor MCP orientado a Claude Code que permite abrir páginas, hacer clic, escribir en formularios, capturar pantallas, revisar la consola, monitorizar peticiones de red y ejecutar escenarios de prueba completos desde la terminal. El proyecto se presenta en GitHub como una capa de automatización basada en navegador real, no en suposiciones del modelo sobre cómo “debería” verse una aplicación web.
La idea es sencilla de entender y potente en la práctica: en lugar de pedirle a Claude que razone “a ciegas” sobre una interfaz, Glance le da acceso a un navegador para que pueda verla, interactuar con ella y verificar lo que ocurre. El propio repositorio pone un ejemplo muy claro: pedirle a Claude que pruebe el login en localhost:3000, abra el navegador, rellene el formulario, pulse enviar, tome una captura, verifique la redirección y revise errores de consola. Eso lo sitúa en una categoría muy útil para desarrolladores, testers, equipos de QA y también para quien quiera revisar rápidamente una web sin salir del flujo de trabajo en terminal.
A día de hoy, el repositorio de DebugBase/glance aparece en GitHub con 123 estrellas, 13 forks y 18 commits visibles en la vista principal, lo que sugiere que todavía está en una fase temprana, pero ya con una propuesta bastante bien empaquetada. Además, el README deja claro que el proyecto incluye integración directa con Claude Code, una skill específica llamada /glance-test y un agente para testing end-to-end.
Una de sus fortalezas está en que no se limita a navegar y hacer capturas. Glance declara 30 herramientas MCP agrupadas en control de navegador, automatización de pruebas, sesiones y comparación visual. Eso permite pasar de una simple inspección a un flujo de pruebas bastante serio, con aserciones, escenarios JSON, snapshots de accesibilidad, grabación de sesiones y comparación visual píxel a píxel. Para proyectos web modernos, ese enfoque puede ahorrar mucho tiempo frente a revisar manualmente cada cambio de interfaz.
Qué hace exactamente Glance
| Área | Qué permite |
|---|---|
| Navegación | Abrir URLs, volver atrás, avanzar, gestionar pestañas |
| Interacción | Clic, escritura en inputs, hover, drag & drop, selección en dropdowns, teclas |
| Observación | Capturas inline, árbol de accesibilidad como texto, logs de consola, peticiones de red |
| Testing | Escenarios multistep, aserciones, formularios automáticos, pruebas de login/signup |
| Persistencia | Grabar sesiones, guardarlas y reutilizarlas |
| Visual QA | Crear baseline y comparar cambios visuales |
Todo esto está descrito en el README oficial, que divide las herramientas en 19 para control de navegador, 7 para automatización de pruebas y 4 para sesiones y visual regression.
Instalación y puesta en marcha
El arranque que propone el proyecto es bastante directo. La instalación principal puede hacerse con:
npm install -g glance-mcp
o bien añadiéndolo directamente a Claude Code con:
claude mcp add glance -- npx glance-mcp
Después, el README indica que hay que configurar el servidor MCP en el archivo .mcp.json, por ejemplo con BROWSER_HEADLESS=false si se quiere ver el navegador en modo visible en lugar de ejecutarlo oculto.
Un ejemplo básico de configuración sería este:
{
"mcpServers": {
"glance": {
"command": "npx",
"args": ["glance-mcp"],
"env": {
"BROWSER_HEADLESS": "false"
}
}
}
}
Con eso listo, ya se puede pedir a Claude cosas como abrir una página local, hacer una captura o probar un flujo de registro con validaciones. El proyecto lo orienta sobre todo a uso práctico inmediato, no a una larga configuración previa.
Herramientas principales de Glance
Control de navegador
| Herramienta | Función |
|---|---|
browser_navigate | Navegar a una URL |
browser_click | Hacer clic por selector CSS o texto |
browser_type | Escribir en un campo |
browser_hover | Pasar el ratón por un elemento |
browser_drag | Arrastrar y soltar |
browser_select_option | Elegir una opción en un desplegable |
browser_press_key | Pulsar una tecla |
browser_scroll | Desplazar la página |
browser_screenshot | Capturar una pantalla y devolverla a Claude |
browser_snapshot | Obtener el árbol de accesibilidad como texto |
browser_evaluate | Ejecutar JavaScript en la página |
browser_console_messages | Leer mensajes y errores de consola |
browser_network_requests | Vigilar tráfico de red |
browser_go_back / browser_go_forward | Navegación histórica |
browser_tab_new, browser_tab_list, browser_tab_select | Gestión de pestañas |
browser_close | Cerrar el navegador |
Testing y validación
| Herramienta | Función |
|---|---|
test_scenario_run | Ejecutar un escenario de prueba multistep |
test_scenario_status | Consultar el estado de ese escenario |
test_assert | Lanzar una aserción puntual |
test_fill_form | Rellenar formularios automáticamente |
test_auth_flow | Probar un flujo de login o registro |
test_watch_events | Observar eventos de DOM o red |
test_stop_watch | Detener la observación |
Sesiones y regresión visual
| Herramienta | Función |
|---|---|
session_start | Empezar a grabar una sesión |
session_end | Cerrar y guardar la sesión |
session_list | Listar sesiones grabadas |
visual_baseline | Guardar una captura base |
visual_compare | Comparar con esa base |
Cómo se usaría en la práctica
El caso más obvio es el de una aplicación web en desarrollo. En lugar de abrir el navegador aparte, navegar a mano y describirle luego a Claude lo que ha ocurrido, el desarrollador puede pedirle directamente: “abre localhost:3000, prueba el login y dime si hay errores”. Como Glance devuelve capturas inline, árbol de accesibilidad y resultados de red o consola, Claude puede trabajar con pruebas mucho más cercanas a la realidad.
También resulta útil para revisar páginas estáticas o landings. Por ejemplo, se le puede pedir que compruebe si la página de precios muestra tres planes, si un botón concreto existe, si un texto está visible o si la URL final tras un clic coincide con la esperada. Glance soporta 12 tipos de aserción, entre ellos exists, notExists, textContains, textEquals, isVisible, urlContains, urlEquals, countEquals y consoleNoErrors. Esa variedad permite usarlo no solo para automatización pesada, sino también para comprobaciones rápidas dentro de un flujo editorial o de lanzamiento.
Ejemplo de escenario de prueba
El proyecto propone definir escenarios JSON con varios pasos. Un ejemplo básico de login sería este:
{
"name": "Login Flow",
"steps": [
{ "name": "Go to login", "action": "navigate", "url": "http://localhost:3000/login" },
{ "name": "Enter email", "action": "type", "selector": "input[type='email']", "value": "[email protected]" },
{ "name": "Enter password", "action": "type", "selector": "input[type='password']", "value": "password123" },
{ "name": "Click submit", "action": "click", "selector": "button[type='submit']" },
{ "name": "Wait for redirect", "action": "sleep", "ms": 2000 },
{ "name": "Verify dashboard", "action": "assert", "type": "urlContains", "expected": "/dashboard" },
{ "name": "Screenshot result", "action": "screenshot", "screenshotName": "post-login" }
]
}
Ese formato es importante porque convierte a Glance en algo más reutilizable. No solo sirve para mandar órdenes sueltas a Claude, sino también para crear pruebas repetibles y más fáciles de documentar.
Configuración útil para distintos casos
| Variable | Valor por defecto | Para qué sirve |
|---|---|---|
BROWSER_HEADLESS | true | Ejecutar el navegador sin interfaz visible |
BROWSER_SESSIONS_DIR | .browser-sessions | Carpeta para capturas y sesiones |
BROWSER_SECURITY_PROFILE | local-dev | Perfil de seguridad |
BROWSER_VIEWPORT_WIDTH | 1280 | Ancho de la ventana |
BROWSER_VIEWPORT_HEIGHT | 720 | Alto de la ventana |
BROWSER_TIMEOUT | 30000 | Timeout por defecto en ms |
BROWSER_CHANNEL | — | Canal del navegador, por ejemplo Chrome o Edge |
Perfiles de seguridad
Uno de los puntos más interesantes de Glance es que no deja el navegador completamente abierto por defecto. El README documenta tres perfiles de seguridad:
| Perfil | Acceso a URL | Ejecución JS | Límite |
|---|---|---|---|
local-dev | Todo HTTP/HTTPS | Siempre | 60/min |
restricted | Solo localhost | Desactivada | 30/min |
open | Todo | Siempre | 120/min |
Esto tiene bastante sentido: no es lo mismo usarlo en desarrollo local que exponerlo en un entorno más abierto o usarlo para revisar servicios externos.
Skill y agente incluidos
Glance no se queda solo en el servidor MCP. El repositorio incluye un agente de Claude Code llamado e2e-tester y una skill rápida llamada /glance-test. Según el README, esa skill puede tomar una URL, navegar a ella, hacer captura y snapshot, descubrir enlaces de navegación, comprobar cada página con aserciones, revisar la consola en busca de errores JavaScript y generar un informe de aprobado o fallo. Para equipos que ya trabajan con Claude Code, este detalle reduce mucho la fricción de entrada.
Requisitos y desarrollo
Para usar Glance hacen falta Node.js 18+ y un navegador compatible con Playwright, que el propio proyecto indica que se instala automáticamente. Para desarrollo local del servidor, el flujo descrito en GitHub incluye clonar el repositorio, instalar dependencias, instalar Chromium con Playwright, compilar y arrancar.
Qué aporta realmente frente a otras opciones
La gran aportación de Glance no es simplemente “automatizar un navegador”, algo que Playwright o Selenium ya hacen desde hace años. Su valor está en empaquetar esa capacidad en forma de herramientas MCP pensadas para Claude Code, de manera que el agente no solo navega, sino que entiende el flujo de prueba, recibe capturas inline, puede inspeccionar la estructura accesible de la página y combinar todo eso con instrucciones en lenguaje natural. Para quien ya vive en terminal y usa Claude como copiloto de desarrollo, ese cambio de ergonomía puede ser mucho más importante que la tecnología de automatización que hay debajo. Esa es una inferencia razonable a partir de la arquitectura descrita en el README, donde Glance se conecta con Claude Code por MCP y traduce órdenes a Playwright.
Preguntas frecuentes
¿Qué es exactamente Glance?
Es un servidor MCP para Claude Code que le da acceso a un navegador real para navegar, hacer clic, escribir, capturar pantallas, revisar consola y ejecutar pruebas web desde la terminal.
¿Cuántas herramientas incluye?
El README habla de 30 herramientas MCP, repartidas entre control del navegador, testing y sesiones/regresión visual.
¿Sirve solo para desarrollo local?
No necesariamente. Puede navegar por sitios HTTP/HTTPS según el perfil de seguridad configurado, aunque uno de esos perfiles, restricted, está limitado a localhost.
¿Puede hacer pruebas completas de login o signup?
Sí. Incluye herramientas específicas como test_auth_flow, además de escenarios JSON multistep y aserciones para validar resultados.
¿Hace comparaciones visuales?
Sí. Tiene soporte para guardar un baseline visual y compararlo más tarde con nuevas capturas.
¿Qué necesita para funcionar?
Node.js 18 o superior y un navegador compatible con Playwright, que según el proyecto se instala automáticamente.
