Por que seus Web Scrapers continuam quebrando (e como construir agentes TypeScript auto-reparadores usando LLMs e Playwright)

Se você já manteve um pipeline de web scraping em produção ou um assistente automatizado de preenchimento de formulários, você conhece a sensação de angústia ao verificar seus logs em uma segunda-feira de manhã e ver uma parede de erros. Um engenheiro de front-end mudou um atributo de classe de btn-primary para btn-action-primary, uma estrutura de teste A/B alterou a hierarquia da árvore DOM, ou uma atualização menor de um componente React randomizou seus seletores CSS.

Em um instante, seu script de automação se despedaça. O seletor falha ao resolver, uma exceção de tempo de execução é lançada, e todo o seu pipeline de dados para.

Arquiteturas de automação tradicionais—construídas com seletores CSS rígidos, expressões XPath ou cliques baseados em coordenadas rígidas—tratam a web como uma máquina de estados determinística. Mas a web moderna é tudo, menos determinística. Ela é fluida, dinâmica e constantemente mutante.

Para superar essa fragilidade estrutural, sistemas agentes modernos requerem uma mudança de paradigma. Ao fundir a ancoragem visual de Modelos de Linguagem Grande (LLM), a padronização de ferramentas do Protocolo de Contexto de Modelo (MCP) e a aceleração de hardware localizada via WebGPU Compute Shaders, podemos construir agentes TypeScript que possuem resiliência semântica. Quando uma mutação do DOM quebra um seletor, o agente não falha. Ele captura uma instantânea visual, processa o layout espacial via análise multimodal e se auto-repara dinamicamente em seu caminho de execução.

Vamos mergulhar fundo na arquitetura de scrapers web auto-reparadores e construir um assistente de preenchimento de formulários em TypeScript de nível de produção que ri na cara de seletores quebrados.

A Evolução Arquitetônica: De Monólitos a Microserviços Agentes

Para realmente entender como os agentes web auto-reparadores operam, ajuda olhar para uma evolução arquitetônica paralela em sistemas de backend: a transição de aplicações monolíticas para microserviços gerenciados por Gateways de API inteligentes.

Imagine uma aplicação web monolítica legada onde cada módulo interno referencia diretamente os endereços de memória exatos e as assinaturas de método interno de outros módulos. Se o módulo A atualiza a assinatura de sua função de autenticação de usuário, cada módulo dependente deve ser refatorado e recompilado manualmente ao mesmo tempo. Este é o equivalente arquitetônico exato de um scraper web tradicional codificado para seletores CSS específicos. O scraper está monoliticamente acoplado aos detalhes de implementação do DOM de um site-alvo específico.

Agora, contraste isso com uma arquitetura moderna de microserviços mediada por um Gateway de API que utiliza descoberta de serviços e negociação de esquemas. Quando um microserviço upstream muda seu roteamento interno ou formato de serialização de dados, o Gateway de API intercepta a solicitação, avalia o contrato dinâmico, usa camadas de transformação semântica para roteamento de intenção e adapta a carga útil em tempo real sem quebrar os consumidores downstream.

No reino da automação de navegadores, o Protocolo de Contexto de Modelo (MCP) atua como esse Gateway de API inteligente. O agente autônomo não interage com o DOM via ponteiros de memória codificados ou seletores frágeis. Em vez disso, ele se comunica via contratos de ferramentas padronizados. Quando a UI se muta, a camada de percepção orientada à visão do agente atua como o adaptador de esquema dinâmico, traduzindo a nova realidade visual e estrutural da página web em intenções semânticas acionáveis. Assim como uma arquitetura de microserviços resiliente isola mudanças de backend de aplicações cliente, um agente de visão alimentado por MCP isola mudanças estruturais da web de sua lógica de extração central.

Aceleração do Lado do Cliente: WebGPU e Compute Shaders

À medida que os agentes se tornam mais autônomos, a frequência de idas e vindas para APIs LLM remotas para cada pequeno ajuste no DOM introduz severos gargalos de latência. Para alcançar uma automação de navegador em tempo real e fluida, arquiteturas modernas em TypeScript aproveitam a aceleração de hardware nativa do navegador via WebGPU.

WebGPU fornece acesso de alto desempenho e baixa sobrecarga à GPU do cliente, contornando os gargalos de CPU inerentes a implementações mais antigas do WebGL. Para scrapers auto-reparadores, o WebGPU serve como a camada de execução para geração de embedding do lado do cliente e inferência leve de modelos de visão-linguagem. Utilizando um Compute Shader do WebGPU, o navegador pode executar operações tensorais massivamente paralelizadas diretamente no hardware local.

Quando um assistente de preenchimento de formulários precisa avaliar se um novo campo de entrada encontrado corresponde a um "Endereço de Cobrança Linha 1", ele pode projetar o contexto DOM circundante e recortar visualmente em um espaço vetorial localmente. Ao empregar modelos otimizados para busca de similaridade de baixa latência, o agente calcula similaridades coseno em relação a um registro de esquema conhecido em milissegundos. Esse loop de execução local garante que a recuperação semântica aconteça em velocidades interativas, protegendo seu pipeline de automação de latências de rede e limites de taxa de API em nuvem.

Estendendo RAG: De PDFs Estáticos a Interfaces de Usuário Vivas

Em padrões arquitetônicos anteriores, a Geração Aumentada por Recuperação (RAG) estabeleceu como documentos não estruturados são divididos, incorporados em espaços vetoriais de alta dimensão, armazenados em bancos de dados vetoriais e recuperados via métricas de similaridade para fundamentar respostas de LLM em contexto factual.

Podemos estender esse modelo fundamental exato de pedaços de documentos estáticos para Interfaces de Usuário dinâmicas e vivas.

Em um pipeline RAG padrão, o corpus consiste em arquivos de texto ou PDFs. Em um scraper web auto-reparador, o corpus é a própria página web—uma representação dual consistindo da árvore DOM (texto estrutural) e da viewport renderizada (pixels visuais).

1. Dividindo a UI: Em vez de dividir o texto por parágrafos, o agente analisa o DOM em unidades atômicas interativas (botões, entradas, rótulos, contêineres) e captura suas caixas delimitadoras.
2. Incorporando o Estado: Cada elemento interativo é enriquecido com seu papel semântico, atributos de acessibilidade (rótulos ARIA), contexto textual circundante e recorte visual. Esses elementos são incorporados em um espaço vetorial compartilhado.
3. Interação Baseada em Recuperação: Quando um seletor tradicional falha, o agente não lança um erro. Ele consulta seu espaço vetorial interno usando a intenção do elemento ausente (por exemplo, "Enviar Pagamento") contra os novos elementos DOM mutados. O banco de dados vetorial retorna o candidato com a maior pontuação com base na proximidade semântica e visual, permitindo que o agente execute a ação sem problemas.

Os humanos não navegam em sites lendo o código-fonte HTML bruto ou contando índices de filhos do DOM. Um usuário humano olha para a viewport renderizada, identifica as affordances visuais (um botão retangular azul com texto branco dizendo "Finalizar Compra") e age com base nesse reconhecimento visual. Scrapers auto-reparadores restauram esse paradigma centrado no humano através de loops de percepção multimodal.

Construindo um Assistente de Preenchimento de Formulários Resiliente em TypeScript

Vamos olhar para uma implementação prática, de ponta a ponta, de um assistente de preenchimento de formulários resiliente usando TypeScript, Playwright e o SDK Google GenAI. Este padrão é comumente usado em contextos de SaaS empresarial para onboarding automatizado de usuários, inteligência de preços competitivos ou verificação de checkout em múltiplas etapas.

Abaixo está uma implementação completa e executável em TypeScript que simula tirar uma captura de tela de uma página web dinâmica, passando esse contexto visual junto com um estado de fallback do DOM para um LLM usando Promptagem de Poucos Exemplos, analisando as coordenadas estruturadas ou seletores CSS retornados, e executando uma ação de clique auto-reparadora via um wrapper de navegador sem cabeça.

import { chromium, Page } from '<