Automação de Navegador com Claude Code: Guia Prático 2026

essa categoria de ferramentas muda rápido, então confirme os comandos mais recentes com agent-browser skills get core --full e npx …@latest antes de rodar.

O que é automação de navegador com Claude Code?

Automação de navegador com Claude Code significa deixar o agente do Claude Code controlar um navegador de verdade (navegar, clicar, preencher formulários, ler o DOM e o console, tirar prints, extrair dados) através de um CLI, um servidor MCP ou uma extensão — em vez de você clicar em tudo manualmente. Colocando de forma simples, é a IA dirigindo o navegador: você descreve o que quer em inglês simples, e o Claude Code transforma isso em ações na web e as executa por você.

Por que quem desenvolve precisa disso? Algumas situações reais: rodar um teste E2E em um fluxo de login, preencher e enviar um formulário para checar a validação, verificar a UI logo depois de construir um componente ou coletar uma tabela de dados para conferir. Antes você escrevia scripts de Playwright ou Puppeteer na mão; agora o Claude Code consegue montar e executar essas ações sozinho, ler os resultados (logs do console, estrutura do DOM) e se corrigir quando algo quebra.

Se você é novo nessas ferramentas, comece por o que é o Claude Code para se familiarizar com as ideias de agentes e permissões — porque a automação de navegador está diretamente ligada a conceder a uma IA o direito de agir em seu nome.

4 formas de o Claude Code controlar um navegador (escolha a ferramenta certa)

A parte mais confusa é que existem quatro caminhos, e a documentação de cada ferramenta nunca os compara lado a lado. Aqui vai um mapa rápido para você escolher certo desde o começo. Três dos quatro dependem do MCP (Model Context Protocol) — o protocolo padrão que o Claude Code usa para se conectar a ferramentas externas.

O caminho 4 é profundo o bastante para ganhar sua própria seção — veja logo abaixo.

Para a maioria de quem desenvolve, o agent-browser é o padrão razoável: é leve, eficiente em tokens e roda por bastante tempo sem puxar toda a stack do Playwright. As próximas três seções aprofundam na instalação e no uso. Você pode adicionar o Playwright MCP rapidamente com claude mcp add playwright npx @playwright/mcp@latest, e o Chrome DevTools MCP com claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest (conforme os READMEs de microsoft/playwright-mcp e ChromeDevTools/chrome-devtools-mcp, verificados em 08/2026).

Instalando o agent-browser para o Claude Code

A configuração é rápida. O agent-browser é um CLI open source da vercel-labs; os passos abaixo foram verificados ao vivo em 09/08/2026.

# 1. Install the CLI globally
npm install -g agent-browser

# 2. Download the Chromium that agent-browser drives
agent-browser install
# On Linux, if system libraries are missing:
agent-browser install --with-deps

# 3. Confirm the install worked
agent-browser --version

# 4. Load the core workflow set for Claude Code
agent-browser skills get core
# For the full command reference:
agent-browser skills get core --full

O passo 4 carrega as descrições de workflow para que o Claude Code saiba como chamar o agent-browser no contexto certo. Por fim, deixe o Claude Code rodar o comando declarando a ferramenta permitida Bash(agent-browser:*) na sua configuração de permissões — senão você terá que aprovar cada execução manualmente. Atualize depois com agent-browser upgrade.

Passo a passo: automação de navegador com Claude Code

Os quatro passos abaixo são o loop de trabalho central. A ideia principal: tire um snapshot para pegar a ref @eN de cada elemento e então aja através dessa ref — em vez de escrever seletores CSS longos e frágeis.

Passo 1 - Abra a página e tire um snapshot

agent-browser open https://example.com
agent-browser snapshot -i

O snapshot -i retorna a árvore de acessibilidade com refs curtas como @e1, @e2 e assim por diante para cada elemento interativo. Como cada snapshot tem só ~280 caracteres (contra 8K+ do Playwright MCP), o Claude Code lê rápido e gasta poucos tokens — que é exatamente por que o agente consegue encadear vários passos seguidos sem afogar o seu contexto.

Passo 2 - Clicar, preencher formulários, navegar

# Fill the email field (ref taken from the snapshot)
agent-browser fill @e3 "[email protected]"
# Click the login button
agent-browser click @e7

Sempre aja usando as refs do snapshot mais recente. Uma ressalva honesta: uma ref @eN está atrelada à renderização atual — se a página muda de estado (troca de aba, abre um modal, recarrega), tire um snapshot novo, porque a ref antiga pode acabar apontando para o elemento errado.

Passo 3 - Print e extração de dados (scraping)

# Save an image of the current state for a visual check
agent-browser screenshot result.png
# Take a snapshot to extract DOM structure and text
agent-browser snapshot -i

A partir de um snapshot, o Claude Code consegue ler e resumir o conteúdo (por exemplo, uma lista de produtos ou uma tabela de preços) em JSON ou em uma tabela Markdown ali mesmo no terminal.

Passo 4 - O loop de autoverificação (construir, verificar, depurar)

Essa é a parte mais valiosa, e é a que outros guias mencionam em uma única frase. O fluxo: você constrói no terminal, o Claude Code abre o navegador para verificar o resultado, lê o console e o DOM e, se algo está errado, se corrige e roda de novo. Concretamente:

1. O Claude Code edita o código e sobe o servidor de desenvolvimento.
2. agent-browser open http://localhost:3000 para abrir a UI que você acabou de construir.
3. agent-browser snapshot -i para confirmar que os elementos esperados apareceram; leia o console para pegar erros em tempo de execução.
4. Se algo está fora do lugar, o Claude Code edita o código, recarrega a página e repete — até a UI ficar correta.

É esse loop que transforma "a IA escreve código" em "a IA verifica o próprio código em um navegador de verdade".

Exemplo do mundo real: fazer login em um site de demonstração e verificar a UI

A tarefa de demonstração: fazer login em um site de demo e então confirmar que o painel mostra o nome de usuário correto. Use isso como um modelo que você pode escalar até testes E2E de verdade.

# Plain-English request you send to Claude Code:
# "Open the demo login page, sign in with the test account,
# then check that the dashboard shows the right name."

agent-browser open https://practice.expandtesting.com/login
agent-browser snapshot -i # get refs for the input fields + button
agent-browser fill @e2 "practice"
agent-browser fill @e3 "SuperSecretPassword!"
agent-browser click @e4 # the Login button
agent-browser snapshot -i # confirm you reached the secure page

Uma observação honesta sobre a experiência: os passos de fill e click costumam rodar tranquilos em formulários simples. Onde costuma tropeçar é em uma ref ficando obsoleta depois que a página muda — depois que você clica em Login, a página segura é um novo DOM, então você precisa rodar snapshot -i de novo antes de verificar; não reutilize as refs da página de login. Para sites com captcha ou autenticação de dois fatores, o agent-browser sozinho não basta; é aí que você precisa de uma sessão logada de verdade (veja a seção chrome-profile abaixo).

Rodando na nuvem e em CI/CD (sem navegador local)

Quando você roda dentro de um pipeline de CI ou em uma máquina sem Chrome, você pula a instalação do Chromium localmente e aponta o agent-browser para um navegador na nuvem:

# Browserbase: set the environment variables, then add the provider with -p
export BROWSERBASE_API_KEY=...
export BROWSERBASE_PROJECT_ID=...
agent-browser -p browserbase open https://example.com

Além do Browserbase, o agent-browser também suporta AWS Bedrock AgentCore e Vercel Sandbox para ambientes efêmeros. Para observar as sessões em execução (sessões, logs), o agent-browser tem um painel de observabilidade na porta 4848. Essa é a base para levar os testes de navegador para um pipeline automatizado, em vez de só rodá-los na mão na sua máquina de desenvolvimento.

agent-browser vs chrome-profile: quando você precisa do Chrome de verdade?

A decisão-chave é esta: a tarefa precisa de uma sessão logada de verdade e cookies, ou não?

Resumindo: use o agent-browser por padrão e só troque para o chrome-profile quando você realmente tiver que emprestar uma sessão logada de verdade — porque, como ele age na sua conta real, o risco é maior.

Depuração ao vivo direto no Chrome: --chrome, /chrome

Esta é a forma nº 4 da tabela acima, profunda o bastante para merecer sua própria seção. Diferente do agent-browser, do Playwright MCP e do Chrome DevTools MCP — que controlam um navegador descartável, controlado por CDP — a integração nativa com o Chrome roda dentro do seu Chrome de verdade pela extensão "Claude in Chrome", abre abas visíveis (não headless) e usa sua sessão logada real. Não é um produto separado; é um recurso nativo do Claude Code que conecta o CLI ou o VS Code à extensão.

Inicie com claude --chrome. Na primeira vez, um diálogo único explica como funcionam as permissões por site — pressione Enter para continuar. Para não passar a flag toda sessão, rode /chrome e selecione "Enabled by default" — o custo é um consumo extra de contexto a cada sessão, já que as ferramentas de navegador ficam carregadas, então só ative isso se você usa com frequência. O /chrome também é como você checa o status da conexão, gerencia permissões por site, reconecta a extensão ou escolhe qual navegador usar quando há mais de um conectado (a seleção de navegador exige o Claude Code v2.1.154+).

Exemplo de prompt em inglês simples (espelha o próprio exemplo da documentação):

Go to code.claude.com/docs, click on the search box,
type "hooks", and tell me what results appear

A documentação lista oito grupos de capacidades; os três mais relevantes para quem desenvolve são:

• Depuração ao vivo - ler erros do console e o estado do DOM diretamente e então corrigir o código que os causou. Essa é a capacidade mais útil para um fluxo de programação, e o artigo a ignorava por completo antes desta atualização.
• Verificação de design - construir uma UI a partir de um mock do Figma e então abri-la no navegador para conferir se bate.
• Apps web autenticados - trabalhar no Gmail, Google Docs, Notion ou em qualquer app interno onde você já está logado, sem nenhum conector de API para configurar.
• Também incluído: teste de apps web (validação de formulário, regressões visuais), extração de dados estruturados, automação de tarefas repetitivas, upload de arquivos (limite de 10MB, recusa arquivos com vários hard links, como dentro de node_modules, exige v2.1.211+) e gravar uma sessão como um GIF compartilhável.

Segurança no modo de plano: no modo de plano, chamadas somente leitura (read_page, get_page_text, find, ler console/rede, tirar um print) rodam sem pedir confirmação; chamadas que alteram estado (cliques, digitação, navegação, gerenciamento de abas/janelas, gravação de GIF) ainda pedem aprovação.

Um exemplo real: "Depurar um formulário de login quebrado" - abra localhost:3000, peça ao Claude Code para enviar o formulário com dados inválidos, leia o que aparece no console e proponha uma correção para o código que causou o problema. Aqui não é preciso nenhuma sintaxe especial de CLI — só um pedido em inglês simples, no mesmo estilo dos dois prompts acima.

O atalho - o AgentKit já vem com uma skill ak-agent-browser

Se você prefere não montar e configurar cada ferramenta por conta própria, existe um atalho. O pacote AgentKit (Engineer Kit) reúne duas skills relacionadas: ak-agent-browser (que envolve o CLI agent-browser por baixo) e ak-chrome-profile — você digita um pedido em inglês simples e ele roda, sem decorar flags.

Uma nota sobre o nome: "AgentKit" aqui se refere ao kit para Claude Code em agentkit.best, que usa o CLI ak — e não ao produto "AgentKit" da OpenAI. E o agent-browser é o CLI open source (vercel-labs) que fica por baixo dessa skill.

Isso é um atalho conveniente, não uma exigência: você pode perfeitamente usar o agent-browser de graça exatamente como mostrado nas seções acima.

Erros comuns e como corrigi-los

Como se manter em segurança ao deixar uma IA dirigir o navegador

Entregar o controle do navegador para uma IA abre uma superfície de ataque real: injeção de prompt - conteúdo malicioso em uma página web enganando o agente para fazer algo que você não pretendia. Segundo a Anthropic, quando anunciou o Claude for Chrome, depois de adicionar defesas a taxa de sucesso de ataques de injeção de prompt caiu de 23,6% para 11,2%, e para uma classe de ataques específica de navegador ela caiu de 35,7% para 0% no conjunto de desafios deles (claude.com/blog/claude-for-chrome, 08/2025).

Princípios práticos para automatizar com segurança:

• Conceda permissões por site, não de forma global.
• Exija confirmação antes de ações de alto risco: publicar, enviar e-mail, compartilhar dados, pagamentos.
• Evite deixar o agente agir por conta própria em páginas com dados sensíveis ou contas importantes.
• Prefira um navegador descartável (agent-browser) para tarefas que não precisam de login; só use uma sessão real (chrome-profile) quando for imprescindível.

Com a integração nativa com o Chrome, o princípio de "conceder permissões por ação" acima não é só um conselho genérico — o modo de plano impõe exatamente esse mecanismo: chamadas somente leitura rodam livremente, chamadas que alteram estado sempre exigem confirmação (veja a seção --chrome//chrome acima para detalhes).

Perguntas frequentes (FAQ)

agent-browser ou Playwright MCP: qual é melhor?

Depende do que você precisa. O agent-browser é leve e eficiente em tokens graças aos snapshots compactos (~280 caracteres contra 8K+ do Playwright MCP), o que combina com execuções longas e autônomas. O Playwright MCP é forte se você já conhece o ecossistema Playwright e quer muitas ferramentas prontas (rede, armazenamento, PDF). Para a maioria de quem desenvolve, o agent-browser é o padrão sensato.

Preciso saber Playwright?

Não. O agent-browser não é construído sobre Playwright nem Puppeteer; você faz pedidos em inglês simples e age através das refs @eN do snapshot, sem escrever scripts de Playwright na mão.

Dá para rodar headless / em CI?

Sim. Em CI ou em uma máquina sem navegador local, aponte o agent-browser para um navegador na nuvem como o Browserbase (agent-browser -p browserbase open …), ou AWS Bedrock AgentCore, ou Vercel Sandbox.

Dá para automatizar páginas que já estão logadas?

Sim, mas você deve usar o chrome-profile para emprestar sua sessão logada real e seus cookies. O agent-browser roda um navegador descartável por padrão, que é a escolha certa quando nenhuma conta real é necessária.

É seguro deixar uma IA dirigir o navegador?

Existe um risco de injeção de prompt, mas ele é gerenciável: conceda permissões por site, confirme antes de ações de alto risco e evite páginas sensíveis. Os fornecedores também adicionaram defesas que reduzem bastante as taxas de ataque (veja a seção de segurança).

O AgentKit inclui essa skill?

Sim. O pacote AgentKit (Engineer Kit) já vem com as skills ak-agent-browser e ak-chrome-profile, que deixam você pular a configuração manual. É um atalho opcional, não uma exigência para usar o agent-browser.

Como o --chrome é diferente do "Claude for Chrome" da tabela de comparação?

É a mesma extensão. O --chrome é a flag que liga a integração pelo CLI (ou rode /chrome para habilitá-la por padrão); "Claude for Chrome" na tabela é só outro nome para esse mesmo recurso quando nos referimos à extensão.

A integração com o Chrome funciona via Bedrock ou Vertex?

Não. Ela exige uma conta Anthropic direta (logada via /login) e não está disponível por provedores terceirizados como Bedrock, Agent Platform do Google Cloud ou Microsoft Foundry. Se a sua empresa acessa o Claude exclusivamente por um desses, você precisa de uma conta claude.ai separada para o recurso do Chrome.

Conclusão e próximos passos

Use o agent-browser por padrão: é leve, eficiente em tokens e roda de forma autônoma muito bem para testes, preencher formulários e scraping; troque para o chrome-profile só quando você precisa de uma sessão logada de verdade, considere o Chrome DevTools MCP quando precisa medir performance, e se você só precisa de depuração/verificação ao vivo enquanto programa, sem headless/CI, o --chrome é o atalho mais rápido — nada para instalar além da extensão. Para entender a camada de protocolo por baixo, continue lendo sobre o que é o MCP; para construir suas próprias ferramentas para o Claude Code, veja como criar um servidor MCP para o Claude Code.