Como o Magnitude Automatiza o Navegador Através de Visão em Vez de Seletores Frágeis

Qualquer pessoa que já escreveu testes end-to-end ou parsers com Playwright e Selenium conhece essa dor. Os desenvolvedores frontend atualizaram o build, o Tailwind regenerou as classes, o layout deslocou dez pixels para o lado, e metade dos cenários crasham com um erro ElementNotFound. Mesmo que você coloque um modelo de linguagem padrão por cima, ele rapidamente tropeça na árvore DOM inchada de aplicações SPA modernas ou em um canvas que não tem nenhum nó de marcação.

Os criadores do projeto open-source Magnitude decidiram abordar isso de um ângulo diferente. Em vez de alimentar LLMs com megabytes de HTML bruto ou desenhar marcadores com números sobre os botões, eles construíram a ferramenta em torno de visão computacional direta.

Por Que Seletores e Marcadores Sobrepostos Já Não Funcionam

A maioria dos agentes modernos de IA para navegadores trabalha usando a abordagem Set-of-Marks. O script encontra todos os elementos interativos na página, desenha caixas coloridas brilhantes com números ao redor deles, tira uma captura de tela e pede ao modelo para escolher o número do botão desejado.

Em páginas de destino simples, esse truque funciona. Mas tente abrir um painel de administração complexo, um mapa interativo ou um editor como o Figma. Primeiro, o script de marcação começa a travar. Segundo, os elementos frequentemente se sobrepõem uns aos outros, os números invadem o texto e os menus suspensos fecham no momento em que o DOM auxiliar é injetado.

O Magnitude usa LLMs com base visual. A rede neural olha para uma captura de tela limpa da página da mesma forma que uma pessoa faz, e imediatamente produz coordenadas de pixels precisas para clicar. Isso elimina a necessidade de lidar com a estrutura da página e entrega uma taxa de sucesso de 94% no benchmark WebVoyager.

Como o Código do Agente Funciona

Em código, o Magnitude parece uma biblioteca TypeScript assíncrona padrão. Você pode emitir comandos de alto nível em linguagem natural, ou especificar explicitamente ações de baixo nível.

Aqui está um exemplo básico de trabalho com tarefas de board:

import { agent } from 'magnitude';
import { z } from 'zod';

// Агент сам найдет нужные поля и заполнит форму
await agent.act('Create a task', {
    data: {
        title: 'Use Magnitude',
        description: 'Run "npx create-magnitude-app" and follow the instructions',
    },
});

// Низкоуровневое действие с пониманием контекста интерфейса
await agent.act('Drag "Use Magnitude" to the top of the in progress column');

Elogios separados vão para a funcionalidade de parsing de dados. Frequentemente você não precisa apenas clicar em um botão, mas extrair informações estruturadas da página. O Magnitude inclui um método extract que aceita um schema de validação Zod.

// Извлечение данных прямо по схеме с дополнительным анализом
const tasks = await agent.extract(
    'List in progress tasks',
    z.array(z.object({
        title: z.string(),
        description: z.string(),
        difficulty: z.number().describe('Rate the difficulty between 1-5')
    })),
);

Observe o campo difficulty. O agente não apenas puxa texto bruto da marcação, mas também pode avaliar a complexidade da tarefa em tempo real usando uma escala, se você solicitar isso através da descrição do campo.

Test Runner Embutido

Além da automação flexível, os autores criaram um runner pronto para testes de aplicações web. Você pode instalá-lo em um repositório existente:

npm i --save-dev magnitude-test
npx magnitude init

O comando cria uma pasta tests/magnitude com uma configuração e um exemplo de teste. Ao contrário de testes padrão, aqui as assertions são construídas em verificações visuais. Você escreve um cenário em linguagem simples, o agente percorre os passos e verifica se a interface responde corretamente.

Se você precisa de um projeto limpo para automação do zero, pode subir o ambiente ainda mais rápido:

npx create-magnitude-app

Requisitos de Modelos e Nuances Ocultas

O principal trade-off dessa abordagem são os recursos computacionais e os custos de API. Modelos abertos pequenos não vão atingir as coordenadas certas de forma confiável.

Os desenvolvedores recomendam usar o Claude Sonnet 4, que atualmente lida com orientação espacial em imagens melhor do que qualquer outra coisa. Se você precisa de uma opção open-weight para deployment local ou ambiente privado, o Qwen-2.5VL com 72 bilhões de parâmetros é suportado. Mas rodar esse modelo localmente vai exigir hardware sério com múltiplas placas de vídeo de alto desempenho.

A segunda coisa a ter em mente: velocidade. Cada passo do agente requer enviar uma captura de tela para o modelo e esperar uma resposta. Isso leva alguns segundos por ação, então a ferramenta não vai funcionar para load testing. Atualmente, os autores estão trabalhando em um sistema nativo de cache de ações para que cenários repetitivos executem deterministicamente sem requisições constantes ao LLM.

Para Quais Tarefas o Projeto Já é Útil

1. Automatizar serviços sem API aberta. Se você precisa exportar relatórios de um painel bancário fechado ou um sistema CRM de terceiros onde a API é paga ou inexistente.
2. Testes end-to-end de UIs complexas. Quando um projeto tem muito drag-and-drop, iframes aninhados ou componentes de canvas cujo suporte a seletores vira um pesadelo.
3. Coleta inteligente de dados. Parsing de catálogos com layouts complexos, rolagem infinita e carregamento dinâmico de conteúdo.

O Magnitude ganha pontos por não tentar ser um "botão mágico" universal, mas sim dar aos desenvolvedores uma API TypeScript limpa com validação de tipos e controle sobre cada passo. Definitivamente vale a pena experimentar se você está cansado de corrigir testes falhando após cada redesign.