MCP com Chrome: Automação com IA · Capítulo 4 de 16 · 25 min
Fazer o agente ler a página em texto em vez de fotografar
Captura de tela custa muito mais contexto que a leitura em texto e erra mais o alvo, porque coordenada depende do layout.
Este capítulo faz parte do curso gratuito MCP com Chrome: Automação com IA.
O que é: a escolha entre duas formas de o agente enxergar a página, a leitura estrutural em texto e a captura de tela, que custam ordens de grandeza diferentes de contexto. Por que importa: capturar tela por reflexo multiplica o custo e a lentidão de cada automação sem entregar nada em troca na maioria das tarefas, e essa conta escala com o volume de execuções. A sua decisão: adotar a leitura estrutural como padrão e a captura de tela como exceção justificada, e cobrar a medição do custo no ambiente real. O que delegar: a configuração das flags, os experimentos de medição e o registro dos números cabem ao time. O passo a passo para operar vem logo abaixo.
Glossário rápido
Leitura estrutural
A página descrita em texto, com o papel e o rótulo de cada elemento interativo, em vez de uma imagem renderizada. É como ler o índice de um documento em vez de fotografar cada página inteira: ocupa muito menos espaço e ainda diz o que cada item é.
Janela de contexto
O espaço de memória que o modelo lê a cada passo; tudo que entra ali é pago e disputa lugar com o resto. Uma captura de tela ocupa muito mais desse espaço do que a leitura estrutural da mesma página, e por isso a conta de uma automação incha sem ninguém perceber.
Com o laboratório de pé, o próximo desperdício mora na forma como o agente (o assistente de IA que usa o navegador por você) enxerga a página. Mande ele tirar uma captura de tela e clicar no botão azul, e o roteiro comum se repete: erra o alvo, tira outra captura, tenta de novo, acerta na terceira. A tarefa terminou, então parece que funcionou. O que não aparece na tela é a conta: cada captura entrou inteira na janela de contexto, e você pagou três vezes por uma informação que um bloco de texto entregaria de primeira.
Esse é o modo mais comum de uma sessão de automação ficar lenta e cara sem que ninguém tenha feito nada obviamente errado. A causa é a representação da página que você escolheu enviar ao modelo. Existem duas, elas custam coisas muito diferentes, e a escolha correta é quase sempre a mesma.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
Leitura estrutural é a árvore de acessibilidade da página serializada em texto: para cada elemento interativo, o papel (botão, campo de texto, link), o rótulo acessível e um identificador opaco que o servidor cunha para você apontar aquele elemento. Captura de tela é a imagem renderizada: o modelo enxerga pixels e precisa deduzir onde clicar.
A leitura estrutural resolve o problema de mira antes de ele existir. Você não descreve uma posição, você nomeia um elemento pelo identificador que acabou de receber. Se o botão mudar de lugar, de cor ou de tamanho, o identificador continua apontando para o mesmo nó. Coordenada, por definição, depende do layout.
Um refinamento recente da leitura estrutural é a ferramenta browser_find, que busca por texto ou expressão regular dentro do snapshot e devolve só os elementos que casam, em vez de despejar a árvore inteira no contexto. Em página grande, isso corta ainda mais o que entra na janela antes da primeira ação.
form "Fale conosco" textbox "Nome" [ref=e3] textbox "E-mail" [ref=e4] combobox "Assunto" [ref=e5] expanded=false textarea "Mensagem" [ref=e6] button "Enviar" [ref=e7] link "Política de privacidade" [ref=e8]
Repare no que veio junto de graça: o estado do combobox e o papel de cada nó. O agente sabe que e5 é uma lista fechada antes de tentar digitar dentro dela. Uma captura de tela não carrega essa semântica, ela só mostra um retângulo com um triângulo do lado.
Sobre a ordem de grandeza da diferença: a documentação do Playwright MCP (servidor que liga o assistente a um navegador limpo) cita a faixa de 200 a 400 unidades de contexto por leitura estrutural contra 3 mil a 5 mil por captura de tela. Trate isso como ordem de grandeza publicada pelo projeto; a medida do seu ambiente sai do seu próprio teste. O número que vale para você é o que o seu cliente relatar, e é exatamente isso que a tarefa deste módulo pede que você meça.
Captura de tela continua sendo insubstituível para asserção genuinamente visual: um gráfico que precisa ter renderizado, uma animação que precisa ter rodado, um layout que quebrou em determinada largura. O critério é simples: se a pergunta só pode ser respondida olhando, capture. Se a pergunta é onde está o campo de e-mail, leia.
// No Playwright MCP o modo padrão já é a leitura estrutural.
// As ferramentas de clique por coordenada ficam atrás da capacidade "vision",
// que você liga de forma explícita e consciente, e não por reflexo.
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["-y", "@playwright/mcp@latest", "--caps", "vision"]
}
}
}Ligar a capacidade de visão por padrão é a decisão que mais encarece uma sessão sem entregar nada em troca. Com ela ativa, o modelo passa a ter um caminho fácil e ruim disponível o tempo todo, e vai usá-lo. Deixe desligada até ter uma asserção que só a imagem responde.
O identificador tem prazo de validade. Aqui mora o erro que mais derruba roteiro em produção. O identificador devolvido na leitura estrutural vale dentro daquela leitura. Ele é cunhado no momento da captura da árvore, e o que existe do outro lado é um nó específico do DOM daquele instante. Navegue, submeta um formulário, deixe um componente (um bloco da página, como uma peça de Lego) renderizar de novo, e a referência aponta para o vazio.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
leitura estrutural -> identificadores válidos (e3, e4, e7)
|
v
ação (preencher e3, preencher e4, clicar e7)
|
v
espera por estado observável (texto de confirmação na página)
|
v
NAVEGOU? --- sim --> NOVA leitura estrutural -> identificadores novos
|
não
|
v
seguir usando os identificadores da leitura atualGuardar identificador entre passos e reusar depois de uma navegação é a falha número um de quem acabou de sair da captura de tela. O sintoma é enganoso: a mensagem costuma dizer que o elemento não foi encontrado, o que sugere problema na página, quando o problema é a referência morta na sua mão.
# Sequência mínima e correta, em pseudo-roteiro de chamadas de ferramenta.
# Vale tanto para o servidor do Chrome quanto para o Playwright MCP: muda o
# nome das ferramentas, não a disciplina.
1. navegar para a URL do formulário
2. leitura estrutural -> anote os identificadores desta leitura
3. preencher campo <id do nome>
4. preencher campo <id do e-mail>
5. clicar no botão <id de enviar>
6. esperar por um texto que só existe depois do envio
7. NOVA leitura estrutural -> a página mudou, os identificadores anteriores morreram
8. só agora agir sobre a página de confirmaçãoO custo que existe antes do primeiro clique. Parte da conta é paga só de conectar o servidor. As descrições e os schemas de todas as ferramentas entram no contexto antes de você pedir qualquer coisa. No repositório do servidor do Chrome existe issue aberta pedindo otimização dos schemas por eficiência de contexto, com a estimativa de cerca de 17 mil unidades apenas na descoberta inicial das ferramentas e a alegação de que otimizar schema reduziria algo em torno de 40%.
Anote a proveniência: esse número vem de uma issue (um chamado público de defeito, como uma reclamação protocolada) do próprio repositório, fora da documentação oficial. Ele mostra que o problema é reconhecido pelo projeto e que existem mecanismos oficiais de contenção; citado como especificação, ele engana.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
# Modo enxuto do servidor do Chrome: expõe apenas três ferramentas
# (navegação, execução de script e captura de tela) em vez do conjunto completo.
# Use quando a janela de contexto estiver apertada ou quando houver muitos
# servidores MCP conectados na mesma sessão.
npx chrome-devtools-mcp@latest --slim
# Perfil descartável, sem tocar no seu Chrome do dia a dia.
# Combina bem com o modo enxuto em sessão de aprendizado.
npx chrome-devtools-mcp@latest --slim --isolatedConjunto completo quando a tarefa é diagnóstico e você vai precisar de rede, traço de performance ou memória. Modo enxuto quando a tarefa é navegar, ler e executar script, e o contexto está disputado. Interface de linha de comando quando a sequência de ações é conhecida de antemão e pode ir empacotada, em vez de uma chamada de ferramenta por passo.
A interface de linha de comando foi publicada pelo próprio projeto como alternativa mais econômica em contexto, justamente por permitir que o agente empacote várias ações em um roteiro. Ela entrou como experimental e é um cliente de um processo em segundo plano, que sobe servidor e navegador na primeira chamada. Por ser experimental, trate como caminho de otimização e deixe fora do runbook de produção.
Cuidado com jornadas longas de várias páginas. Análise publicada por terceiros observa que o Playwright MCP regenera a árvore de acessibilidade a cada interação, o que faz o custo crescer bem mais rápido do que a intuição sugere em fluxos de dez ou vinte passos. Leitura estrutural é barata por observação e fica cara em laço.
Tarefa do módulo. Você vai executar a mesma tarefa duas vezes, no seu ambiente, e trazer os dois números. Escolha um formulário público simples com pelo menos três campos, por exemplo um formulário de contato de um site que você mesmo controla, e evite qualquer página que exija login.
RODADA A (leitura estrutural)
1. Zere o contexto da sessão.
2. Peça: navegue até <URL>, faça a leitura estrutural, preencha os três campos
com dados fictícios e clique em enviar. Proibido usar captura de tela.
3. Anote: consumo relatado pelo seu cliente e número de tentativas até acertar
cada alvo.
RODADA B (captura mais coordenada)
1. Zere o contexto de novo. Comece limpo, senão a comparação não vale.
2. Peça: navegue até <URL>, tire uma captura de tela e clique nos campos por
coordenada, preenchendo os mesmos três valores. Proibido usar leitura
estrutural.
3. Anote os mesmos dois números.
RODADA C (provocar o identificador morto)
1. Faça a leitura estrutural e guarde o identificador do botão de enviar.
2. Navegue para outra página qualquer.
3. Peça ao agente que clique naquele identificador guardado, sem nova leitura.
4. Anote a mensagem de erro exata que apareceu.| rodada | consumo relatado | tentativas até acertar | capturas | leituras | | ------ | ---------------- | ---------------------- | -------- | -------- | | A | | | 0 | | | B | | | | 0 | | C | erro observado: |
Comparar rodadas sem zerar o contexto faz a segunda parecer mais barata só porque a página já estava descrita na janela. Contar apenas a chamada da ferramenta e esquecer o custo de descoberta esconde metade da conta. Concluir que a captura de tela é inútil é o exagero oposto: ela continua sendo a única resposta para asserção visual.
Se na rodada C o clique com identificador antigo funcionou, a navegação não aconteceu de verdade. Confirme que a URL mudou ou que a estrutura da página foi recriada antes de concluir qualquer coisa. Um roteiro que parece passar por sorte é pior do que um que falha alto.
Você concluiu este módulo quando: (1) apresenta lado a lado o consumo relatado e o número de tentativas das rodadas A e B no seu próprio ambiente, com o contexto zerado entre elas; (2) a rodada C falha de forma visível ao reusar o identificador depois da navegação, e você tem a mensagem de erro anotada; (3) você consegue nomear, sem consultar, um caso em que a captura de tela é a escolha certa e explicar por que ele não é resolvido por texto; (4) você sabe qual mecanismo de contenção ligaria primeiro se a janela de contexto ficasse apertada nesta sessão.
Cabe a você transformar em política o que aqui é técnica: leitura estrutural como padrão, captura de tela só quando a pergunta só se responde olhando, e a capacidade de visão desligada até existir uma asserção que a exija. Exija do time o número medido no seu próprio ambiente, porque é ele, e não a faixa publicada pelo projeto, que dimensiona o custo da operação quando ela roda em escala.
Seu caderno neste capítulo
Abrir o caderno completoSelecione um trecho do capítulo para destacar ou anotar. Nos vídeos e áudios, use Anotar este momento. No teclado, selecione com Shift e as setas e use Alt+Shift+D para destacar ou Alt+Shift+N para anotar.
Salvo neste navegador. Entre na sua conta para levar o caderno a outros aparelhos.
Entre na sua conta para compartilhar o que aprendeu e convidar alguém para estudar com você.
Conexões deste capítulo
Veja o que estudar antes e para onde seguir depois, explore os conceitos e compare abordagens em outros cursos. Sugestões marcadas como “sugerido pelo grafo” vêm dos assuntos em comum, não do índice do curso.
Estude antes
- CursoMCP para quem decidesugerido pelo grafo7 capítulos de “MCP com Chrome: Automação com IA” usam conceitos apresentados em “MCP para quem decide”.
- CursoNode.js: JavaScript no Servidorsugerido pelo grafo3 capítulos de “MCP com Chrome: Automação com IA” usam conceitos apresentados em “Node.js: JavaScript no Servidor”.
- CursoSetup Completo: do zero ao Claude Codesugerido pelo grafo3 capítulos de “MCP com Chrome: Automação com IA” usam conceitos apresentados em “Setup Completo: do zero ao Claude Code”.
- CursoVídeo com IA: Claude Code, Codex e ElevenLabssugerido pelo grafo3 capítulos de “MCP com Chrome: Automação com IA” usam conceitos apresentados em “Vídeo com IA: Claude Code, Codex e ElevenLabs”.
Conceitos deste capítulo
O mesmo assunto em outros cursos
Voltar ao capítulo anterior: Montar um laboratório que você pode jogar fora
Leve uma ideia para a prática
Escolha uma atividade no painel e volte a este curso quando quiser.
Atividades e evolução ficam reunidas no painel da sua conta.
Capítulos vizinhos em MCP com Chrome: Automação com IA
- 02Escolher a ferramenta de navegador pelo login que ela enxerga
- 03Montar um laboratório que você pode jogar fora
- 04Fazer o agente ler a página em texto em vez de fotografar
- 05Instalar a extensão no seu Chrome e religar quando ela cair
- 06Onde termina a leitura e começa a consequência