Agentes de navegador: testar o site como o agente vê|INEMA.CLUB-PRO

Formação WebMCP · curso 3 de 6 · 8 aulas

Agentes de navegador: teste o seu site como o agente vê

Playwright MCP, Chrome DevTools MCP e o lado do agente que consome WebMCP, rodando contra uma página local. Você escreve o contrato de cada tarefa, vê onde a tela falha e sai com uma bateria que um agente roda contra o seu site e grava em arquivo.

Começar pela aula 1 Ver a área WebMCP
Monitor escuro com um navegador aberto e, ao lado, um robô humanoide industrial operando o teclado.
  • 8aulas
  • 19exercícios com saída esperada
  • 2servidores MCP de navegador testados
  • 1passo opcional com o seu agente

As aulas

Do mapa dos agentes à bateria do seu site: Playwright MCP, DevTools MCP, o lado que consome WebMCP, o contrato, o teste em arquivo, onde a tela falha e a bateria.

  1. Aula 1 · 15 minO mapa de out/2026: computer use, extensões, navegadores com agente e ferramentas de devAgente 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.
  2. Aula 2 · 20 minPlaywright MCP no Claude Code/Codex: o snapshot de acessibilidade na práticaO Playwright MCP dá um navegador ao seu agente de código. Ele não manda captura de tela: manda o snapshot de acessibilidade, com uma referência (ref) em cada controle, e o agente age por essas refs. Nesta aula um script faz exatamente as chamadas que o agente faria, sem modelo, e depois você liga o servidor ao Claude Code ou ao Codex.
  3. Aula 3 · 15 minChrome DevTools MCP: ver o que o agente fez (console, rede)Quando o agente diz "não consegui", a resposta costuma estar no console ou na rede: um arquivo que deu 404, um erro de JavaScript. O Chrome DevTools MCP dá ao agente as mesmas abas que você abre no F12. Nesta aula você lista o console e a rede da página do kit, acha o erro plantado e zera.
  4. Aula 4 · 20 minO agente que consome WebMCP: descoberta, execução, exposedTo e origemO curso 2 ensina a página a registrar ferramentas. Aqui você fica do outro lado: o agente. O Playwright MCP 0.0.83 já transforma as ferramentas WebMCP da página em ferramentas dele, com as anotações e um aviso de "não confiável". Você vê a descoberta, a chamada, o caminho sem a API e quem enxerga o quê entre origens. Experimental em 19/10/2026.
  5. Aula 5 · 15 minContrato de tarefa para agente de navegador (objetivo, limites, prova, parada)"Agende uma revisão pra mim no site" parece um pedido. Para um agente de navegador, falta tudo: em que página, o que ele pode tocar, como provar que acabou e quando parar. Nesta aula você escreve o contrato de uma tarefa em quatro partes e confere com um script que o contrato está completo antes de entregar a qualquer agente.
  6. Aula 6 · 20 minUm agente testa o seu site: tarefas com critério e resultado em arquivoTeste que só existe na conversa com o agente some quando a conversa acaba. Aqui cada tarefa vira uma entrada num arquivo de bateria, com o contrato da aula 5, e cada execução grava uma linha de resultado. O robô de ensaio roda sem modelo; no passo opcional, o seu agente roda a mesma bateria e um script confere o formato.
  7. Aula 7 · 15 minOnde a tela falha (login, captcha, conteúdo dinâmico) e quando o humano assumeHá telas em que o agente não deve seguir: login, verificação humana e o botão que confirma uma ação. E há uma em que ele erra sem perceber: o conteúdo que chega depois. Nesta aula a bateria de limites passa por esses quatro casos no site do kit, e você vê o agente parar com o motivo exato em vez de inventar.
  8. Aula 8 · 20 minA bateria de tarefas do seu site (mapa + gerador)Hora de juntar: as tarefas que importam no seu site, cada uma com contrato, passos e o que se espera, numa bateria que o robô de ensaio roda a cada mudança e que o seu agente pode rodar quando você quiser. O conferir-bateria.mjs diz se ela está pronta; o mapa e o gerador organizam o que falta.

Para quem é

  1. 1Dev web ou QA que edita HTML e JavaScript e roda comandos no terminal.
  2. 2Quem quer saber se um agente de navegador consegue usar o próprio site, antes que o cliente descubra.
  3. 3Quem já fez o curso 0 (ou sabe ler a árvore de acessibilidade) e quer testar de verdade.

O que você sai fazendo

  1. 1Ligar o Playwright MCP e o Chrome DevTools MCP ao Claude Code ou ao Codex e ver o que eles enxergam.
  2. 2Ver como um agente descobre e chama as ferramentas WebMCP de uma página, e o que acontece sem a API.
  3. 3Escrever o contrato de uma tarefa: objetivo, limites, prova e parada.
  4. 4Rodar uma bateria de tarefas contra o seu site, com o resultado em arquivo e o agente parando onde deve.

Onde este curso entra na Formação WebMCP

  1. 1É o curso 3. Ordem sugerida: 0 → 1 → 2 → 3 → 4 → 5.
  2. 2Antes: 0 · base, 1 · servidor MCP, 2 · WebMCP na página. Depois: 4 · segurança, 5 · expert.
  3. 3Antes de começar: Node 20.19+, 22.12+ ou 23+, git e um terminal Linux ou macOS (no Windows, WSL). Claude Code ou Codex só no passo opcional da aula 6.
  4. 4O kit, o site de exemplo e as mensagens dos scripts estão em português em todas as versões do curso; os comandos são os mesmos.