v2.0
Docs › Início › Gravação da Automação

Gravação da Automação

Crie o fluxo sem desenhar nada: o Copilot abre o gravador, detecta automaticamente as suas ações no site e monta as etapas e mapeamentos por você.

📍No Menu, na opção Meus Agentes → Agent Builder → painel ✦ COPILOT. Requer o Runtime local conectado (status "Gravador disponível").
Nesta página

Como funciona

A Gravação da Automação funciona via Copilot: em vez de criar etapa por etapa, você pede para mapear um site, executa o processo manualmente uma vez no navegador do gravador, e o Copilot detecta automaticamente as ações (navegações, cliques e preenchimentos) e já cria o fluxo correspondente no Agent Builder, com as etapas e os mapeamentos de seletores prontos.

Iniciar o mapeamento

  1. No Agent Builder, abra o painel ✦ COPILOT e confirme o status "Runtime local conectado, Gravador disponível".
  2. Peça no chat: "mapear o site browsermate.io" (ou a URL do sistema que você quer automatizar).
  3. O Copilot propõe o cartão Iniciar gravador de tela, que abre o navegador no runtime local e captura cliques/preenchimentos na URL informada. Clique em Confirmar (ou Descartar para cancelar).
Copilot propondo iniciar o gravador de tela
"mapear o site browsermate.io": o Copilot propõe o gravador e aguarda a sua confirmação no cartão.
Nada roda sem confirmação Toda ação proposta pelo Copilot vem em um cartão com Confirmar / Descartar, e o gravador só abre depois do seu OK.
Por que precisa do Runtime local Durante a gravação, quem dirige a navegação é você: você clica, digita e passeia pelo site normalmente, como faria no seu dia a dia, e o gravador só observa e anota o que você fez. Para isso funcionar, o navegador precisa abrir numa máquina onde você consiga ver a tela e usar o mouse e o teclado de verdade, ou seja, a sua própria máquina (ou onde estiver instalado o Runtime que você usa). Por isso a gravação exige o Runtime local conectado: sem uma pessoa pilotando o navegador ao vivo, não tem o que o gravador observar.

Durante a gravação

Ao confirmar, o navegador abre na máquina do runtime local com uma moldura vermelha, o sinal de que a gravação está ativa. A partir daí, execute o processo manualmente, como você faria no dia a dia:

Navegador aberto pelo gravador com moldura vermelha
O navegador do gravador: a moldura vermelha indica que cada clique e preenchimento está sendo capturado.

Cada ação é registrada com o seletor do elemento e o valor usado. É isso que o Copilot converte em etapas e mapeamentos.

O fluxo gerado

Ao encerrar a gravação, o Copilot monta o fluxo no canvas: as navegações viram etapas Navegar, as interações viram etapas Preencher com os mapeamentos de seletores, e os valores digitados entram como valores das linhas de mapeamento. Antes de executar, revise:

  1. Troque valores fixos por variáveis. O que você digitou de exemplo (ex.: um CPF de teste) deve virar {parametro} ou {nome_do_campo} capturado por outra etapa. Veja Mapeamento de Dados.
  2. Confira os seletores. Elementos com IDs dinâmicos podem precisar de um seletor mais estável.
  3. Adicione as ramificações. A gravação captura o caminho feliz; casos alternativos entram com Decisão e Gestão de Erros e Exceções.
  4. Teste em modo Debug antes de publicar.

Requisitos

Outras maneiras de mapear

O gravador cobre a maior parte do trabalho, mas o campo Seletor do Mapeamento de Dados continua editável a qualquer momento, seja para ajustar um seletor instável que a gravação capturou, ou para mapear um elemento sem gravar nada. Nesses casos, o DevTools do navegador (F12, ou botão direito → Inspecionar) é a ferramenta para descobrir o seletor de um elemento na tela:

  1. Abra o DevTools na página do sistema-alvo e ative o seletor de elemento (ícone de seta/cursor no canto superior esquerdo do painel).
  2. Clique no elemento desejado na página. O DevTools destaca a tag correspondente no painel Elements.
  3. A trilha de tags no rodapé do painel Elements mostra o caminho completo do elemento (ex.: div.row > div.campo-container > input#nome.campo), que é a base para montar o seletor CSS.
DevTools do Chrome com um campo de formulário inspecionado e a trilha de seletores no rodapé
DevTools: elemento inspecionado no painel Elements, com a trilha de tags (div.row > div.grid-6...campo-container > input#nome.campo) no rodapé.

No próprio campo Seletor do mapeamento, o ícone de ajuda ao lado do rótulo mostra a mesma referência rápida de sintaxe:

TipoExemplo
CSS por ID#meu-id
CSS por classe.minha-classe
CSS por atributoinput[name='email']
CSS com nth-childul li:nth-child(2)
XPath//button[text()='Enviar']
XPath contém//div[contains(@class,'btn')]
Encadeamento.form-group > input.email
Duplo seletor.modal .btn-primary

Dicas para um bom mapeamento