E1 · Kit pronto
10 minRode os dois blocos. Se faltar uma peça, a linha dela começa por "falta:" e diz o que fazer.
Pronto quando: node versoes.mjs → kit pronto: 4 de 4 peças obrigatórias e saída: 0.
Aula 1 · 15 min
O mapa de out/2026: computer use, extensões, navegadores com agente e ferramentas de dev
Agente de navegador virou várias coisas diferentes: um modelo que olha a tela, uma extensão no seu Chrome, um navegador inteiro com agente dentro e ferramentas que dão um navegador ao Claude Code ou ao Codex. Nesta aula você separa as quatro famílias, lê o status de cada uma com data e deixa o kit do curso pronto.
Começar a aula
Nesta aula você vai
- 1As quatro famílias de agente de navegador
- 2Status com fonte e data, sem boato
- 3O kit: Playwright MCP e Chrome DevTools MCP com versão fixada
- 4Por que este curso testa com as ferramentas de dev
Objetivo: situar computer use, extensões, navegadores com agente e ferramentas de dev, com status datado, e deixar o kit pronto.
01Quatro famílias, um mesmo site
Clique em cada bloco.
Status de out/2026 muda rápido: tudo aqui tem fonte e data.
As quatro chegam ao mesmo HTML. O que você testar com a quarta vale, em boa parte, para as outras três.
02Como ler o status de um agente
Três perguntas antes de acreditar.
1. Quem disse?
Post do fabricante, documentação ou repositório oficial valem como fato. Matéria de imprensa e agregador valem como "relatado por".
Exemplo: o post da Anthropic de 24/11/2025 é fonte primária; o post da OpenAI sobre o Atlas (22/12/2025), aqui, só veio pela cobertura.
2. Quando?
Escreva a data junto do status: "beta no plano Max em 24/11/2025", e não "está em beta". Em seis meses a frase sem data vira mentira.
Versão de pacote também é status: o kit fixa @playwright/mcp 0.0.83 e chrome-devtools-mcp 1.10.1, publicados em 28/09 e 23/09/2026 segundo o registro do npm.
3. Roda onde?
Extensão e navegador com agente rodam na conta de alguém e gastam assinatura. As ferramentas de dev rodam local, contra 127.0.0.1, sem modelo nenhum se você quiser.
Por isso o curso ensaia tudo com elas e deixa o agente real para um passo opcional.
Regra do curso
Agente de navegador só contra a página do kit ou contra um site seu. Nada de login real, compra ou formulário de terceiros.
03O kit pronto em dois comandos
Instala as versões fixadas e confere as peças. O versoes.mjs não chama rede nem modelo.
Terminal · instalar o 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 · conferir as peças
cd ~/projetos/formacao-webmcp-navegador-v72/kit node versoes.mjs; echo "saída: $?"
Exemplo do repositório
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
Quatro peças obrigatórias: Node 20.19+, 22.12+ ou 23+ (o chrome-devtools-mcp exige), o Playwright com o Chromium dele, o Playwright MCP e o Chrome DevTools MCP. Claude Code e Codex aparecem como opcionais: o curso inteiro roda sem eles.
added 101 packages in 2s saída: 0
O npm ci instala exatamente o que está no package-lock.json. Na primeira vez, o npx playwright install chromium baixa o Chromium do Playwright (algumas centenas de MB); nas seguintes, não imprime nada.
04Prática
O kit na sua máquina e o seu mapa. Cada exercício tem um "pronto quando".
E2 · O seu mapa
10 minCrie mapa-agentes.md com três agentes de navegador que você ou seus clientes usam, uma linha por agente: família | agente | status | fonte | data. Status sem fonte vira "relatado por".
Pronto quando: grep -c "|" mapa-agentes.md → 3 ou mais, e toda linha tem uma data.
05Teste da aula
Pergunta 1 de 4
Qual família de agente este curso usa para testar o site, e por quê?competência
Correto
Playwright MCP e Chrome DevTools MCP rodam na sua máquina, contra 127.0.0.1, e dá para ensaiar sem modelo. As outras famílias rodam na conta de alguém e gastam assinatura.Não é essa
Playwright MCP e Chrome DevTools MCP rodam na sua máquina, contra 127.0.0.1, e dá para ensaiar sem modelo. As outras famílias rodam na conta de alguém e gastam assinatura.Rever: Quatro famílias, um mesmo sitePergunta 2 de 4
Você leu numa matéria que um navegador com agente chegou ao Android em agosto. Como escreve isso no seu mapa?
Correto
Sem a fonte primária, entra como relatado, com a data em que você conferiu. Duas matérias que copiam a mesma fonte continuam sendo segunda mão.Não é essa
Sem a fonte primária, entra como relatado, com a data em que você conferiu. Duas matérias que copiam a mesma fonte continuam sendo segunda mão.Rever: Como ler o status de um agentePergunta 3 de 4
O que a Anthropic disse em 24/11/2025 sobre agentes de navegador e prompt injection?competência
Correto
O post diz que a taxa de ataque bem-sucedido caiu para ~1% e que isso "still represents meaningful risk. No browser agent is immune". O assunto a fundo é do curso 4.Não é essa
O post diz que a taxa de ataque bem-sucedido caiu para ~1% e que isso "still represents meaningful risk. No browser agent is immune". O assunto a fundo é do curso 4.Rever: Quatro famílias, um mesmo sitePergunta 4 de 4
Por que o kit fixa @playwright/mcp 0.0.83 em vez de usar a última versão?
Correto
A saída de cada bloco foi capturada com aquela versão, em 19/10/2026. Em versão nova, nomes de ferramenta e formato da resposta podem mudar.Não é essa
A saída de cada bloco foi capturada com aquela versão, em 19/10/2026. Em versão nova, nomes de ferramenta e formato da resposta podem mudar.Rever: Como ler o status de um agenteTeste concluído
Você acertou {a} de {n}. Acertando todas, a aula é marcada como concluída.Escolha uma alternativa. A explicação aparece depois da sua tentativa.
06Em três frases
Quatro famíliasComputer use, extensões, navegadores com agente e ferramentas de dev chegam ao mesmo HTML.
Status com dataFonte primária é fato; o resto é "relatado por", com a data em que você conferiu.
Testar localPlaywright MCP e DevTools MCP rodam na sua máquina, com versão fixada e sem gastar cota.