Agentes de Automação Web: Controle do Navegador com Claude e Computer Use

Sua empresa precisa de dados de um portal de fornecedores que não tem API. É uma aplicação web com conteúdo dinâmico, formulários de múltiplas etapas e um layout que muda a cada poucos meses. Seu script Selenium quebra toda vez que atualizam o CSS. Você o mantém como código legado — frágil, caro e ninguém quer mexer.

Um agente baseado em visão não se importa com seletores CSS. Ele vê a página, encontra o botão “Pesquisar” visualmente, clica nele, lê a tabela de resultados e extrai os dados. Quando o layout muda, o agente se adapta porque está lendo a página como um humano — não analisando o DOM.

Este artigo ensina como construir agentes de automação web usando as capacidades de computer use do Claude. Você aprenderá os mecanismos fundamentais da automação visual, padrões confiáveis de navegação, técnicas de extração de dados, fluxos de preenchimento de formulários e estratégias de recuperação de erros. Ao final, você terá os padrões necessários para construir agentes que interagem com qualquer interface web — desde leituras simples de páginas até fluxos de trabalho complexos de múltiplas etapas.

Automação Visual vs. Tradicional

Antes de construir um agente baseado em visão, você precisa entender quando faz sentido — e quando não faz. Ferramentas tradicionais de automação como Selenium e Playwright não vão desaparecer. Elas são rápidas, determinísticas e bem compreendidas. A questão é onde cada abordagem se destaca e onde ela falha.

Automação Tradicional (Selenium/Playwright)

A automação tradicional de navegador funciona interagindo com o DOM. Você localiza elementos usando seletores CSS ou expressões XPath, depois executa ações neles programaticamente:

# Abordagem tradicional — rápida mas frágil
search_input = driver.find_element(By.CSS_SELECTOR, "#search-box-v3 > input.query")
search_input.send_keys("industrial bearings")
driver.find_element(By.CSS_SELECTOR, "button.search-submit-2024").click()

Isso é rápido. É determinístico. E quebra no momento em que alguém renomeia search-box-v3 para search-box-v4 ou reestrutura o layout do formulário. Você acaba mantendo um mapeamento de seletores que espelha a estrutura interna do site — uma estrutura que você não controla.

A automação tradicional também não consegue lidar com conteúdo exclusivamente visual. Se os dados que você precisa são renderizados em um elemento <canvas>, incorporados em uma imagem ou exibidos como PDF dentro do navegador, seletores DOM não conseguem alcançá-los.

Automação Baseada em Visão (Computer Use)

A automação baseada em visão funciona da mesma forma que um humano. O agente recebe uma captura de tela, identifica visualmente os elementos necessários e emite ações de mouse/teclado em coordenadas específicas:

# Abordagem baseada em visão — resiliente mas mais lenta
# O agente vê a página, encontra a caixa de pesquisa visualmente e digita nela
# Sem seletores necessários — adapta-se a mudanças de layout automaticamente

O trade-off: é mais lento (cada ação requer uma chamada de API com uma imagem), mais caro (tokens para capturas de tela) e não determinístico (o agente pode interpretar uma captura de tela de forma diferente entre execuções). Mas é resiliente a mudanças de layout, funciona em qualquer interface visual e pode entender o conteúdo da página semanticamente.

A Abordagem Híbrida

A estratégia mais prática combina ambas:

• Use automação tradicional para páginas estáveis e bem estruturadas onde você controla a interface ou ela raramente muda.
• Use automação baseada em visão para páginas dinâmicas, interfaces desconhecidas, conteúdo visual ou tarefas pontuais que não justificam manter scripts.
• Use visão como fallback — tente um seletor primeiro; se falhar, recorra à identificação visual.

Quando Escolher Visão

A automação baseada em visão é a escolha certa quando:

• Nenhuma API está disponível e a interface web é sua única opção
• O layout da página muda frequentemente e a manutenção de seletores é cara demais
• O conteúdo é visual — gráficos, imagens, elementos canvas, PDFs incorporados
• Fluxos de múltiplas etapas requerem contexto — entender o que está na tela para decidir a próxima ação
• Automações pontuais que não justificam o custo de engenharia de um script Selenium mantido
• Interfaces desconhecidas onde você pode descrever a tarefa em linguagem natural em vez de mapear seletores

Fundamentos do Claude Computer Use

A capacidade de computer use do Claude permite que o modelo interaja com a tela de um computador da mesma forma que um humano — observando capturas de tela e emitindo ações de mouse e teclado. Entender os mecanismos é essencial antes de construir agentes confiáveis.

Como Funciona

O loop de computer use é direto:

1. Capturar uma screenshot da tela atual (ou janela do navegador)
2. Enviar a screenshot para o Claude junto com uma descrição da tarefa
3. Receber uma chamada de ferramenta — o Claude informa qual ação executar (clicar, digitar, rolar)
4. Executar a ação no navegador
5. Capturar uma nova screenshot
6. Repetir até que a tarefa esteja concluída ou o agente sinalize que terminou

O Claude nunca controla diretamente o navegador. Seu código atua como intermediário — recebendo instruções do modelo e executando-as no ambiente real.

Definições de Ferramentas

O computer use depende de uma definição de ferramenta específica — computer_20241022 — que descreve as ações disponíveis:

computer_tool = {
    "type": "computer_20241022",
    "name": "computer",
    "display_width_px": 1280,
    "display_height_px": 800,
    "display_number": 1,
}

As ações disponíveis incluem:

• screenshot — Capturar o estado atual da tela
• mouse_move — Mover o cursor para coordenadas específicas
• left_click / right_click / double_click — Clicar na posição atual do cursor
• left_click_drag — Clicar e arrastar para uma posição alvo
• type — Digitar uma string de texto
• key — Pressionar uma tecla ou combinação de teclas específica (ex.: Return, ctrl+a)
• scroll — Rolar para cima ou para baixo na posição atual do cursor

O Loop de Ações

Aqui está uma implementação completa do loop principal de computer use:

import anthropic
import base64
import subprocess
import time

client = anthropic.Anthropic()

def capture_screenshot() -> str:
    """Capture screen and return base64-encoded PNG."""
    # Using scrot for X11; adapt for your environment
    subprocess.run(["scrot", "/tmp/screenshot.png"], check=True)
    with open("/tmp/screenshot.png", "rb") as f:
        return base64.standard_b64encode(f.read()).decode("utf-8")

def execute_action(action: dict):
    """Execute a computer use action using xdotool."""
    action_type = action.get("action")

    if action_type == "screenshot":
        return  # Screenshot will be taken in the main loop

    elif action_type == "mouse_move":
        x, y = action["coordinate"]
        subprocess.run(["xdotool", "mousemove", str(x), str(y)])

    elif action_type == "left_click":
        x, y = action["coordinate"]
        subprocess.run(["xdotool", "mousemove", str(x), str(y)])
        subprocess.run(["xdotool", "click", "1"])

    elif action_type == "type":
        text = action["text"]
        subprocess.run(["xdotool", "type", "--clearmodifiers", text])

    elif action_type == "key":
        key = action["key"]
        subprocess.run(["xdotool", "key", key])

    elif action_type == "scroll":
        x, y = action["coordinate"]
        direction = action["direction"]
        amount = action["amount"]
        subprocess.run(["xdotool", "mousemove", str(x), str(y)])
        button = "5" if direction == "down" else "4"
        for _ in range(amount):
            subprocess.run(["xdotool", "click", button])

    time.sleep(0.5)  # Brief pause after each action

def run_computer_use_agent(task: str, max_steps: int = 50):
    """Run a computer use agent loop."""
    messages = [{"role": "user", "content": task}]

    for step in range(max_steps):
        # Capture current screen state
        screenshot_b64 = capture_screenshot()

        # Add screenshot to the conversation
        if step > 0:
            messages.append({
                "role": "user",
                "content": [{
                    "type": "image",
                    "source": {
                        "type": "base64",
                        "media_type": "image/png",
                        "data": screenshot_b64,
                    },
                }],
            })

        # Call Claude with computer use tool
        response = client.messages.create(
            model="claude-sonnet-4-20250514",
            max_tokens=4096,
            tools=[computer_tool],
            messages=messages,
        )

        # Process response
        messages.append({"role": "assistant", "content": response.content})

        # Check if the agent is done
        if response.stop_reason == "end_turn":
            # Extract final text response
            for block in response.content:
                if hasattr(block, "text"):
                    return block.text
            return "Task completed."

        # Execute tool calls
        tool_results = []
        for block in response.content:
            if block.type == "tool_use":
                print(f"Step {step}: {block.input.get('action')} "
                      f"{block.input.get('coordinate', '')}")
                execute_action(block.input)
                tool_results.append({
                    "type": "tool_result",
                    "tool_use_id": block.id,
                    "content": "Action executed successfully.",
                })

        messages.append({"role": "user", "content": tool_results})

    return "Max steps reached."

Resolução e Sistema de Coordenadas

O Claude mapeia o conteúdo visual para coordenadas x,y em pixels com base nas dimensões da screenshot que você especifica na definição da ferramenta. Alguns detalhes críticos:

• Combine a resolução do seu display com display_width_px e display_height_px na definição da ferramenta. Incompatibilidades fazem os cliques acertarem nos lugares errados.
• Resoluções mais baixas são melhores. Uma screenshot de 1280×800 dá ao Claude detalhes suficientes para ler texto e identificar elementos de UI enquanto mantém os custos de tokens gerenciáveis. Não envie screenshots em 4K.
• As coordenadas são absolutas — (0, 0) é o canto superior esquerdo da tela.

Padrões Confiáveis de Navegação

Sites do mundo real são bagunçados. Páginas carregam assincronamente, popups aparecem de forma imprevisível e conteúdo dinâmico muda o layout durante a interação. Um agente de automação confiável precisa de padrões para lidar com tudo isso.

Aguardar o Carregamento

O erro mais comum na automação web — tradicional ou visual — é agir antes que a página esteja pronta. Não use chamadas fixas de time.sleep(). Em vez disso, verifique o estado da página visualmente:

def wait_for_page_load(
    client: anthropic.Anthropic,
    expected_content: str,
    max_retries: int = 5,
    delay: float = 2.0,
) -> bool:
    """Wait for a page to load by checking for expected visual content."""
    for attempt in range(max_retries):
        screenshot_b64 = capture_screenshot()

        response = client.messages.create(
            model="claude-sonnet-4-20250514",
            max_tokens=256,
            messages=[{
                "role": "user",
                "content": [
                    {
                        "type": "image",
                        "source": {
                            "type": "base64",
                            "media_type": "image/png",
                            "data": screenshot_b64,
                        },
                    },
                    {
                        "type": "text",
                        "text": (
                            f"Is this page fully loaded and showing: "
                            f"'{expected_content}'? "
                            f"Reply with only 'yes' or 'no'."
                        ),
                    },
                ],
            }],
        )

        answer = response.content[0].text.strip().lower()
        if "yes" in answer:
            return True

        print(f"Page not ready (attempt {attempt + 1}/{max_retries}). Waiting...")
        time.sleep(delay)

    return False

Tratamento de Popups

Banners de cookies, diálogos de notificação e widgets de chat são a maldição da automação web. Um agente baseado em visão lida com eles naturalmente:

def dismiss_popups(client: anthropic.Anthropic) -> bool:
    """Check for and dismiss any popup overlays."""
    screenshot_b64 = capture_screenshot()

    response = client.messages.create(
        model="claude-sonnet-4-20250514",
        max_tokens=

Artigos Relacionados

• Recuperação de Erros em Agentes: 5 Padrões para Confiabilidade em Produção
• Respostas de Agentes em Streaming: Saída em Tempo Real para Fluxos Multi-Etapas
• Padrões de Uso de Ferramentas: Interfaces Agente-Ferramenta Confiáveis
• Introdução ao Desenvolvimento Agêntico