E1 · Kit listo
10 minEjecuta los dos bloques. Si falta una pieza, su línea empieza con "falta:" y dice qué hacer.
Listo cuando: node versoes.mjs → kit pronto: 4 de 4 peças obrigatórias y saída: 0.
Clase 1 · 15 min
El mapa de oct/2026: computer use, extensiones, navegadores con agente y herramientas de dev
Agente 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.
Comenzar la lección
En esta lección vas a
- 1Las cuatro familias de agente de navegador
- 2Estado con fuente y fecha, sin rumores
- 3El kit: Playwright MCP y Chrome DevTools MCP con versión fijada
- 4Por qué este curso prueba con las herramientas de dev
Objetivo: ubicar computer use, extensiones, navegadores con agente y herramientas de dev, con estado fechado, y dejar el kit listo.
01Cuatro familias, un mismo sitio
Haz clic en cada bloque.
El estado de oct/2026 cambia rápido: todo aquí tiene fuente y fecha.
Las cuatro llegan al mismo HTML. Lo que pruebes con la cuarta vale, en buena parte, para las otras tres.
02Cómo leer el estado de un agente
Tres preguntas antes de creer.
1. ¿Quién lo dijo?
Un post del fabricante, la documentación o el repositorio oficial valen como hecho. Una nota de prensa o un agregador valen como "reportado por".
Ejemplo: la publicación de Anthropic del 24/11/2025 es fuente primaria; la publicación de OpenAI sobre Atlas (22/12/2025), aquí, solo llegó por la cobertura.
2. ¿Cuándo?
Escribe la fecha junto al estado: "beta en el plan Max el 24/11/2025", y no "está en beta". En seis meses la frase sin fecha se vuelve mentira.
La versión de un paquete también es estado: el kit fija @playwright/mcp 0.0.83 y chrome-devtools-mcp 1.10.1, publicados el 28/09 y el 23/09/2026 según el registro de npm.
3. ¿Corre dónde?
La extensión y el navegador con agente corren en la cuenta de alguien y gastan suscripción. Las herramientas de dev corren en local, contra 127.0.0.1, sin ningún modelo si quieres.
Por eso el curso ensaya todo con ellas y deja el agente real para un paso opcional.
Regla del curso
Agente de navegador solo contra la página del kit o contra un sitio tuyo. Nada de login real, compras ni formularios de terceros.
03El kit listo en dos comandos
Instala las versiones fijadas y revisa las piezas. El versoes.mjs no llama a la red ni a ningún modelo.
Terminal · instalar el kit
[ -d ~/projetos/formacao-webmcp-navegador-v72 ] || git clone -q https://github.com/inematds/formacao-webmcp-navegador-v72 ~/projetos/formacao-webmcp-navegador-v72 cd ~/projetos/formacao-webmcp-navegador-v72/kit npm ci --no-audit --no-fund && npx playwright install chromium; echo "saída: $?"
Terminal · revisar las piezas
cd ~/projetos/formacao-webmcp-navegador-v72/kit node versoes.mjs; echo "saída: $?"
Ejemplo del repositorio
node 24.13.0 playwright 1.64.0 · Chromium 156.0.8078.4 @playwright/mcp 0.0.83 chrome-devtools-mcp 1.10.1 @modelcontextprotocol/sdk 1.32.1 (cliente de ensaio, sem modelo) claude (opcional) 2.1.303 (Claude Code) codex (opcional) codex-cli 0.163.0 kit pronto: 4 de 4 peças obrigatórias saída: 0
Cuatro piezas obligatorias: Node 20.19+, 22.12+ o 23+ (lo exige chrome-devtools-mcp), Playwright con su Chromium, Playwright MCP y Chrome DevTools MCP. Claude Code y Codex aparecen como opcionales: el curso entero corre sin ellos.
added 101 packages in 2s saída: 0
El npm ci instala exactamente lo que está en el package-lock.json. La primera vez, el npx playwright install chromium descarga el Chromium de Playwright (unos cientos de MB); en las siguientes, no imprime nada.
04Práctica
El kit en tu máquina y tu mapa. Cada ejercicio tiene un "listo cuando".
E2 · Tu mapa
10 minCrea mapa-agentes.md con tres agentes de navegador que tú o tus clientes usan, una línea por agente: familia | agente | estado | fuente | fecha. Un estado sin fuente pasa a "reportado por".
Listo cuando: grep -c "|" mapa-agentes.md → 3 o más, y cada línea tiene una fecha.
05Prueba de la clase
Pregunta 1 de 4
¿Qué familia de agente usa este curso para probar el sitio, y por qué?competencia
Correcto
Playwright MCP y Chrome DevTools MCP corren en tu máquina, contra 127.0.0.1, y se puede ensayar sin modelo. Las otras familias corren en la cuenta de otra persona y gastan suscripción.No es esa
Playwright MCP y Chrome DevTools MCP corren en tu máquina, contra 127.0.0.1, y se puede ensayar sin modelo. Las otras familias corren en la cuenta de otra persona y gastan suscripción.Repasar: Cuatro familias, un mismo sitioPregunta 2 de 4
Leíste en una nota que un navegador con agente llegó a Android en agosto. ¿Cómo lo anotas en tu mapa?
Correcto
Sin la fuente primaria, entra como reportado, con la fecha en que lo revisaste. Dos notas que copian la misma fuente siguen siendo de segunda mano.No es esa
Sin la fuente primaria, entra como reportado, con la fecha en que lo revisaste. Dos notas que copian la misma fuente siguen siendo de segunda mano.Repasar: Cómo leer el estado de un agentePregunta 3 de 4
¿Qué dijo Anthropic el 24/11/2025 sobre los agentes de navegador y el prompt injection?competencia
Correcto
El post dice que la tasa de ataques exitosos bajó a ~1% y que eso "still represents meaningful risk. No browser agent is immune". El tema a fondo es del curso 4.No es esa
El post dice que la tasa de ataques exitosos bajó a ~1% y que eso "still represents meaningful risk. No browser agent is immune". El tema a fondo es del curso 4.Repasar: Cuatro familias, un mismo sitioPregunta 4 de 4
¿Por qué el kit fija @playwright/mcp 0.0.83 en vez de usar la última versión?
Correcto
La salida de cada bloque se capturó con esa versión, el 19/10/2026. En una versión nueva, los nombres de las herramientas y el formato de la respuesta pueden cambiar.No es esa
La salida de cada bloque se capturó con esa versión, el 19/10/2026. En una versión nueva, los nombres de las herramientas y el formato de la respuesta pueden cambiar.Repasar: Cómo leer el estado de un agentePrueba terminada
Acertaste {a} de {n}. Si aciertas todas, la clase se marca como completada.Elige una alternativa. La explicación aparece después de tu intento.
06En tres frases
Cuatro familiasComputer use, extensiones, navegadores con agente y herramientas de dev llegan al mismo HTML.
Estado con fechaLa fuente primaria es un hecho; el resto es "reportado por", con la fecha en que lo revisaste.
Probar en localPlaywright MCP y DevTools MCP corren en tu máquina, con versión fijada y sin gastar cuota.