Testes no navegador com agente de IA significam deixar um agente de código abrir o seu app web em um navegador real, clicar por ele e ler o console, para que ele confira a própria mudança em vez de adivinhar. A forma mais comum de dar um navegador a um agente é o Playwright MCP, um servidor MCP que transforma ações do navegador em ferramentas. Você pode adicioná-lo ao Claude Code ou ao Codex por conta própria, ou usar o AgentVera, que inicia um Chrome isolado para os seus agentes e deixa você acompanhar cada aba ao vivo.
Este guia cobre o que um agente consegue fazer em um navegador, a configuração manual, o navegador do AgentVera e um fluxo de trabalho para testar uma mudança de ponta a ponta.
Por que dar um navegador ao agente
Sem navegador, um agente que muda a sua interface só pode ler o código e torcer. Ele não vê que o botão está escondido atrás do cabeçalho, que o formulário dá erro ao enviar ou que um erro aparece no console ao carregar. Você acaba virando os olhos do agente: abre a página, descreve o problema, cola o erro.
Com um navegador, o ciclo se fecha:
- O agente muda o código.
- Ele abre a página, clica pelo fluxo e tira um screenshot.
- Ele lê as mensagens do console.
- Ele corrige o que encontrou e confere de novo.
Você ainda revisa o resultado, mas as quebras óbvias são pegas antes de você olhar.
O que o agente consegue fazer com o Playwright MCP
O Playwright MCP expõe o navegador como ferramentas. As mais comuns:
| Ferramenta | O que o agente faz com ela |
|---|---|
browser_navigate | Abre uma URL, como o seu servidor de desenvolvimento |
browser_snapshot | Lê a estrutura da página (a árvore de acessibilidade) para encontrar elementos |
browser_click | Clica em um botão, link ou campo |
browser_type | Digita em um campo de entrada |
browser_take_screenshot | Captura a aparência da página |
browser_console_messages | Lê logs e erros do console |
O snapshot é a parte principal. Em vez de adivinhar posições de pixels, o agente lê uma visão estruturada da página e clica nos elementos por referência, o que é muito mais confiável.
Configure o Playwright MCP na mão
Para o Claude Code, adicione o servidor a partir do seu projeto:
claude mcp add playwright npx @playwright/mcp@latestPara o Codex, adicione-o ao ~/.codex/config.toml:
[mcp_servers.playwright]
command = "npx"
args = ["@playwright/mcp@latest"]Depois inicie o seu servidor de desenvolvimento e peça algo concreto ao agente:
Open http://localhost:3000/signup, fill the form with a test email,
submit it, and tell me what happens. Check the console for errors.Isso funciona, mas você não vê o que o agente vê a menos que peça screenshots e, dependendo de como você inicia o servidor, o navegador pode compartilhar estado com aquele que você usa todo dia. Para o básico sobre o próprio MCP, veja o que é um servidor MCP.
O navegador do AgentVera
O AgentVera é um app desktop para macOS, Windows e Linux que roda CLIs de agentes de código lado a lado. Ele tem um navegador próprio para agentes, construído sobre o mesmo Playwright MCP.
Ative-o para um agente
Na caixa de diálogo do agente, o campo Browser tem três opções:
| Opção | O que faz |
|---|---|
| Off | O agente não usa navegador |
| AgentVera browser | Via Playwright MCP; você acompanha as abas ao vivo na página Browser do app |
| Claude in Chrome | Só Claude Code: o seu próprio Chrome com a extensão do Claude (--chrome) |
Escolha AgentVera browser e inicie o agente. O AgentVera roda um Chrome headless separado com um perfil próprio e conecta o Playwright MCP do agente a ele. Ele usa um Chrome, Edge, Brave ou Chromium já instalado na sua máquina. O seu perfil pessoal do Chrome, os cookies e as senhas nunca chegam a esse navegador.
A opção existe para agentes que aceitam servidores MCP: Claude Code, Codex, Gemini CLI, Copilot e a maioria das outras CLIs suportadas. Agentes remotos via SSH não a recebem.
Acompanhe as abas ao vivo e assuma o controle
A página Browser do app mostra as abas que o agente abre enquanto trabalha. É uma visão normal de navegador, não uma gravação: você pode clicar e digitar para assumir a qualquer momento, por exemplo para fazer login ou fechar um banner de cookies, e depois devolver ao agente.
A barra de ferramentas tem o que você espera: barra de endereço, voltar, avançar e recarregar, busca na página, zoom, favoritos e histórico, e Screenshot, que salva na sua pasta Downloads. O menu do botão direito tem Inspect para o DevTools, e você pode abrir o navegador em uma janela separada. A página também mostra o endpoint ao qual os agentes se conectam.
Envie os erros do console de volta a um agente
A página Browser tem um painel de console para cada aba. Dois atalhos fecham o ciclo sem copiar e colar:
- Fix errors envia os últimos erros do console para um agente com a instrução de corrigi-los.
- Cada linha tem Fix e Send to agent, para você escolher um erro específico.
É o mesmo fluxo de enviar para o agente que o resto do app usa; veja enviar para o agente.
Abra o seu servidor de desenvolvimento nele
Quando um agente inicia um servidor de desenvolvimento, a porta aparece na aba Ports do painel direito com Open in the AgentVera browser e Open in the system browser. Links que os agentes imprimem também abrem no navegador do app; segure ⌥ ao clicar para usar o navegador do sistema.
O navegador do AgentVera faz parte do plano gratuito.
Um fluxo de trabalho para testar uma mudança de ponta a ponta
Aqui está um setup que funciona bem para uma mudança de interface:
- Crie o agente com AgentVera browser ativado, de preferência na própria git worktree.
- Peça a mudança e a checagem juntas, por exemplo: “Adicione uma dica de força de senha ao formulário de cadastro. Depois abra a página de cadastro, teste uma senha fraca e uma forte, tire um screenshot de cada uma e confira o console.”
- Acompanhe a página Browser enquanto ele trabalha. Se ele travar em um login, assuma, faça o login e diga ao agente para continuar.
- Se o console mostrar erros, aperte Fix errors.
- Quando o fluxo funcionar, peça ao agente para registrá-lo como um arquivo de teste Playwright, para que a checagem rode no CI daqui em diante.
- Revise o diff e os screenshots antes de fazer o merge.
O passo 5 importa. Navegar via MCP é ótimo para encontrar e verificar problemas, mas não é uma suíte de testes. Um arquivo de teste comum é o que mantém o fluxo funcionando no mês que vem.
Prompts que funcionam bem
- “Abra a página, tire um snapshot e liste todos os botões que não fazem nada quando clicados.”
- “Redimensione para a largura de um celular, tire um screenshot e corrija tudo o que transbordar.”
- “Passe pelo checkout com o cartão de teste e depois relate cada erro de console e cada requisição com falha que você viu.”
Seja específico sobre a URL e sobre como é o sucesso. “Teste o app” dá espaço demais ao agente; “faça o cadastro e depois confirme que o dashboard mostra o nome do novo usuário” dá a ele um objetivo que ele consegue conferir.
O que ter em mente
- O agente pode clicar em qualquer coisa. Aponte-o para um ambiente local ou de staging, não para produção com dados reais.
- Logins. O navegador do AgentVera tem um perfil próprio, então você faz login nele uma vez. Use contas de teste.
- Screenshots custam contexto. Peça quando ajudarem, não a cada passo.
- Escolha a opção de navegador certa. O Claude in Chrome usa o seu Chrome real e as sessões dele; o navegador do AgentVera as mantém separadas.
Se você está construindo um site do zero com um agente, criar um site com IA mostra o fluxo completo, e como fazer vibe coding cobre os hábitos que mantêm tudo nos trilhos.
Baixe o AgentVera para dar aos seus agentes um navegador que você consegue acompanhar, ou leia mais na página do navegador para agentes.