Automatiser sans API : Navigateur sans tête sur plateforme low-code Latenode

Bonjour, c'est Daniel de Latenode 👋

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

Au fait, chaque fois que tu navigues sur le Web via ChatGPT, tu l'utilises ! 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 d'affaires. Dans la plupart des cas, les entreprises n'utilisent que deux approches d'automatisation qui répondent pleinement à leurs besoins :

1. Automatise les processus par le biais de l'API.

Il s'agit d'une approche solide pour construire des flux de données entre différentes applications qui ont une API publique. Soit tu te rends toi-même dans le hub des développeurs et tu trouves comment faire un appel API correct pour faire précisément ce dont tu as besoin, soit tu demandes à l'assistant JavaScript AI sur Latenode de construire une intégration avec n'importe quelle appli dont tu as besoin en quelques secondes en décrivant simplement ta demande.

Malheureusement, toutes les actions sur le web n'ont pas d'infrastructure API sous-jacente pour faire les mêmes choses automatiquement. C'est là que les entreprises s'appuient sur la deuxième méthode qui ne nécessite aucun point d'extrémité d'API.

2. Navigateur sans tête pour automatiser sans API

Cet article en parle, alors prends ton siège, détends-toi, et plongeons dans un nouveau domaine d'automatisation qui te couvrira plus tard le dos.

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

Imagine un navigateur Internet ordinaire comme Chrome ou Firefox. Maintenant, enlève toutes les parties visibles de l'interface - les boutons, la barre d'adresse, les signets. Qu'est-ce qui reste ? Les "cerveaux" qui peuvent naviguer sur internet, ouvrir des sites web et interagir avec eux. C'est ce qu'on appelle 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 fulgurante. C'est un script, et non un humain, qui contrôle le processus.

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

Comment fonctionne un navigateur sans tête ?

Le fonctionnement d'un navigateur sans tête implique quelques étapes clés, et il est essentiel de les comprendre pour commencer à utiliser son potentiel :

1. URL à parcourir: Tout d'abord, tu dois spécifier l'URL de la page web avec laquelle tu veux interagir. Cela revient à saisir l'adresse d'un site Web dans un navigateur ordinaire, mais ici, tu le fais par l'intermédiaire d'un script.
2. Des sélecteurs pour naviguer: Les sélecteurs sont essentiels pour indiquer au navigateur headless les éléments d'une page Web avec lesquels tu veux interagir. Il peut s'agir de sélecteurs CSS, XPath ou de commandes JavaScript. Ils te permettent de repérer des éléments spécifiques comme des boutons, des champs de texte, des images, etc.
3. Paramètres supplémentaires: En fonction de ta tâche, tu peux avoir besoin de saisir du texte dans des formulaires, de télécharger des fichiers ou de cliquer sur des boutons. Ces actions sont gérées par des scripts que tu écris et qui spécifient ce qu'il faut faire et quand il faut le faire.

En gros, tu dois dire au Headless Browser où aller, quoi trouver, où cliquer, quel texte taper ou copier, et ainsi de suite.

Que peut faire un navigateur sans tête ?

Il y a quelques actions de base qu'un navigateur sans tête prend en charge sous ton 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, gratter des données et même faire des captures d'écran de pages web.
• Extraction et traitement des données: Souvent, l'objectif est d'extraire des données des pages Web. Les navigateurs sans tête peuvent analyser le HTML et le texte d'une page et extraire les informations dont tu as besoin, qui peuvent ensuite être utilisées dans ton application ou stockées pour un usage ultérieur.
• Exécution de scripts personnalisés: Comme les navigateurs sans tête peuvent exécuter JavaScript, tu peux 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 traitant l'authentification.

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

Si l'on considère les actions de base, les navigateurs Headless offrent une gamme d'actions avancées qui peuvent être incroyablement utiles. Pour que cela devienne une réalité, tu dois intégrer le navigateur Headless dans des scénarios à code bas sur Latenode. Cela te permet de mettre en œuvre le 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 tu peux simplement copier-coller et mettre à jour toi-même l'allumage de Headless Browser, même si tu n'as pas d'expérience préalable.

Cas d'utilisation #1 : Rechercher sur le Web comme le font les plugins GPT avec Headless Browser

Fait amusant : lorsque tu utilises ChatGPT et que tu lui demandes de naviguer sur le Web, un navigateur sans tête entre en jeu ! Construisons un MVP de quelque chose de similaire et demandons au Headless Browser de faire une recherche pour nous.

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

• L'URL du Webhook recherche une demande de post 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 demande POST et envoyons notre requête de recherche sous la forme d'une clé 'Search' dans le corps de la requête. En quelques secondes, nous sommes en mesure de voir le résultat de l'exécution du scénario.

👉Tu veux le tester par toi-même ? Copie le modèle prêt à l'emploi et navigue 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 ! Il peut être utilisé de façon très large : de la synchronisation en temps réel des prix des places de marché au scraping en masse des éléments de référencement pour une analyse plus poussée.

Premier exemple: que dirais-tu de récupérer tous les titres (H1, H2, H3) de la page d'atterrissage de Latenode? Allons-y !

• Le scénario est le même :
• Le Webhook est à l'écoute d'une URL à analyser.
• Headless Browser navigue jusqu'à l'URL fourni, trouve et récupère les titres H1, H2, H3.
• La réponse Webhook affiche la liste des titres à la suite de l'appel au déclencheur Webhook.

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

Par conséquent, 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 tu peux utiliser ces informations dans le scénario Latenode pour transformer d'autres données ou les envoyer là où tu en as besoin.

Deuxième exemple: si tu n'as pas d'API pour le site web à partir duquel tu dois récupérer certaines informations cruciales, comme un taux de change du dollar américain et de l'euro vers la livre anglaise - utilise un navigateur sans tête pour y accéder directement.

En faisant une autre demande POST avec deux devises, tu obtiendras inévitablement deux taux de change comme réponse du scénario Latenode .

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

Nous passons maintenant de la recherche et de l'extraction au remplissage. Qu'en est-il du remplissage automatique d'un formulaire Web sans API ?

• Fournis au navigateur sans tête le lien vers le formulaire web.
• Donne-lui du texte à saisir.
• Indique le chemin d'accès à l'élément HTML, CSS ou XPath pour taper ton texte.

Le code permettant de 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 #4 : Faire des captures d'écran avec Headless Browser

Dernier point, mais non le moindre, faire des captures d'écran de tout ce que tu peux trouver sur le web.

Pour faire une vitrine, nous construisons un graphique dynamique sur la plateforme Latenode qui se met à jour chaque semaine avec de nouvelles infos. Tout cela à l'aide d'un nœud JavaScript et de variables globales.

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

Le nœud Headless Browser te renvoie une capture d'écran au format base64. Après cela, le nœud JavaScript te permet de la transformer comme ton autre système en a besoin pour obtenir ce fichier.

👉Pour personnaliser ce modèle prêt à l'emploi et commencer à faire des captures d'écran avec envoi supplémentaire sur ton chat Telegram, suis ces étapes :

• Copie le modèle de notre galerie.
• Dans le nœud JavaScript, remplace le token du bot Telegram et le ChatID par tes données.
• Déploie ton scénario et appelle l'URL du webhook manuellement.

Conclusion 

Dans cet article, nous avons découvert la puissance des navigateurs sans tête sur Latenode, un outil puissant pour les automatisations à code bas. Ces navigateurs, sans l'interface habituelle de Chrome ou de Firefox, offrent une façon rapide et axée sur les scripts d'utiliser le web. Ils sont parfaits pour des tâches telles que remplir des formulaires, saisir des données sur des sites Web et effectuer des 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 à faible code. Cela signifie que même ceux qui n'ont pas de connaissances approfondies en matière de codage peuvent tout de même utiliser ses capacités. De l'automatisation de tâches simples à la gestion d'interactions web complexes, Headless Browser est un outil robuste qui répond à des besoins variés.

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

Pour une représentation visuelle de l'automatisation du navigateur sans tête, regarde le tutoriel Latenode sur l'automatisation en code bas à l'aide de notre nœud de navigateur sans tête prêt à l'emploi sur notre plateforme.

Articles connexes :

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