Automatização sem API: Navegador sem cabeça na plataforma de baixo código Latenode

Olá, sou Daniel, do site Latenode 👋.

Hoje, discutiremos uma ferramenta de automação que não é muito usada entre os especialistas sem código. Além disso, esse recurso, nativo do Latenode, não está disponível em plataformas como Zapier, Make e outras, mas tem grande potencial para aprimorar seus fluxos de trabalho.

A propósito, toda vez que você navega na Web pelo ChatGPT, você o está usando! É um navegador sem cabeça.

Explicação sobre o navegador sem cabeça

Vamos dar um passo atrás e analisar 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 plenamente suas necessidades:

1. Automatize processos via API.

Essa é uma abordagem sólida para criar fluxos de dados entre diferentes aplicativos que tenham uma API pública. Você mesmo pode acessar o hub de desenvolvedores e descobrir como fazer uma chamada de API correta para fazer exatamente o que precisa ou pedir ao JavaScript AI Assistant em Latenode para criar integração com qualquer aplicativo de que você precise em segundos, simplesmente descrevendo sua solicitação.

Infelizmente, nem todas as ações na Web têm uma 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, portanto, 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ça?

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ços, favoritos. O que resta? O "cérebro" que pode navegar na Internet, abrir sites e interagir com eles. Isso é o que chamamos de navegador "sem cabeça". Ele pode automatizar várias tarefas em sites sem exibir conteúdo visual e pode fazer isso em uma velocidade vertiginosa. Um script, e não um ser humano, controla o processo.

Uma parte essencial do Headless Browser é sua capacidade de executar scripts personalizados em JavaScript. 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 é fundamental para tarefas como testes automatizados, raspagem da Web e automatização de tarefas repetitivas em portais da Web.

Como funciona um navegador sem cabeça?

A operação de um navegador sem cabeça envolve algumas etapas importantes, e é essencial que você as entenda para começar a usar seu potencial:

1. URL para navegar: Primeiro, você precisa especificar o URL da página da Web com a qual deseja interagir. É como inserir o endereço de um 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 informar ao navegador sem cabeça com quais elementos de uma página da Web você deseja 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, talvez você precise inserir texto em formulários, fazer upload de arquivos ou clicar em botões. Essas ações são tratadas por scripts que você escreve, que especificam o que fazer e quando fazer.

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

O que um navegador sem cabeça pode fazer?

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

• Navegação e interação automatizadas: Os navegadores sem cabeça 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: Muitas vezes, o objetivo é extrair dados de páginas da Web. Os navegadores sem cabeçalho podem analisar o HTML e o texto de uma página e extrair as informações de que você precisa, que podem ser usadas no seu aplicativo ou armazenadas para uso posterior.
• Execução de 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 que fins posso usar um navegador sem cabeça?

Considerando as ações básicas, os navegadores sem cabeça oferecem uma série de ações avançadas que podem ser incrivelmente úteis. Para torná-lo real, você precisa integrar o navegador sem cabeça em cenários de baixo código em Latenode. Isso permite que você implemente o navegador sem cabeça nos seguintes casos de uso:

Casos de uso do navegador sem cabeça

Agora, vamos ver casos de uso específicos em que você pode simplesmente copiar e colar e fazer o hotwire da ignição do Headless Browser por conta própria, mesmo sem experiência prévia.

Caso de uso nº 1: pesquisar na Web como os plug-ins GPT fazem com o navegador sem cabeça

Fato interessante: quando você usa o ChatGPT e pede que ele navegue na Web, um Headless Browser entra em ação! Vamos criar um MVP de algo semelhante e pedir ao Headless Browser que faça uma consulta de pesquisa para nós.

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

• O 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 para o webhook.

Vamos nos aprofundar um pouco mais no código do navegador sem cabeça, onde mapeamos os dados do webhook, para que o nó do navegador sem cabeça 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 corpo. Em poucos segundos, você 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!

Caso de uso nº 2: analisar dados de páginas da Web com o navegador sem cabeça

Agora você já pode analisar dados de sites! Você pode usá-lo amplamente: desde a sincronização em tempo real de preços de mercados até a extração em massa de elementos de SEO para análise posterior.

Primeiro exemplo: o que você acha de extrair todos os títulos (H1, H2, H3) da página de destino de Latenode? Vamos fazer isso!

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

Em seguida, fazemos uma solicitação POST novamente para o 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 ao navegador sem cabeçalho.

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

Segundo exemplo: se você não tiver uma API para o site do qual precisa recuperar algumas informações cruciais, como uma taxa de câmbio do dólar americano e do euro para a libra esterlina, use um navegador sem cabeça para obter acesso direto a ele.

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

Caso de uso nº 3: preencher formulários usando o navegador sem cabeça

Agora, mudamos o foco da busca e da recuperação para o preenchimento. O que você acha de preencher um formulário da Web automaticamente e sem uma API?

• Forneça ao navegador sem cabeça o link para o formulário da Web.
• Forneça texto para a entrada.
• Forneça o caminho para o elemento HTML, CSS ou XPath para que você digite o texto.

O código para preencher esse código HTML simples é o seguinte:

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: fazer 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 demonstração, criamos um gráfico dinâmico na plataforma Latenode que se atualiza a cada semana com novas informações. Tudo isso é feito com a ajuda de um nó JavaScript e variáveis globais.

Ele tem a seguinte aparência. Mas e se você quiser compartilhar esse gráfico com outra pessoa toda semana quando ele for atualizado? Para tornar isso 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 a você uma captura de tela no formato base64. Depois disso, o nó JavaScript permite que você o transforme conforme a necessidade de seu sistema adicional para obter esse arquivo.

Para personalizar esse modelo pronto para uso e começar a fazer capturas de tela e enviá-las ao seu bate-papo do Telegram, siga estas etapas:

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

Conclusão 

Neste artigo, revelamos o poder dos navegadores sem cabeça em Latenode, uma ferramenta avançada para automações com pouco código. Esses navegadores, sem a interface usual do Chrome ou do Firefox, oferecem uma maneira rápida e orientada por scripts de usar a Web. Eles são perfeitos para tarefas como preenchimento de formulários, obtenção de dados de sites e testes automatizados, especialmente em sites complexos e dinâmicos.

O que faz com que nosso nó Headless Browser se destaque é a facilidade de uso em um ambiente com pouco código. Isso significa que mesmo aqueles que não têm conhecimento profundo de codificação podem usar seus recursos. Desde a automação de tarefas simples até o tratamento de interações complexas na Web, o Headless Browser é uma ferramenta robusta para várias necessidades.

Aproveite o uso do Latenode e, se você tiver dúvidas sobre a plataforma, entre em contato com a comunidade do Discord, entre em nossa comunidade Discord de especialistas em low-code.

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

Artigos relacionados:

• JavaScript + IA: uma dupla perfeita para automações com pouco código
• Crie integração com qualquer aplicativo: Dois métodos
• Primeira oferta vitalícia para os madrugadores!