Olá, aqui é o Daniel da Latenode 👋
Hoje, vamos falar sobre uma ferramenta de automação que ainda não é amplamente usada entre especialistas em no-code. Além disso, esse recurso nativo da Latenode não está disponível em plataformas como Zapier, Make e outras, mas tem grande potencial para aprimorar seus fluxos.
A propósito, sempre que você navega na web pelo ChatGPT, está usando essa ferramenta! É um navegador headless.
Experimente o fluxo "Fazer captura de tela e enviar para o Telegram" usando um navegador headless
Explicação sobre navegador headless
Vamos dar um passo atrás e observar o mundo da automação de processos de negócios. Na maioria dos casos, as empresas usam apenas duas abordagens de automação que atendem completamente às suas necessidades:
- Automatizar processos via API.
Essa é uma abordagem sólida para criar fluxos de dados entre diferentes aplicações que têm uma API pública. Você pode acessar o portal para desenvolvedores e descobrir como fazer uma chamada de API correta para executar exatamente o que precisa, ou pedir ao Assistente de IA para JavaScript da Latenode que crie a integração com qualquer app necessário em segundos, simplesmente descrevendo sua solicitação.
Infelizmente, nem todas as ações na web têm uma infraestrutura de API que permita fazer as mesmas coisas automaticamente. É aí que as empresas recorrem ao segundo método, que não exige endpoints de API.
- Navegador headless para automatizar sem APIs
Este artigo é totalmente sobre isso, então sente-se, relaxe e vamos explorar uma nova área de automação que vai ajudar você no futuro.
O que é um navegador headless?
Imagine um navegador de internet comum, como Chrome ou Firefox. Agora, remova todas as partes visíveis da interface: botões, barra de endereço e favoritos. O que sobra? Os “cérebros” capazes de 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 fazer isso em uma velocidade impressionante. Um script, e não uma pessoa, controla o processo.
Uma parte crucial do navegador headless é sua capacidade de executar scripts JavaScript personalizados. Isso permite simular ações do usuário, como clicar em botões, preencher formulários e navegar pelo menu de um site. Isso é essencial para tarefas como testes automatizados, coleta de dados da web e automação de tarefas repetitivas em portais web.
Como funciona um navegador headless?
Operar um navegador headless envolve algumas etapas importantes, e é essencial entendê-las para começar a aproveitar seu potencial:
- URL para navegar: primeiro, você precisa especificar a URL da página 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.
- Seletores para navegar: os seletores são fundamentais para informar ao navegador headless com quais elementos de uma página web você deseja interagir. Eles podem ser seletores CSS, XPath ou comandos JavaScript. Eles permitem identificar elementos específicos, como botões, campos de texto, imagens e muito mais.
- Parâmetros adicionais: dependendo da sua tarefa, talvez seja necessário inserir texto em formulários, enviar arquivos ou clicar em botões. Essas ações são executadas por scripts que você escreve e que especificam o que fazer e quando fazer.
Basicamente, você deve informar ao navegador headless para onde ir, o que encontrar, onde clicar, qual texto digitar ou copiar e assim por diante.
O que um navegador headless pode fazer?
Há algumas ações básicas que um navegador headless pode executar sob seu controle:
- Navegação e interação automatizadas: navegadores headless podem executar tarefas como preencher formulários, clicar em links, coletar dados e até fazer capturas de tela de páginas web.
- Extração e tratamento de dados: muitas vezes, o objetivo é extrair dados de páginas web. Os navegadores headless podem analisar o HTML e o texto de uma página e extrair as informações de que você precisa, que podem então ser usadas na sua aplicação ou armazenadas para uso posterior.
- Execução de scripts personalizados: como os navegadores headless podem executar JavaScript, você pode rodar scripts personalizados para interagir com páginas web de formas complexas, como lidar com conteúdo dinâmico ou autenticação.
Para quais finalidades posso usar um navegador headless?
Considerando as ações básicas, os navegadores headless oferecem uma variedade de ações avançadas que podem ser extremamente úteis. Para colocar isso em prática, você precisa integrar o navegador headless aos fluxos low-code da Latenode. Isso permite implementar um navegador headless nos seguintes casos de uso:
| Recurso | Descrição |
|---|---|
| Testes automatizados | Use o navegador headless para testes automatizados de aplicações web, garantindo que funcionem corretamente em diferentes navegadores e dispositivos. |
| Rastreamento e coleta de dados da web | O navegador headless é perfeito para rastreamento e coleta de dados da web, permitindo reunir grandes volumes de dados online com eficiência. |
| Monitoramento de desempenho | Navegadores headless podem ajudar a monitorar o desempenho de aplicações web, acompanhando tempos de carregamento, responsividade e outras métricas importantes. |
| Processamento de sites com AJAX e muito JavaScript | O navegador headless consegue processar sites com AJAX e muito JavaScript de forma semelhante a um navegador comum, sendo ideal para aplicações web dinâmicas. |
Casos de uso de navegador headless
Agora, vamos partir para casos de uso específicos que você pode simplesmente copiar e colar para colocar um navegador headless em funcionamento por conta própria, mesmo sem experiência prévia.
Caso de uso nº 1: Pesquise na web como os plugins do GPT fazem com navegador headless
Curiosidade: quando você usa o ChatGPT e pede para ele navegar na web, um navegador headless entra em ação! Vamos criar um MVP de algo semelhante e pedir ao navegador headless que faça uma consulta de pesquisa para nós.
Veja uma breve visão geral do fluxo a seguir:
- A URL do webhook aguarda uma solicitação POST com um pedido de busca.
- O navegador headless recebe essa solicitação, abre o Google e retorna os títulos das 10 primeiras posições da pesquisa.
- A resposta do webhook envia o resultado de volta ao webhook.
Vamos analisar um pouco mais a fundo o código do navegador headless, no qual mapeamos os dados do webhook para que nosso nó de 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 corpo. Em apenas alguns segundos, conseguimos ver o resultado da execução do fluxo.
👉Quer testar por conta própria? Copie o modelo pronto para uso e navegue na web com o navegador headless!
Experimente o fluxo "Fazer captura de tela e enviar para o Telegram" usando um navegador headless
Caso de uso nº 2: Analise dados de páginas web com navegador headless
Agora vamos direto para a análise de dados de sites! Isso pode ser usado de várias formas: da sincronização em tempo real de preços de marketplaces à coleta em massa de elementos de SEO para análises posteriores.
Primeiro exemplo: que tal coletar todos os títulos (H1, H2, H3) da landing page da Latenode? Vamos fazer isso!
- O fluxo é o mesmo:
- O webhook aguarda uma URL para analisar.
- O navegador headless navega até a URL fornecida, encontra e recupera títulos H1, H2 e H3.
- A resposta do webhook mostra a lista de títulos como resultado da chamada do gatilho de webhook.
Em seguida, fazemos outra solicitação POST ao nosso fluxo e enviamos o site a ser analisado na seção de corpo, como mostrado abaixo:
Como resultado, recebemos a lista de títulos H1, H2 e H3 da página web enviada ao navegador headless.
Observação: o mais importante é que você pode usar essas informações dentro do fluxo da Latenode para qualquer transformação adicional de dados ou para enviar informações aonde precisar.
Segundo exemplo: se você não tem uma API para o site do qual precisa recuperar alguma informação importante, como uma taxa de câmbio de dólar americano e euro para libra esterlina, use um navegador headless para obter acesso direto a esses dados.
Ao fazer mais uma solicitação POST com duas moedas, você receberá inevitavelmente duas taxas de câmbio como resposta do fluxo da Latenode.
Caso de uso nº 3: Preencha formulários usando navegador headless
Agora, mudamos o foco de pesquisar e recuperar informações para preencher. Que tal preencher um formulário web automaticamente e sem uma API?
- Forneça ao navegador headless o link do formulário web.
- Informe o texto a ser inserido.
- Forneça o caminho para o elemento HTML, CSS ou XPath onde seu texto deve ser digitado.
Crie integrações ilimitadas com ramificações, vários gatilhos chegando a um único nó, use low-code ou escreva seu próprio código com AI Copilot.
O código para preencher um formulário HTML simples como esse é 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: Faça capturas de tela com navegador headless
Por último, mas não menos importante, fazer capturas de tela de tudo o que você encontrar na web.
Para demonstrar, criamos um gráfico dinâmico na plataforma Latenode que se atualiza toda semana com novas informações. Tudo feito com a ajuda de um nó JavaScript e Variáveis Globais.
Ele se parece com isto. Mas e se quisermos compartilhar esse gráfico com outra pessoa toda semana, quando for atualizado? Para tornar isso possível, podemos pedir ajuda aos navegadores headless para fazer uma captura de tela e enviar o arquivo para onde ele precisa ir.
O nó de navegador headless retorna uma captura de tela no formato base64. Depois disso, o nó JavaScript permite transformá-la conforme as necessidades do seu sistema para obter esse arquivo.
Recrie este fluxo com a Latenode.
👉Para personalizar este modelo pronto para uso e começar a fazer capturas de tela com envio posterior para seu chat do Telegram, siga estas etapas:
- Copie o modelo da nossa galeria.
- No nó JavaScript, substitua o token do bot do Telegram e o ChatID pelos seus dados.
- Publique seu fluxo e chame a URL do webhook manualmente.
Conclusão
Neste artigo, mostramos o poder dos navegadores headless na Latenode, uma ferramenta poderosa para automações low-code. Esses navegadores, sem a interface usual do Chrome ou Firefox, oferecem uma forma rápida e orientada por scripts de usar a web. Eles são perfeitos para tarefas como preencher formulários, coletar dados de sites e realizar testes automatizados, especialmente em sites complexos e dinâmicos.
O que faz o nó de navegador headless da Latenode se destacar é sua facilidade de uso em um ambiente low-code. Isso significa que mesmo quem não tem conhecimentos profundos de programação ainda pode aproveitar seus recursos. Da automação de tarefas simples ao processamento de interações web complexas, o navegador headless é uma ferramenta robusta para diversas necessidades.
Aproveite a Latenode e, se tiver qualquer dúvida sobre a plataforma, entre na nossa comunidade no Discord de especialistas em low-code.
Para uma representação visual da automação com navegador headless, assista ao tutorial da Latenode sobre automação low-code com a ajuda do nosso nó de navegador headless pronto para uso na plataforma.
