# Testes no navegador com agente de IA: ele confere o app

URL: https://agentvera.dev/pt/blog/ai-agent-browser-testing/ · Publicado: 2026-10-24

Testes no navegador com agente de IA via Playwright MCP: o agente de código abre o seu app web em um navegador real, clica, lê o console e corrige o que quebrar.

**Resumo:**

- Com o Playwright MCP, um agente de código consegue abrir páginas, clicar, digitar, tirar screenshots e ler mensagens do console, então ele confere a própria mudança em um navegador real.
- Você pode adicionar o Playwright MCP ao Claude Code ou ao Codex na mão; o AgentVera inicia um Chrome isolado para ele e deixa você acompanhar as abas ao vivo.
- O navegador do AgentVera usa um perfil próprio, nunca os seus cookies ou senhas pessoais, e os erros do console voltam para um agente com um clique.

**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:

1. O agente muda o código.
2. Ele abre a página, clica pelo fluxo e tira um screenshot.
3. Ele lê as mensagens do console.
4. 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:

```bash
claude mcp add playwright npx @playwright/mcp@latest
```

Para o Codex, adicione-o ao `~/.codex/config.toml`:

```toml
[mcp_servers.playwright]
command = "npx"
args = ["@playwright/mcp@latest"]
```

Depois inicie o seu servidor de desenvolvimento e peça algo concreto ao agente:

```text
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](/pt/blog/what-is-mcp-server/).

## O navegador do AgentVera

O [AgentVera](/pt/) é 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](/pt/features/send-to-agent/).

### 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:

1. Crie o agente com **AgentVera browser** ativado, de preferência na própria git worktree.
2. 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.”
3. 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.
4. Se o console mostrar erros, aperte **Fix errors**.
5. 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.
6. 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](/pt/blog/build-website-with-ai/) mostra o fluxo completo, e [como fazer vibe coding](/pt/blog/how-to-vibe-code/) cobre os hábitos que mantêm tudo nos trilhos.

[Baixe o AgentVera](/pt/download/) para dar aos seus agentes um navegador que você consegue acompanhar, ou leia mais na página do [navegador para agentes](/pt/features/agent-browser/).

## Perguntas frequentes

**Como um agente de IA usa um navegador?** Por meio de um servidor MCP como o Playwright MCP. O servidor expõe ações do navegador como ferramentas, por exemplo navegar, clicar, digitar, tirar um screenshot e ler mensagens do console, e o agente as chama como qualquer outra ferramenta.

**É o mesmo que escrever testes com Playwright?** Não. Com o Playwright MCP, o agente controla o navegador ao vivo, do jeito que você conferiria uma mudança na mão. Isso é bom para explorar e verificar. Para checagens que rodam a cada commit, peça ao agente para transformar o que ele encontrou em arquivos de teste Playwright comuns.

**O navegador do AgentVera vê os meus dados pessoais do Chrome?** Não. O AgentVera roda um Chrome separado com um perfil próprio. O seu perfil pessoal do Chrome, os cookies e as senhas nunca chegam até ele.

**Quais agentes podem usar o navegador do AgentVera?** Agentes que aceitam servidores MCP, o que inclui Claude Code, Codex, Gemini CLI, Copilot e a maioria das outras CLIs suportadas. O Aider não aceita MCP. Agentes remotos via SSH não recebem essa opção.

**De qual navegador o AgentVera precisa?** Um Chrome, Edge, Brave ou Chromium instalado. O AgentVera o inicia com um perfil próprio e conecta o Playwright MCP a ele, então você não instala um navegador separado para o agente.

---

**Sobre o AgentVera.** AgentVera é um app desktop para macOS, Windows e Linux, desenvolvido pela Solviera Teknoloji. Ele roda 18 agentes de programação com IA (Claude Code, Codex, Gemini CLI, Copilot, Cursor, Antigravity, opencode, Hermes, Qwen Code, Kimi Code, Kiro, Amp, Droid, Goose, Vibe, Crush, Aider, Cline) lado a lado, por projeto, em terminais reais com as instalações e logins de CLI do próprio usuário. O plano gratuito tem agentes ilimitados. Baixar: https://agentvera.dev/pt/download/ · Preços: https://agentvera.dev/pt/pricing/