Automação sem API: Navegador Headless na plataforma de baixo código Latenode

Olá, aqui é o Daniel do Latenode 👋

Hoje, vamos discutir uma ferramenta de automação que não é muito usada entre especialistas em no-code. Além disso, esse recurso, nativo do Latenode, não está disponível em plataformas como Zapier, Make e outras, mas tem forte potencial para aprimorar seus fluxos de trabalho.

A propósito, cada vez que você navega na web via ChatGPT, você o está usando! É um Headless Browser.

Experimente o fluxo de trabalho "Fazer captura de tela e enviar para o Telegram" usando um navegador sem interface        

Tente agora          

Explicação do navegador sem cabeça

Vamos dar um passo para trás e olhar para o mundo da automação de processos de negócios. Na maioria dos casos, as empresas usam apenas duas abordagens de automação que satisfazem totalmente suas necessidades:

1. Automatize processos via API.

Esta é uma abordagem sólida para construir fluxos de dados entre diferentes aplicativos que têm uma API pública. Você vai até o hub do desenvolvedor e descobre como fazer uma chamada de API correta para fazer precisamente o que precisa, ou pede ao JavaScript AI Assistant no Latenode para construir integração com qualquer aplicativo que você precisa em segundos, simplesmente descrevendo sua solicitação.

Infelizmente, nem todas as ações na web têm infraestrutura de API subjacente para fazer as mesmas coisas automaticamente. É aí que as empresas confiam no segundo método que não requer nenhum ponto de extremidade de API.

2. Navegador sem cabeça para automatizar sem APIs

Este artigo é sobre isso, então sente-se, relaxe e vamos mergulhar em um novo campo de automação que mais tarde cobrirá suas costas.

O que é um navegador sem cabeçalho?

Imagine um navegador de internet comum como o Chrome ou o Firefox. Agora, remova todas as partes visíveis da interface - botões, barra de endereço, favoritos. O que sobrou? Os "cérebros" que podem navegar na internet, abrir sites e interagir com eles. Isso é o que chamamos de navegador "headless". Ele pode automatizar várias tarefas em sites sem exibir conteúdo visual e pode fazer isso em uma velocidade alucinante. Um script, não um humano, controla o processo.

Uma parte crucial do Headless Browser é sua capacidade de executar scripts JavaScript personalizados. Ele permite que você simule ações do usuário, como clicar em botões, preencher formulários e navegar pelo menu de um site. Isso é crucial para tarefas como testes automatizados, web scraping e automatização de tarefas repetitivas em portais da web.

Como funciona um navegador sem interface?

Operar um navegador headless envolve algumas etapas importantes, e é essencial entendê-las para começar a usar seu potencial:

1. URL para navegar: Primeiro, você precisa especificar a URL da página da web com a qual deseja interagir. É como digitar um endereço de site em um navegador comum, mas aqui, você faz isso por meio de um script.
2. Seletores para navegar: Os seletores são cruciais para dizer ao navegador headless com quais elementos de uma página da web você quer interagir. Eles podem ser seletores CSS, XPath ou comandos JavaScript. Eles permitem que você identifique elementos específicos como botões, campos de texto, imagens, etc.
3. Parâmetros adicionais: Dependendo da sua tarefa, você pode precisar inserir texto em formulários, carregar arquivos ou clicar em botões. Essas ações são manipuladas por scripts que você escreve, que especificam o que fazer e quando fazer.

Basicamente, você deve dizer ao Headless Browser onde ir, o que encontrar, onde clicar, qual texto digitar ou copiar, e assim por diante.

O que um navegador sem interface pode fazer?

Existem algumas ações básicas que um navegador sem cabeça suporta sob seu controle:

• Navegação e interação automatizadas: Navegadores sem interface podem executar tarefas como preencher formulários, clicar em links, coletar dados e até mesmo fazer capturas de tela de páginas da web.
• Extração e Manipulação de Dados: Frequentemente, o objetivo é extrair dados de páginas da web. Navegadores headless podem analisar o HTML e o texto de uma página e extrair as informações que você precisa, que podem então ser usadas em seu aplicativo ou armazenadas para uso posterior.
• Executando scripts personalizados: Como os navegadores headless podem executar JavaScript, você pode executar scripts personalizados para interagir com páginas da web de maneiras complexas, como manipular conteúdo dinâmico ou lidar com autenticação.

Para quais propósitos posso usar um navegador sem interface?

Considerando as ações básicas, os Headless Browsers oferecem uma gama de ações avançadas que podem ser incrivelmente úteis. Para torná-lo real, você precisa integrar o Headless browser em cenários de low-code no Latenode. Isso permite que você implemente o headless browser nos seguintes casos de uso:

Característica	Descrição
Testes automatizados	Use o Headless Browser para testes automatizados de aplicativos da web, garantindo que eles funcionem corretamente em diferentes navegadores e dispositivos.
Rastreamento e raspagem da Web	O Headless Browser é perfeito para rastreamento e extração de dados na web, permitindo que você colete grandes quantidades de dados da web de forma eficiente.
Monitoramento de desempenho	Navegadores headless podem ajudar a monitorar o desempenho de aplicativos da web rastreando tempos de carregamento, capacidade de resposta e outras métricas importantes.
Manipulando sites com AJAX e JavaScript pesado	O Headless Browser pode lidar com sites com muitos recursos de AJAX e JavaScript como um navegador comum, o que o torna ideal para aplicativos web dinâmicos.

Casos de uso do navegador sem cabeça

Agora, vamos pular para casos de uso específicos em que você pode simplesmente copiar e colar e fazer a ligação direta do Headless Browser sozinho, mesmo sem experiência prévia.

Caso de uso nº 1: Pesquise na Web como os plug-ins GPT fazem com o Headless Browser

Fato curioso: quando você usa o ChatGPT e pede para ele navegar na web, um Headless Browser entra em cena! Vamos construir um MVP de algo similar e pedir para o Headless Browser fazer uma consulta de pesquisa para nós.

Aqui está uma breve visão geral do seguinte cenário:

• A URL do Webhook está procurando uma solicitação de postagem com uma solicitação de pesquisa.
• O Headless Browser recebe essa solicitação, abre o Google e retorna os títulos das 10 primeiras posições de pesquisa.
• A resposta do webhook envia o resultado de volta ao webhook.

Vamos nos aprofundar um pouco mais no código do navegador headless, onde mapeamos dados do webhook para que nosso nó do navegador headless saiba exatamente o que deve pesquisar no Google.

Depois disso, vamos fazer uma solicitação POST e enviar nossa consulta de pesquisa como uma chave 'Search' no Body. Em apenas alguns segundos, podemos ver o resultado da execução do cenário.

👉Quer testar você mesmo? Copie o modelo pronto para uso e navegue na web com o Headless Browser!

Experimente o fluxo de trabalho "Fazer captura de tela e enviar para o Telegram" usando um navegador sem interface        

Tente agora          

Caso de uso nº 2: Analisar dados de páginas da Web com navegador sem cabeçalho

Agora, direto para a análise de dados de sites! Ele pode ser usado amplamente: desde sincronização em tempo real de preços de marketplaces até a coleta em massa de elementos de SEO para análise posterior.

Primeiro exemplo: que tal raspar todos os títulos (H1, H2, H3) da landing page do Latenode? Vamos lá!

• O cenário parece o mesmo:
• O Webhook escuta uma URL para analisar.
• O Headless Browser navega até a URL fornecida, encontra e recupera títulos H1, H2, H3.
• A resposta do Webhook mostra a lista de títulos como resultado da chamada do gatilho do Webhook.

Em seguida, fazemos uma solicitação POST novamente para nosso cenário e enviamos o site para análise na seção body, conforme mostrado abaixo:

Como resultado, obtemos a lista de títulos H1, H2 e H3 da página da web que enviamos para o navegador headless.

Observação: o mais importante é que você pode operar com essas informações dentro do cenário do Latenode para qualquer transformação de dados posterior ou enviar informações para onde precisar.

Segundo exemplo: se você não tem uma API para o site do qual precisa recuperar alguma informação crucial, como uma taxa de câmbio de dólar americano e euro para libra esterlina – use um navegador headless para obter acesso direto a ela.

Ao fazer mais uma solicitação POST com duas moedas, você inevitavelmente obtém duas taxas de câmbio como resposta do cenário Latenode.

Caso de uso nº 3: preencher formulários usando o navegador sem interface

Agora mudamos nosso foco de busca e recuperação para preenchimento. Que tal preencher um formulário da web automaticamente e sem uma API?

• Forneça ao navegador headless o link para o formulário da web.
• Dê a ele um texto para entrada.
• Forneça o caminho para o elemento HTML, CSS ou XPath para digitar seu texto.

Crie integrações ilimitadas com ramificações, vários gatilhos em um nó, use low-code ou escreva seu próprio código com o AI Copilot.        

Tente agora          

O código para preencher um código HTML tão simples se parece com este:

const targetUrl = '<https://webhook.latenode.com/368/dev/SIMPLE_FORM>';

await page.setUserAgent('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36');
await page.goto(targetUrl);

// Using 'id' selectors as per your HTML structure
await page.type('#subject', data["{{$3.body.subject}}"]);
await page.type('#title', data["{{$3.body.title}}"]);
await page.type('#overview', data["{{$3.body.overview}}"]);
await page.type('#platform-updates', data["{{$3.body.updates}}"]);
await page.type('#useful-materials', data["{{$3.body.materials}}"]);
await page.type('#other-news', data["{{$3.body.news}}"]);

// The 'value' in the select option should match the 'value' attribute of the option
await page.select('#platform', 'TestEmail');
await page.click('#submit'); // Updated to use the 'id' of the submit button

// Assuming the popup is the confirmation of submission
await page.waitForSelector('#popup', {visible: true, timeout: 5000});

return { message: 'FORM SUBMITTED' };

Caso de uso nº 4: faça capturas de tela com o navegador sem cabeça

Por último, mas não menos importante, faça capturas de tela de tudo o que você encontrar na web.

Para fazer uma vitrine, construímos um gráfico dinâmico na plataforma Latenode que se atualiza a cada semana com novas informações. Tudo feito com a ajuda de um nó JavaScript e Variáveis ​​Globais.

Parece com isso. Mas e se quisermos compartilhar esse gráfico com outra pessoa a cada semana quando ele for atualizado? Para torná-lo real, podemos pedir ajuda ao Headless Browsers para fazer uma captura de tela e enviar o arquivo para onde ele precisa ir.

O nó Headless Browser retorna uma captura de tela no formato base64. Depois disso, o nó JavaScript permite que você a transforme conforme seu sistema posterior precisar obter esse arquivo.

Recrie este cenário com o Latenode.        

Tente agora          

👉Para personalizar este modelo pronto para uso e começar a fazer capturas de tela para posterior envio ao seu chat do Telegram, siga estes passos:

• Copie o modelo da nossa galeria.
• No nó JavaScript, substitua o Telegram Bot Token e o ChatID pelos seus dados.
• Implante seu cenário e chame a URL do webhook manualmente.

Conclusão

Neste artigo, descobrimos o poder dos Headless Browsers no Latenode, uma ferramenta poderosa para automações de low-code. Esses navegadores, sem a interface usual do Chrome ou Firefox, oferecem uma maneira rápida e orientada por scripts de usar a web. Eles são perfeitos para tarefas como preencher formulários, obter dados de sites e testes automatizados, especialmente em sites complexos e dinâmicos.

O que faz nosso nó Headless Browser se destacar é sua facilidade de uso em um ambiente de baixo código. Isso significa que mesmo aqueles sem profundo conhecimento de codificação ainda podem usar seus recursos. Da automação de tarefas simples ao tratamento de interações complexas na web, o Headless Browser é uma ferramenta robusta para várias necessidades.

Divirta-se usando o Latenode e, para qualquer dúvida sobre a plataforma, junte-se à nossa comunidade Discord de especialistas em low-code.

Para uma representação visual da automação do navegador sem cabeça, assista ao tutorial do Latenode sobre automação de baixo código com a ajuda do nosso nó do navegador sem cabeça pronto para uso em nossa plataforma.

Artigos relacionados:

• JavaScript + IA: uma dupla perfeita para automações de baixo código
• Crie integração com qualquer aplicativo: dois métodos
• Primeira oferta vitalícia para quem se inscrever pela primeira vez!