Agentes de navegador: probar el sitio como lo ve el agente|INEMA.CLUB-PRO

Formación WebMCP · curso 3 de 6 · 8 clases

Agentes de navegador: prueba tu sitio como lo ve el agente

Playwright MCP, Chrome DevTools MCP y el lado del agente que consume WebMCP, corriendo contra una página local. Tú escribes el contrato de cada tarea, ves dónde falla la pantalla y sales con una batería que un agente corre contra tu sitio y guarda en un archivo.

Empezar por la clase 1 Ver el Área WebMCP
Monitor oscuro con un navegador abierto y, al lado, un robot humanoide industrial operando el teclado.
  • 8clases
  • 19ejercicios con salida esperada
  • 2servidores MCP de navegador probados
  • 1paso opcional con tu agente

Las clases

Del mapa de los agentes a la batería de tu sitio: Playwright MCP, DevTools MCP, el lado que consume WebMCP, el contrato, la prueba en archivo, dónde falla la pantalla y la batería.

  1. Clase 1 · 15 minEl mapa de oct/2026: computer use, extensiones, navegadores con agente y herramientas de devAgente de navegador se convirtió en varias cosas distintas: un modelo que mira la pantalla, una extensión en tu Chrome, un navegador entero con agente dentro y herramientas que le dan un navegador a Claude Code o a Codex. En esta lección separas las cuatro familias, lees el estado de cada una con fecha y dejas listo el kit del curso.
  2. Clase 2 · 20 minPlaywright MCP en Claude Code/Codex: el snapshot de accesibilidad en la prácticaPlaywright MCP le da un navegador a tu agente de código. No envía una captura de pantalla: envía el snapshot de accesibilidad, con una referencia (ref) en cada control, y el agente actúa por esas refs. En esta clase un script hace exactamente las llamadas que haría el agente, sin modelo, y después conectas el servidor a Claude Code o a Codex.
  3. Clase 3 · 15 minChrome DevTools MCP: ver lo que hizo el agente (consola, red)Cuando el agente dice "no pude", la respuesta suele estar en la consola o en la red: un archivo que dio 404, un error de JavaScript. El Chrome DevTools MCP le da al agente las mismas pestañas que tú abres con F12. En esta clase listas la consola y la red de la página del kit, encuentras el error plantado y lo dejas en cero.
  4. Clase 4 · 20 minEl agente que consume WebMCP: descubrimiento, ejecución, exposedTo y origenEl curso 2 enseña a la página a registrar herramientas. Aquí te quedas del otro lado: el agente. El Playwright MCP 0.0.83 ya convierte las herramientas WebMCP de la página en herramientas propias, con las anotaciones y un aviso de "no confiable". Ves el descubrimiento, la llamada, el camino sin la API y quién ve qué entre orígenes. Experimental al 19/10/2026.
  5. Clase 5 · 15 minContrato de tarea para agente de navegador (objetivo, límites, prueba, parada)"Agéndame una revisión en el sitio" parece un pedido. Para un agente de navegador, falta todo: en qué página, qué puede tocar, cómo probar que terminó y cuándo parar. En esta clase escribes el contrato de una tarea en cuatro partes y compruebas con un script que el contrato está completo antes de entregárselo a cualquier agente.
  6. Clase 6 · 20 minUn agente prueba tu sitio: tareas con criterio y resultado en archivoUna prueba que solo existe en la conversación con el agente desaparece cuando la conversación termina. Aquí cada tarea se convierte en una entrada en un archivo de batería, con el contrato de la clase 5, y cada ejecución graba una línea de resultado. El robot de ensayo corre sin modelo; en el paso opcional, tu agente corre la misma batería y un script revisa el formato.
  7. Clase 7 · 15 minDónde falla la pantalla (login, captcha, contenido dinámico) y cuándo la persona toma el controlHay pantallas en las que el agente no debe seguir: login, verificación humana y el botón que confirma una acción. Y hay una en la que se equivoca sin darse cuenta: el contenido que llega después. En esta clase la batería de límites pasa por esos cuatro casos en el sitio del kit, y ves al agente parar con el motivo exacto en vez de inventar.
  8. Clase 8 · 20 minLa batería de tareas de tu sitio (mapa + generador)Hora de juntar todo: las tareas que importan en tu sitio, cada una con contrato, pasos y lo que se espera, en una batería que el robot de ensayo ejecuta con cada cambio y que tu agente puede ejecutar cuando quieras. El conferir-bateria.mjs te dice si está lista; el mapa y el generador organizan lo que falta.

Para quién es

  1. 1Dev web o QA que edita HTML y JavaScript y corre comandos en la terminal.
  2. 2Quien quiere saber si un agente de navegador puede usar su propio sitio, antes de que lo descubra el cliente.
  3. 3Quien ya hizo el curso 0 (o sabe leer el árbol de accesibilidad) y quiere probar de verdad.

Lo que sales haciendo

  1. 1Conectar el Playwright MCP y el Chrome DevTools MCP a Claude Code o a Codex y ver lo que ellos ven.
  2. 2Ver cómo un agente descubre y llama las herramientas WebMCP de una página, y qué pasa sin la API.
  3. 3Escribir el contrato de una tarea: objetivo, límites, prueba y parada.
  4. 4Correr una batería de tareas contra tu sitio, con el resultado en un archivo y el agente deteniéndose donde debe.

Dónde entra este curso en la Formación WebMCP

  1. 1Es el curso 3. Orden sugerido: 0 → 1 → 2 → 3 → 4 → 5.
  2. 2Antes: 0 · base, 1 · servidor MCP, 2 · WebMCP en la página. Después: 4 · seguridad, 5 · expert.
  3. 3Antes de empezar: Node 20.19+, 22.12+ o 23+, git y una terminal Linux o macOS (en Windows, WSL). Claude Code o Codex solo en el paso opcional de la lección 6.
  4. 4El kit, el sitio de ejemplo y los mensajes de los scripts están en portugués en todas las versiones del curso; los comandos son los mismos.