Automatisation sans API : navigateur sans tête sur la plateforme low-code Latenode

Bonjour, c'est Daniel de Latenode 👋

Aujourd'hui, nous allons discuter d'un outil d'automatisation qui n'est pas très utilisé parmi les experts du no-code. De plus, cette fonctionnalité, native de Latenode, n'est pas disponible sur des plateformes comme Zapier, Make et autres, mais elle a un fort potentiel pour améliorer vos flux de travail.

Au fait, chaque fois que vous naviguez sur le Web via ChatGPT, vous l'utilisez ! C'est un navigateur sans tête.

Explication du navigateur sans tête

Prenons un peu de recul et examinons le monde de l'automatisation des processus métier. Dans la plupart des cas, les entreprises n'utilisent que deux approches d'automatisation qui répondent pleinement à leurs besoins :

1. Automatisez les processus via API.

Il s'agit d'une approche solide pour créer des flux de données entre différentes applications disposant d'une API publique. Vous pouvez soit vous rendre vous-même sur le hub des développeurs et déterminer comment effectuer un appel d'API correct pour faire exactement ce dont vous avez besoin, soit demander à l'assistant d'IA JavaScript sur Latenode de créer une intégration avec n'importe quelle application dont vous avez besoin en quelques secondes en décrivant simplement votre demande.

Malheureusement, toutes les actions sur le Web ne disposent pas d'une infrastructure API sous-jacente permettant d'effectuer automatiquement les mêmes opérations. C'est pourquoi les entreprises s'appuient sur la deuxième méthode, qui ne nécessite aucun point de terminaison API.

2. Navigateur sans tête pour automatiser sans API

Cet article est tout à ce sujet, alors asseyez-vous, détendez-vous et plongeons dans un nouveau domaine d'automatisation qui couvrira plus tard vos arrières.

Qu'est-ce qu'un navigateur sans tête ?

Imaginez un navigateur Internet classique comme Chrome ou Firefox. Supprimez maintenant tous les éléments d'interface visibles : boutons, barre d'adresse, signets. Que reste-t-il ? Le « cerveau » qui permet de naviguer sur Internet, d'ouvrir des sites Web et d'interagir avec eux. C'est ce que nous appelons un navigateur « sans tête ». Il peut automatiser diverses tâches sur les sites Web sans afficher de contenu visuel et peut le faire à une vitesse vertigineuse. C'est un script, et non un humain, qui contrôle le processus.

Un élément essentiel du navigateur Headless est sa capacité à exécuter des scripts JavaScript personnalisés. Il vous permet de simuler les actions des utilisateurs, comme cliquer sur des boutons, remplir des formulaires et naviguer dans le menu d'un site. Cela est essentiel pour des tâches telles que les tests automatisés, le scraping Web et l'automatisation des tâches répétitives sur les portails Web.

Comment fonctionne un navigateur sans tête ?

L'exploitation d'un navigateur headless implique quelques étapes clés, et il est essentiel de les comprendre pour commencer à exploiter son potentiel :

1. URL à parcourir:Tout d'abord, vous devez spécifier l'URL de la page Web avec laquelle vous souhaitez interagir. Cela revient à saisir l'adresse d'un site Web dans un navigateur classique, mais ici, vous le faites via un script.
2. Sélecteurs pour naviguer:Les sélecteurs sont essentiels pour indiquer au navigateur headless avec quels éléments d'une page Web vous souhaitez interagir. Il peut s'agir de sélecteurs CSS, de commandes XPath ou JavaScript. Ils vous permettent d'identifier des éléments spécifiques comme des boutons, des champs de texte, des images, etc.
3. Paramètres supplémentaires:Selon votre tâche, vous devrez peut-être saisir du texte dans des formulaires, télécharger des fichiers ou cliquer sur des boutons. Ces actions sont gérées par des scripts que vous écrivez, qui spécifient ce qu'il faut faire et quand le faire.

Fondamentalement, vous devez indiquer au navigateur sans tête où aller, quoi trouver, où cliquer, quel texte taper ou copier, etc.

Que peut faire un navigateur sans tête ?

Un navigateur sans tête prend en charge certaines actions de base sous votre contrôle :

• Navigation et interaction automatisées:Les navigateurs sans tête peuvent effectuer des tâches telles que remplir des formulaires, cliquer sur des liens, extraire des données et même prendre des captures d'écran de pages Web.
• Extraction et traitement des données:Souvent, l'objectif est d'extraire des données de pages Web. Les navigateurs headless peuvent analyser le code HTML et le texte d'une page et extraire les informations dont vous avez besoin, qui peuvent ensuite être utilisées dans votre application ou stockées pour une utilisation ultérieure.
• Exécution de scripts personnalisés:Étant donné que les navigateurs sans tête peuvent exécuter JavaScript, vous pouvez exécuter des scripts personnalisés pour interagir avec les pages Web de manière complexe, par exemple en gérant du contenu dynamique ou en gérant l’authentification.

À quelles fins puis-je utiliser un navigateur sans tête ?

En considérant les actions de base, les navigateurs sans tête offrent une gamme d'actions avancées qui peuvent être incroyablement utiles. Pour que cela soit possible, vous devez intégrer le navigateur sans tête dans des scénarios low-code sur Latenode. Cela vous permet d'implémenter un navigateur sans tête dans les cas d'utilisation suivants :

Cas d'utilisation du navigateur sans tête

Passons maintenant à des cas d'utilisation particuliers que vous pouvez simplement copier-coller et activer vous-même l'allumage du navigateur sans tête, même sans expérience préalable.

Cas d'utilisation n°1 : effectuez une recherche sur le Web comme le font les plugins GPT avec un navigateur sans tête

Fait amusant : lorsque vous utilisez ChatGPT et lui demandez de naviguer sur le Web, un navigateur sans tête entre en jeu ! Construisons un MVP de quelque chose de similaire et demandons au navigateur sans tête de faire une requête de recherche pour nous.

Voici un bref aperçu du scénario suivant :

• L'URL du Webhook recherche une demande de publication avec une demande de recherche.
• Headless Browser reçoit cette demande, ouvre Google et renvoie les titres des 10 premières positions de recherche.
• La réponse du webhook renvoie le résultat au webhook.

Plongeons un peu plus profondément dans le code du navigateur sans tête, où nous mappons les données du webhook, afin que notre nœud de navigateur sans tête sache exactement ce qu'il doit rechercher dans Google.

Après cela, faisons une requête POST et envoyons notre requête de recherche en tant que clé « Recherche » dans le corps. En quelques secondes, nous pouvons voir le résultat de l'exécution du scénario.

👉Vous voulez le tester par vous-même ? Copiez le modèle prêt à l'emploi et naviguez sur le Web avec Headless Browser !

Cas d'utilisation n°2 : analyser les données des pages Web avec un navigateur sans tête

Passons maintenant directement à l'analyse des données des sites Web ! Son utilisation est très large : de la synchronisation en temps réel des prix des places de marché à la récupération en masse d'éléments SEO pour une analyse plus approfondie.

Premier exemple: et si on supprimait tous les titres (H1, H2, H3) de la page d'accueil de Latenode ? Allons-y !

• Le scénario semble le même :
• Le Webhook écoute une URL à analyser.
• Le navigateur sans tête navigue vers l'URL fournie, recherche et récupère les titres H1, H2, H3.
• La réponse Webhook affiche la liste des titres résultant de l’appel du déclencheur Webhook.

Ensuite, nous faisons à nouveau une requête POST sur notre scénario et envoyons le site Web à analyser dans la section corps comme indiqué ci-dessous :

En conséquence, nous obtenons la liste des titres H1, H2 et H3 de la page Web que nous avons envoyée au navigateur sans tête.

Remarque : ce qui est important, c'est que vous pouvez utiliser ces informations dans le scénario Latenode pour toute transformation de données supplémentaire ou pour envoyer des informations où vous en avez besoin.

Deuxième exemple:si vous ne disposez pas d'une API pour le site Web à partir duquel vous devez récupérer des informations cruciales, telles qu'un taux de change du dollar américain et de l'euro vers la livre sterling, utilisez un navigateur sans tête pour y accéder directement.

En effectuant une requête POST supplémentaire avec deux devises, vous obtenez inévitablement deux taux de change en réponse au scénario Latenode.

Cas d'utilisation n°3 : Remplir des formulaires à l'aide d'un navigateur sans tête

Passons maintenant de la recherche et de la récupération à la saisie. Qu'en est-il du remplissage automatique d'un formulaire Web sans API ?

• Fournissez au navigateur sans tête le lien vers le formulaire Web.
• Donnez-lui du texte à saisir.
• Fournissez le chemin vers l'élément HTML, CSS ou XPath pour saisir votre texte.

Le code pour remplir un code HTML aussi simple ressemble à ceci :

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' };

Cas d'utilisation n°4 : réaliser des captures d'écran avec un navigateur sans tête

Enfin et surtout, faites des captures d’écran de tout ce que vous pouvez trouver sur le Web.

Pour réaliser une vitrine, nous avons construit un graphique dynamique sur la plateforme Latenode qui se met à jour chaque semaine avec de nouvelles informations. Tout cela est réalisé à l'aide d'un nœud JavaScript et de variables globales.

Cela ressemble à ceci. Mais que faire si nous voulons partager ce graphique avec quelqu'un d'autre chaque semaine lorsqu'il est mis à jour ? Pour le rendre réel, nous pouvons demander à Headless Browsers de nous aider à faire une capture d'écran et à envoyer le fichier à l'endroit où il doit aller.

Le nœud Navigateur sans tête vous renvoie une capture d'écran au format base64. Ensuite, le nœud JavaScript vous permet de le transformer selon les besoins de votre système ultérieur pour obtenir ce fichier.

👉Pour personnaliser ce modèle prêt à l'emploi et commencer à faire des captures d'écran avec envoi ultérieur à votre chat Telegram, suivez ces étapes :

• Copiez le modèle de notre galerie.
• Dans le nœud JavaScript, remplacez le jeton Telegram Bot et le ChatID par vos données.
• Déployez votre scénario et appelez l’URL du webhook manuellement.

Pour aller plus loin  

Dans cet article, nous avons découvert la puissance des navigateurs sans tête sur Latenode, un outil puissant pour les automatisations low-code. Ces navigateurs, sans l'interface habituelle de Chrome ou Firefox, offrent un moyen rapide et basé sur des scripts d'utiliser le Web. Ils sont parfaits pour des tâches telles que le remplissage de formulaires, la récupération de données à partir de sites Web et les tests automatisés, en particulier sur des sites complexes et dynamiques.

Ce qui distingue notre nœud Headless Browser, c'est sa facilité d'utilisation dans un environnement low-code. Cela signifie que même ceux qui n'ont pas de connaissances approfondies en codage peuvent toujours utiliser ses capacités. De l'automatisation de tâches simples à la gestion d'interactions Web complexes, Headless Browser est un outil robuste pour divers besoins.

Bonne utilisation de Latenode, et pour toute question sur la plateforme, rejoignez notre communauté Discord des experts du low-code.

Pour une représentation visuelle de l'automatisation du navigateur sans tête, regardez le didacticiel Latenode sur l'automatisation low-code à l'aide de notre nœud de navigateur sans tête prêt à l'emploi sur notre plateforme.

Articles Liés:

• JavaScript + IA : un duo parfait pour les automatisations low-code
• Créer une intégration avec n’importe quelle application : deux méthodes
• Première offre à vie pour les lève-tôt !