Blog

Como Usar Claude Code para Automação de Navegador?

Ashley Innocent

Ashley Innocent

22 janeiro 2026

Como Usar Claude Code para Automação de Navegador?

A automação de navegador tem tradicionalmente exigido a escrita de scripts complexos, gerenciamento de seletores e tratamento de estados de página imprevisíveis. Claude Code transforma esse processo, permitindo que você descreva o que deseja em linguagem natural e fazendo com que a IA o traduza em ações precisas no navegador.

O que torna a automação de navegador do Claude Code poderosa:

💡
Testando APIs junto com fluxos de trabalho do navegador? Apidog complementa a automação de navegador do Claude Code, fornecendo testes visuais de API e mock servers. Quando seus testes de navegador acionam chamadas de API, o Apidog ajuda você a validar todo o ciclo de solicitação-resposta. Experimente o Apidog gratuitamente para construir fluxos de trabalho de testes ponta a ponta abrangentes.
button

Este guia aborda tudo, desde a configuração básica até padrões avançados de automação usando servidores MCP (Model Context Protocol).

Compreendendo as Opções de Automação de Navegador

Claude Code oferece várias abordagens para a automação de navegador, cada uma adequada a diferentes casos de uso.

Opção 1: Playwright MCP (Recomendado)

O Playwright MCP da Microsoft é a abordagem recomendada para automação de navegador com Claude Code. Ele oferece:

Opção 2: Puppeteer MCP (Comunidade)

Embora o pacote oficial do Puppeteer MCP tenha sido descontinuado, existem alternativas mantidas pela comunidade:

Opção 3: Claude Computer Use API

Para controle total da área de trabalho, além dos navegadores:

Tabela Comparativa

RecursoPlaywright MCPPuppeteer MCPComputer Use API
Suporte a NavegadoresChromium, Firefox, WebKitSomente ChromiumQualquer navegador
ManutençãoMicrosoft (oficial)ComunidadeAnthropic
Segmentação de ElementosÁrvore de acessibilidadeSeletores CSSVisual/coordenadas
Modo HeadlessSimSimNão (requer exibição)
Melhor paraTestes web, web scrapingProjetos legadosAutomação de desktop

Configurando o Playwright MCP

Playwright MCP é a maneira recomendada de adicionar automação de navegador ao Claude Code. Veja como configurá-lo.

Pré-requisitos

Passo 1: Configurar o Servidor MCP

Adicione Playwright MCP à sua configuração do Claude Code. Crie ou edite .claude/settings.json:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"],
      "env": {
        "PLAYWRIGHT_BROWSERS_PATH": "0"
      }
    }
  }
}

Passo 2: Verificar a Instalação

Inicie o Claude Code e verifique se o servidor MCP está em execução:

claude

Você deve ver o Playwright MCP listado nas ferramentas disponíveis. Teste com um comando simples:

Navegue até https://example.com e me diga o título da página

Passo 3: Configurar Opções do Navegador

Para mais controle, personalize as configurações do servidor MCP:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--browser", "chromium",
        "--headless"
      ],
      "env": {
        "PLAYWRIGHT_BROWSERS_PATH": "0"
      }
    }
  }
}

Opções disponíveis:

Passo 4: Executando em CI/CD

Para pipelines automatizados, use o modo headless:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--headless",
        "--browser", "chromium"
      ]
    }
  }
}

Alternativa: Puppeteer MCP

Se você preferir Puppeteer ou tiver fluxos de trabalho existentes baseados em Puppeteer, pode usar servidores MCP mantidos pela comunidade.

Instalação

Use o servidor Puppeteer MCP da comunidade:

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "puppeteer-mcp-server"]
    }
  }
}

Alternativa: puppeteer-mcp-claude

Outra opção da comunidade com automação abrangente de navegador:

# Clone o repositório
git clone https://github.com/jaenster/puppeteer-mcp-claude.git
cd puppeteer-mcp-claude
npm install

Configure em .claude/settings.json:

{
  "mcpServers": {
    "puppeteer": {
      "command": "node",
      "args": ["/path/to/puppeteer-mcp-claude/index.js"]
    }
  }
}

Principais Diferenças do Playwright

AspectoPlaywright MCPPuppeteer MCP
Configuraçãonpx (sem instalação)Pode requerer npm install
NavegadoresMúltiplosChrome/Chromium
Estratégia de SeleçãoÁrvore de acessibilidadeCSS/XPath
ManutençãoMicrosoftComunidade

Comandos Básicos de Automação de Navegador

Uma vez que seu servidor MCP esteja configurado, você pode controlar navegadores usando linguagem natural.

Navegue até https://github.com

Vá para a página de login em github.com

Abra https://docs.example.com/api em uma nova aba

Interagindo com Elementos

Clique no botão "Entrar"

Digite "meu-nome-de-usuário" no campo de e-mail

Selecione "United States" no menu suspenso de país

Marque a caixa de seleção "Lembrar de mim"

Lendo Conteúdo da Página

Obtenha o conteúdo de texto do título principal

Liste todos os links da página atual

Extraia os preços dos produtos desta página

Tirando Capturas de Tela

Tire uma captura de tela da página atual

Capture uma captura de tela apenas do menu de navegação

Esperas e Temporização

Espere o spinner de carregamento desaparecer

Espere 3 segundos e então clique no botão de envio

Espere até que a mensagem "Sucesso" apareça

Manipulação de Formulários

Preencha o formulário de contato:
- Nome: John Doe
- E-mail: john@example.com
- Mensagem: Testando automação
Em seguida, envie o formulário

Interações Complexas

Role a página até o rodapé e clique no link "Política de Privacidade"

Passe o mouse sobre o menu "Produtos" e clique em "Enterprise"

Arraste o controle deslizante para a posição de 75%

Padrões de Automação Avançados

Padrão 1: Fluxos de Trabalho Multi-Etapas

Crie sequências de automação complexas:

Automatize o seguinte fluxo de checkout:
1. Navegue até https://shop.example.com
2. Pesquise por "fones de ouvido sem fio"
3. Clique no primeiro resultado de produto
4. Selecione o tamanho "Médio" se disponível
5. Clique em "Adicionar ao Carrinho"
6. Vá para o carrinho e verifique se o item está lá
7. Tire uma captura de tela do carrinho

Padrão 2: Extração de Dados

Extraia dados estruturados de páginas web:

Vá para https://news.ycombinator.com e extraia as 10 principais histórias com:
- Título
- URL
- Pontos
- Número de comentários
- Tempo desde a publicação

Formate como JSON

Padrão 3: Fluxos de Autenticação

Lide com sequências de login:

Faça login no aplicativo:
1. Navegue até https://app.example.com/login
2. Digite o nome de usuário: test@example.com
3. Digite a senha da variável de ambiente LOGIN_PASSWORD
4. Clique em Entrar
5. Espere o painel carregar
6. Verifique se o login foi bem-sucedido procurando pelo texto "Bem-vindo"

Padrão 4: Teste de Regressão Visual

Compare estados de página:

1. Navegue até https://staging.example.com
2. Tire uma captura de tela de página inteira chamada "staging-homepage"
3. Navegue até https://production.example.com
4. Tire uma captura de tela de página inteira chamada "production-homepage"
5. Compare as duas capturas de tela e relate quaisquer diferenças

Padrão 5: Monitoramento e Alertas

Crie fluxos de trabalho de monitoramento:

Verifique se o serviço está saudável:
1. Navegue até https://status.example.com
2. Procure pelo texto "Todos os Sistemas Operacionais"
3. Se não for encontrado, extraia a mensagem de status atual
4. Tire uma captura de tela para documentação
5. Relate as descobertas

Padrão 6: Teste E2E com Validação de API

Combine testes de navegador e API:

Teste o fluxo de registro de usuário:
1. Navegue até https://app.example.com/register
2. Preencha o formulário de registro com dados de teste
3. Envie o formulário
4. Espere pela página de confirmação
5. Verifique se o usuário foi criado, checando a resposta da API
6. Tire uma captura de tela da página de sucesso

Ao testar fluxos que envolvem APIs, use Apidog para validar as respostas do backend. Você pode verificar se suas ações no navegador acionam as chamadas de API corretas e recebem as respostas esperadas.

Casos de Uso do Mundo Real

Caso de Uso 1: Capturas de Tela Automatizadas para Revisão de Código

Capture documentação visual para revisões de código:

Para a revisão do PR, capture capturas de tela de:
1. A página de login antes das mudanças
2. A página de login depois das mudanças
3. O estado de erro quando credenciais inválidas são inseridas
4. O redirecionamento de sucesso após um login válido

Salve todas as capturas de tela em ./review-screenshots/

Caso de Uso 2: Análise Competitiva

Monitore sites de concorrentes:

Analise os preços dos concorrentes:
1. Navegue até https://competitor.com/pricing
2. Extraia todos os nomes de planos e preços
3. Tire uma captura de tela da página de preços
4. Compare com nossos dados de preços atuais
5. Gere um relatório resumido

Caso de Uso 3: Teste Automatizado de Formulários

Teste a validação de formulários em vários cenários:

Teste a validação do formulário de contato:

Teste 1: Envio vazio
- Envie o formulário vazio
- Verifique se todos os erros de campos obrigatórios aparecem
- Captura de tela: empty-form-errors.png

Teste 2: E-mail inválido
- Digite "John" no nome
- Digite "invalid-email" no e-mail
- Envie
- Verifique o erro de validação de e-mail
- Captura de tela: invalid-email-error.png

Teste 3: Envio válido
- Preencha todos os campos corretamente
- Envie
- Verifique a mensagem de sucesso
- Captura de tela: form-success.png

Caso de Uso 4: Auditoria de SEO

Automatize verificações de SEO:

Execute uma auditoria de SEO em https://mysite.com:
1. Verifique o comprimento do título da página (deve ser de 50-60 caracteres)
2. Verifique se a meta descrição existe e seu comprimento
3. Verifique se a tag H1 existe e é única
4. Verifique se todas as imagens têm texto alternativo
5. Verifique se a URL canônica está definida
6. Verifique se há links quebrados na página
7. Gere um relatório de auditoria

Caso de Uso 5: Teste de Acessibilidade

Automatize verificações de acessibilidade:

Execute auditoria de acessibilidade em https://app.example.com:
1. Navegue até a página inicial
2. Verifique as proporções de contraste de cor
3. Verifique se todos os elementos interativos são acessíveis por teclado
4. Verifique se os rótulos ARIA estão presentes
5. Verifique se os indicadores de foco estão visíveis
6. Teste com simulação de leitor de tela
7. Gere um relatório de acessibilidade

Caso de Uso 6: Monitoramento de Desempenho

Acompanhe o desempenho da página:

Monitore o desempenho de carregamento da página:
1. Limpe o cache do navegador
2. Navegue até https://app.example.com
3. Registre o tempo até a primeira renderização de conteúdo (First Contentful Paint)
4. Registre o tempo até interatividade
5. Capture o waterfall de rede
6. Tire uma captura de tela quando totalmente carregado
7. Compare com as métricas de base

Integrando com Pipelines CI/CD

Integração com GitHub Actions

Adicione automação de navegador ao seu pipeline de CI:

# .github/workflows/e2e-tests.yml
name: E2E Browser Tests

on:
  pull_request:
    branches: [main, develop]

jobs:
  browser-tests:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install Playwright Browsers
        run: npx playwright install --with-deps chromium

      - name: Install Claude Code
        run: npm install -g @anthropic-ai/claude-code

      - name: Run Browser Tests
        env:
          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }}
        run: |
          claude --mcp playwright "
            Run the following browser tests:
            1. Navigate to ${{ env.STAGING_URL }}
            2. Test login flow with test credentials
            3. Verify dashboard loads correctly
            4. Take screenshots of each step
            5. Report any failures
          "

      - name: Upload Screenshots
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: browser-test-screenshots
          path: screenshots/

Criando uma Habilidade de Teste de Navegador

Crie uma habilidade reutilizável para teste de navegador:

---
name: browser-test-runner
version: "1.0.0"
description: Executa testes E2E baseados em navegador usando Playwright MCP
user-invocable: true
allowed-tools:
  - Bash
  - Read
  - Write
  - mcp_playwright
---

# Executor de Testes de Navegador

Habilidade de teste de navegador automatizado usando Playwright MCP.

## Uso

```bash
/browser-test-runner --url https://app.example.com --suite smoke
/browser-test-runner --url https://staging.example.com --suite full

API de Uso do Computador do Claude

Para cenários que exigem controle total da área de trabalho, a API de Uso do Computador do Claude oferece amplas capacidades de automação.

Visão Geral

O Uso do Computador é um recurso beta que permite ao Claude:

Configuração Básica

import anthropic

client = anthropic.Anthropic()

response = client.messages.create(
    model="claude-sonnet-4-20250514",
    max_tokens=1024,
    tools=[
        {
            "type": "computer_20250124",
            "name": "computer",
            "display_width_px": 1920,
            "display_height_px": 1080,
            "display_number": 1
        }
    ],
    messages=[
        {
            "role": "user",
            "content": "Open Chrome and navigate to github.com"
        }
    ],
    betas=["computer-use-2025-01-24"]
)

Quando Usar a API de Uso do Computador vs MCP

CenárioAbordagem Recomendada
Web scrapingPlaywright MCP
Teste E2EPlaywright MCP
Automação de aplicativos de desktopComputer Use API
Fluxos de trabalho multiaplicativosComputer Use API
Pipelines CI/CDPlaywright MCP (headless)
Teste visualQualquer um

Melhores Práticas para Uso do Computador

  1. Sempre verifique as ações antes de clicar
  2. Use coordenadas específicas sempre que possível
  3. Adicione atrasos entre ações rápidas
  4. Implemente recuperação de erros para cliques perdidos
  5. Limite o escopo às permissões necessárias

Considerações de Segurança

Tratamento de Autenticação

Faça:

Não faça:

# Use variáveis de ambiente
export TEST_USERNAME="test@example.com"
export TEST_PASSWORD="senha-de-teste-segura"

Faça login usando as credenciais das variáveis de ambiente
TEST_USERNAME e TEST_PASSWORD

Privacidade de Dados

Faça:

Não faça:

Segurança de Rede

Faça:

Não faça:

Segurança do Servidor MCP

  1. Execute localmente sempre que possível
  2. Audite o código do servidor MCP antes de usar
  3. Limite as permissões da ferramenta ao mínimo necessário
  4. Monitore os logs do servidor MCP para anomalias

Conclusão

A automação de navegador com Claude Code transforma a forma como os desenvolvedores abordam testes web, web scraping e automação. Ao combinar instruções em linguagem natural com poderosos servidores MCP como Playwright, você pode construir fluxos de trabalho de automação sofisticados sem escrever scripts complexos.

Para testes abrangentes, combine a automação de navegador do Claude Code com a validação de API. Baixe o Apidog gratuitamente para construir fluxos de trabalho de teste completos que cobrem tanto o seu frontend quanto o seu backend.

button

Pratique o design de API no Apidog

Descubra uma forma mais fácil de construir e usar APIs

Cadastre-se gratuitamenteBaixar