Prompts adicionales útiles

• “Busca ‘automatización web con MCP’ y abre el primer resultado no patrocinado.”
• “Completa el formulario de contacto con estos datos: … y haz submit.”
• “Toma una captura de pantalla de toda la página y guárdala como report.png.”
• “Extrae las filas de la tabla con selector .pricing-table y devuélvelas en JSON.”

Verifica la herramienta desde VS Code

• Abrir paleta: Ctrl + Shift + P → “Developer: Toggle Developer Tools” (para ver logs del panel).
• Confirma que la herramienta “browser”/“mcp-browser” aparece en la lista de herramientas del asistente.

# Comprobar versión de VS Code
code --version
# Instalar/actualizar extensión de tu asistente (ejemplo)
code --install-extension publisher.assistant-extension

• Reinicia el servicio de la extensión: desactiva/activa desde chrome://extensions/.
• Comprueba bloqueadores de anuncios/privacidad que limiten scripts.
• Revisa políticas empresariales: chrome://policy.
• Prueba en una ventana de incógnito (si lo permite la extensión) para descartar interferencias.

• Abre DevTools de la extensión: chrome://extensions/ → “Detalles” → “Inspeccionar vistas” (Service Worker).
• Captura errores y versión de Chrome/VS Code para reportar.

# Datos útiles
chrome://version
code --version

• Paginas con autenticación: flujo login + 2FA con pausas y confirmaciones.
• Extracción paginada: seguir “Siguiente” hasta agotar resultados.
• Validación visual: capturas antes/después para comparar UI.
• Multi-pestaña: abrir enlaces en nuevas tabs y consolidar datos.

Buenas prácticas de la industria

• Principio de mínimo privilegio: limita el alcance de navegación (dominios, entornos).
• Gestión de secretos: nunca hardcodees credenciales en prompts; usa gestores seguros.
• Cumplimiento y privacidad: respeta políticas de uso de datos, TOS y robots.txt al extraer información.
• Auditoría: habilita logs mínimos necesarios y rotación de registros.

Controles rápidos

# Verificar extensiones en Chrome
chrome://extensions/

• Bloquea dominios sensibles en el asistente si es posible.
• Desactiva la extensión en perfiles de trabajo si no es requerida.

Preferencias de la extensión

• Auto-conexión al abrir Chrome (si está disponible).
• Tiempo de espera para selectores y navegación.
• Formato de capturas: PNG/JPEG, calidad, viewport.
• Lista de dominios permitidos (whitelist) para mayor control.

Integración con VS Code

• Activa/desactiva herramientas MCP desde la configuración del asistente.
• Perfiles por workspace: distintos límites y permisos por proyecto.
• Registro de acciones: guarda evidencias (capturas, JSON) en la carpeta del proyecto.

{
  "mcpBrowser": {
    "timeoutMs": 15000,
    "allowedHosts": ["example.com", "tusitio.com"],
    "artifactsDir": ".mcp-artifacts"
  }
}

• Funciona en navegadores Chromium; en Edge (Chromium) suele ser compatible.
• Limitaciones con iframes de terceros, ventanas emergentes y contenidos protegidos por CORS.
• Descargas de archivos pueden requerir confirmación del usuario según políticas del navegador.
• Sitios con protección anti-bot pueden bloquear automatización; respeta sus políticas.

Ejemplo Playwright (Node.js)

import { chromium } from 'playwright';
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.click('text=Pricing');
  const rows = await page.$$eval('.pricing-row', els => els.map(e => e.textContent.trim()));
  console.log(rows);
  await browser.close();
})();

Workflows híbridos

• Prototipa pasos con MCP Browser y genera scripts en Playwright.
• Usa el asistente para crear fixtures y asserts a partir de interacciones reales.
• Convierte prompts en casos de prueba versionados.

Antes de usar

• Chrome y VS Code actualizados.
• Extensión MCP instalada y visible.
• Asistente en VS Code con herramientas MCP activas.
• Permisos revisados, dominios permitidos definidos.

Durante la sesión

• Conexión “Connected” confirmada.
• Logs monitoreados si hay fallos.
• Desconexión al finalizar las tareas.