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

Olá, sou o Daniel, de Latenode 👋.

Hoje, vamos falar de uma ferramenta de automatização que não é muito utilizada pelos especialistas em no-code. Além disso, esta funcionalidade, nativa de Latenode, não está disponível em plataformas como Zapier, Make e outras, mas tem um forte potencial para melhorar os teus fluxos de trabalho.

Já agora, cada vez que navegas na web através do ChatGPT, estás a usá-lo! É um Browser sem cabeça.

Explicação sobre o navegador sem cabeça

Vamos dar um passo atrás e olhar para o mundo da automatização dos processos empresariais. Na maioria dos casos, as empresas utilizam apenas duas abordagens de automatização que satisfazem plenamente as suas necessidades:

1. Automatiza processos através de API.

Esta é uma abordagem sólida para criar fluxos de dados entre diferentes aplicações que tenham uma API pública. Ou vais ao hub de programadores e descobres como fazer uma chamada de API correta para fazer exatamente o que precisas, ou pedes ao Assistente de IA JavaScript em Latenode para criar uma integração com qualquer aplicação de que precises em segundos, descrevendo simplesmente o teu pedido.

Infelizmente, nem todas as acções na Web têm uma infraestrutura de API subjacente para fazer as mesmas coisas automaticamente. É por isso que as empresas recorrem ao segundo método, que não requer quaisquer pontos de extremidade da API.

2. Navegador sem cabeça para automatizar sem APIs

Este artigo é sobre isso, por isso senta-te, relaxa e vamos mergulhar num novo campo de automatização que mais tarde te vai cobrir as costas.

O que é um navegador sem cabeça?

Imagina um navegador de Internet normal, como o Chrome ou o Firefox. Agora, remove todas as partes visíveis da interface - botões, barra de endereço, marcadores. O que é que fica? O "cérebro" que pode navegar na Internet, abrir sítios Web e interagir com eles. É a isto que chamamos um browser "sem cabeça". Pode automatizar várias tarefas em sítios Web sem apresentar conteúdo visual e pode fazê-lo a uma velocidade vertiginosa. Um script, e não um humano, controla o processo.

Uma parte crucial do Headless Browser é a sua capacidade de executar scripts personalizados JavaScript. Permite-te simular acções do utilizador como clicar em botões, preencher formulários e navegar pelo menu de um site. Isso é crucial 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?

O funcionamento de um browser sem cabeça envolve alguns passos fundamentais, e é essencial compreendê-los para começar a utilizar o seu potencial:

1. URL para navegar: Primeiro, tens de especificar o URL da página Web com que pretendes interagir. Isto é como introduzir o endereço de um site num browser normal, mas aqui, fá-lo através 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. Permitem-te identificar elementos específicos como botões, campos de texto, imagens, etc.
3. Parâmetros adicionais: Dependendo da tua tarefa, podes precisar de introduzir texto em formulários, carregar ficheiros ou clicar em botões. Estas acções são tratadas por scripts que escreves, que especificam o que fazer e quando o fazer.

Basicamente, deves dizer ao Headless Browser para onde ir, o que encontrar, onde clicar, que texto escrever ou copiar, etc.

O que pode fazer um navegador sem cabeça?

Existem algumas acções básicas que um Headless Browser suporta sob o teu controlo:

• Navegação e interação automatizadas: Os navegadores sem cabeça podem executar tarefas como preencher formulários, clicar em links, extrair dados e até mesmo fazer capturas de ecrã de páginas Web.
• Extração e tratamento de dados: Muitas vezes, o objetivo é extrair dados de páginas Web. Os browsers sem cabeça podem analisar o HTML e o texto de uma página e extrair a informação de que precisas, que pode depois ser utilizada na tua aplicação ou armazenada para utilização posterior.
• Executando scripts personalizados: Uma vez que os browsers sem cabeça podem executar JavaScript, podes executar scripts personalizados para interagir com páginas Web de formas complexas, como lidar com conteúdo dinâmico ou lidar com autenticação.

Para que fins posso usar um navegador sem cabeça?

Considerando as acções básicas, os Headless Browsers oferecem uma gama de acções avançadas que podem ser incrivelmente úteis. Para torná-lo real, precisas de integrar o Headless Browser em cenários low-code em Latenode. Isso permite-te implementar o Headless Browser nos seguintes casos de utilização:

Casos de utilização de um browser sem cabeça

Agora vamos saltar para casos de utilização específicos que podes simplesmente copiar-colar e ligar a ignição do Headless Browser por ti próprio, mesmo sem experiência prévia.

Caso de Uso #1: Pesquisa na Web como os plugins GPT fazem com o Headless Browser

Facto engraçado: quando usas o ChatGPT e lhe pedes para navegar na web, um Headless Browser entra em ação! Vamos construir um MVP de algo semelhante e pedir ao Headless Browser para fazer uma consulta de pesquisa para nós.

Segue-se uma breve descrição do seguinte cenário:

• O URL do Webhook está à procura de um pedido de publicação com um pedido de pesquisa.
• O Headless Browser recebe esse pedido, abre o Google e devolve os títulos das primeiras 10 posições de pesquisa.
• A resposta do webhook envia o resultado para o webhook.

Vamos mergulhar um pouco mais no código do navegador sem cabeça, onde mapeamos os dados do webhook, para que nosso nó do navegador sem cabeça saiba exatamente o que deve pesquisar no Google.

Depois disso, vamos fazer um pedido POST e enviar a nossa consulta de pesquisa como uma chave 'Search' no corpo. Em poucos segundos, podemos ver o resultado da execução do cenário.

Queres testá-lo por ti próprio? Copia o modelo pronto a usar e navega na Web com o Headless Browser!

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

Agora, passa diretamente à análise de dados de sítios Web! Pode ser utilizado de forma tão ampla: desde a sincronização em tempo real de preços de mercados até à recolha em massa de elementos SEO para análise posterior.

Primeiro exemplo: que tal extrair todos os títulos (H1, H2, H3) da página de destino de Latenode? Toca a fazer isso!

• O cenário é o mesmo:
• O Webhook escuta um URL para analisar.
• O Headless Browser navega para o URL fornecido, encontra 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 novamente um pedido POST para o nosso cenário e enviamos o sítio Web para análise na secção do corpo, como se mostra abaixo:

Como resultado, obtemos a lista de títulos H1, H2 e H3 da página Web que enviámos para o browser sem cabeça.

Nota: O mais importante é que podes utilizar essas informações no cenário Latenode para qualquer transformação de dados adicional ou para enviar informações para onde quiseres.

Segundo exemplo: se não tiveres uma API para o sítio Web a partir do qual precisas de obter informações cruciais, como a taxa de câmbio do dólar americano e do euro para a libra esterlina, utiliza um browser sem cabeça para obteres acesso direto a ele.

Ao fazer mais um pedido POST com duas moedas, obtém inevitavelmente duas taxas de câmbio como resposta do cenário Latenode .

Caso de utilização #3: Preencher formulários utilizando um browser sem cabeça

Agora mudamos o nosso foco da pesquisa e recuperação para o preenchimento. O que achas de preencher um formulário web automaticamente e sem uma API?

• Fornece ao browser sem cabeça a ligação para o formulário Web.
• Dá-lhe texto para introduzir.
• Fornece o caminho para o elemento HTML, CSS ou XPath para escrever o teu texto.

O código para preencher um código HTML tão simples tem o seguinte aspeto:

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 utilização #4: Faz capturas de ecrã com o Headless Browser

Por último, mas não menos importante, faz capturas de ecrã de tudo o que encontrares na Web.

Para fazer uma demonstração, construímos um gráfico dinâmico na plataforma Latenode que se actualiza todas as semanas com novas informações. Tudo feito com a ajuda de um nó JavaScript e Variáveis Globais.

Tem este aspeto. Mas e se quisermos partilhar este gráfico com outra pessoa todas as semanas, quando for atualizado? Para o tornar real, podemos pedir ajuda ao Headless Browsers para fazer uma captura de ecrã e enviar o ficheiro para onde tem de ir.

O nó Headless Browser devolve-te uma captura de ecrã no formato base64. Depois disso, o nó JavaScript permite-te transformá-lo de acordo com as necessidades do teu sistema para obter este ficheiro.

Para personalizares este modelo pronto a usar e começares a fazer capturas de ecrã com posterior envio para o teu chat do Telegram, segue estes passos:

• Copia o modelo da nossa galeria.
• No nó JavaScript, substitui o Telegram Bot Token & ChatID pelos teus dados.
• Implementa o teu cenário e chama manualmente o URL do webhook.

Conclusão 

Neste artigo, descobrimos o poder dos Headless Browsers em Latenode, uma ferramenta poderosa para automatizações com pouco código. Estes browsers, sem a interface habitual do Chrome ou do Firefox, oferecem uma forma rápida e orientada por scripts de utilizar a Web. São perfeitos para tarefas como o preenchimento de formulários, a obtenção de dados de sítios Web e testes automatizados, especialmente em sítios complexos e dinâmicos.

O que faz com que o nosso nó Headless Browser se destaque é a sua facilidade de utilização num ambiente com pouco código. Isto significa que mesmo quem não tem conhecimentos profundos de codificação pode utilizar as suas capacidades. Desde a automatização de tarefas simples até ao tratamento de interações complexas na Web, o Headless Browser é uma ferramenta robusta para várias necessidades.

Diverte-te a utilizar Latenode, e para quaisquer questões sobre a plataforma, junta-te à nossa comunidade Discord de especialistas em low-code.

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

Artigos relacionados:

• JavaScript + IA: uma dupla perfeita para automatizações com pouco código
• Cria uma integração com qualquer aplicação: Dois métodos
• A primeira oferta vitalícia de sempre para os madrugadores!