Automação de Browser com MCP para Claude Code

Problema: Correr testes de regressão, fazer scraping de páginas e gerir fluxos de QA manualmente consome uma fatia enorme do teu dia. Um servidor MCP de browser entrega tudo isso ao Claude.

Vitória Rápida: Adiciona o servidor Puppeteer MCP à tua config do Claude Code e a primeira automação está pronta em minutos. Cola isto no teu ficheiro de settings:

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

Depois diz ao Claude: "Abre um browser, navega para example.com e tira um screenshot". O browser, a navegação e o screenshot acontecem sem mais nenhuma tecla da tua parte.

O trabalho com browsers à moda antiga significa configurar seletores, gerir estado e escrever cinquenta linhas de código para preencher um formulário. Um servidor MCP de browser muda isso. Descreves o resultado em palavras e o Claude conduz.

Em vez de escrever cinquenta linhas de Puppeteer, diz: "Preenche este formulário de contacto com dados de teste e submete." Esse é o script inteiro.

Instalação do Servidor Browser MCP

Configuração do Servidor Puppeteer MCP

A config do Puppeteer fica no teu ficheiro MCP. Usa ~/.claude.json na CLI ou claude_desktop_config.json para o Desktop:

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

Guarda, reinicia o Claude Code e o servidor fica registado. Para verificar, pede ao Claude para lançar um browser e abrir qualquer URL.

Configuração do Servidor Playwright MCP

O Playwright dá-te Chrome, Firefox e Safari num só pacote, que é o motivo pelo qual as equipas o escolhem para suites de testes a sério. Primeiro instala @modelcontextprotocol/server-playwright:

npm install -g @modelcontextprotocol/server-playwright

Depois regista-o na tua config MCP:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-playwright"]
    }
  }
}

Alternativa ao Playwright MCP: Uma versão da comunidade em @executeautomation/playwright-mcp-server oferece a mesma superfície básica:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@executeautomation/playwright-mcp-server"]
    }
  }
}

A cobertura multi-browser é o motivo pelo qual a maioria das suites de testes completas acaba no Playwright MCP para automação a sério com Claude Code.

O Que Podes Pedir

Web Scraping Simplificado

Pede dados extraídos em inglês simples. Um pedido como "Abre example.com, encontra todos os produtos e extrai os títulos e preços para um ficheiro CSV" executa o pipeline completo: lança o browser, encontra os elementos, extrai os dados e escreve o CSV.

Automação de Testes de Formulários

Experimenta este: "Abre o meu site de desenvolvimento local em localhost:3000, preenche o formulário de registo com dados de teste, submete e verifica se a mensagem de sucesso aparece". Uma frase substitui todo o ciclo de QA manual. O Claude visita o URL, inventa entradas plausíveis, preenche todos os campos e verifica o estado de sucesso.

Testes de Regressão Visual

Uma sessão de snapshots em três breakpoints soa assim: "Tira screenshots da minha homepage em diferentes tamanhos de ecrã (mobile, tablet, desktop) e guarda-as em ./screenshots/".

Fluxos de Utilizador com Múltiplos Passos

Fluxos maiores também funcionam. Tenta: "Simula um fluxo de compra de e-commerce completo: navega pelos produtos, adiciona ao carrinho, passa pelo checkout com dados de teste e verifica a página de confirmação do pedido".

Fluxos de Autenticação

Estados de login são uma linha: "Faz login no meu ambiente de staging, navega para o dashboard de administração e verifica se todos os links de navegação funcionam corretamente".

Monitorização de Performance

Pede também medições de tempo: "Abre a minha app, mede os tempos de carregamento de página para o dashboard e reporta quaisquer páginas que demorem mais de 3 segundos a carregar".

Resolução de Problemas na Automação de Browser

Browser não arranca: Chrome ou Chromium tem de existir no sistema. No Linux:

sudo apt-get install -y chromium-browser

Elementos não encontrados: Páginas dinâmicas precisam de uma espera. Pede ao Claude: "Espera que o botão de login seja visível antes de clicar."

Timeouts: Páginas lentas precisam de mais paciência. Diz: "Navega para a página e espera até 30 segundos para ela carregar completamente."

Integração no Teu Fluxo de Trabalho

A automação de browser encaixa diretamente no resto do teu ciclo de desenvolvimento:

• Testes: Corridas de regressão durante o build
• Debugging: Screenshots que provam o bug
• Monitorização: Polling silencioso de páginas de produção
• Desenvolvimento: Verificação de funcionalidades em todos os browsers

Otimização de Contexto com MCP Tool Search

Estes servidores combinam bem com o MCP Tool Search. O Tool Search só carrega as definições do Playwright ou Puppeteer quando o trabalho realmente precisa de um browser, deixando a janela de contexto livre para tudo o resto.

Começa pelos pedaços pequenos. Começa com um pedido de screenshot. Passa para um formulário. Depois vai construindo o teu caminho até fluxos completos de ponta a ponta à medida que o fluxo em linguagem natural começa a parecer natural.