Bonjour, ici Daniel de Latenode 👋
Aujourd’hui, nous allons parler d’un outil d’automatisation peu utilisé parmi les experts no-code. De plus, cette fonctionnalité native de Latenode n’est pas disponible sur des plateformes comme Zapier, Make et d’autres, mais elle possède un fort potentiel pour améliorer vos workflows.
D’ailleurs, chaque fois que vous naviguez sur le Web via ChatGPT, vous l’utilisez ! Il s’agit d’un navigateur headless.
Essayez le workflow « Make Screenshot and Send To Telegram » à l’aide d’un navigateur headless
Explication du navigateur headless
Prenons un peu de recul et observons le monde de l’automatisation des processus métier. Dans la plupart des cas, les entreprises utilisent seulement deux approches d’automatisation qui répondent pleinement à leurs besoins :
- Automatiser les processus via une 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 consulter vous-même l’espace développeurs et déterminer comment effectuer l’appel API approprié pour réaliser exactement ce dont vous avez besoin, soit demander à l’assistant IA JavaScript de Latenode de créer en quelques secondes une intégration avec n’importe quelle application, simplement en décrivant votre demande.
Malheureusement, toutes les actions sur le Web ne disposent pas d’une infrastructure API sous-jacente permettant de réaliser automatiquement les mêmes opérations. C’est là que les entreprises s’appuient sur la seconde méthode, qui ne requiert aucun endpoint API.
- Utiliser un navigateur headless pour automatiser sans API
Cet article lui est entièrement consacré : installez-vous confortablement et plongeons dans un nouveau domaine de l’automatisation qui vous couvrira par la suite.
Qu’est-ce qu’un navigateur headless ?
Imaginez un navigateur Internet classique tel que Chrome ou Firefox. Retirez maintenant tous les éléments visibles de l’interface : boutons, barre d’adresse, favoris. Que reste-t-il ? Le « cerveau » capable de naviguer sur Internet, d’ouvrir des sites web et d’interagir avec eux. C’est ce que nous appelons un navigateur « headless ». Il peut automatiser diverses tâches sur des sites web sans afficher de contenu visuel, et le faire à une vitesse fulgurante. Le processus est contrôlé par un script, et non par un humain.
Une composante essentielle du navigateur headless est sa capacité à exécuter des scripts JavaScript personnalisés. Cela vous permet de simuler des actions utilisateur, comme cliquer sur des boutons, remplir des formulaires et naviguer dans le menu d’un site. Cette capacité est indispensable pour des tâches telles que les tests automatisés, le scraping web et l’automatisation de tâches répétitives sur des portails web.
Comment fonctionne un navigateur headless ?
L’utilisation d’un navigateur headless implique quelques étapes clés ; il est essentiel de les comprendre pour exploiter son potentiel :
- URL à parcourir : vous devez d’abord spécifier l’URL de la page web avec laquelle vous souhaitez interagir. C’est comme saisir l’adresse d’un site dans un navigateur classique, mais ici, vous le faites via un script.
- Sélecteurs de navigation : 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 XPath ou de commandes JavaScript. Ils vous permettent de cibler des éléments spécifiques tels que des boutons, des champs de texte, des images, etc.
- Paramètres supplémentaires : selon votre tâche, vous devrez peut-être saisir du texte dans des formulaires, téléverser des fichiers ou cliquer sur des boutons. Ces actions sont gérées par des scripts que vous écrivez, lesquels précisent quoi faire et à quel moment.
En résumé, vous devez indiquer au navigateur headless où aller, quoi trouver, où cliquer, quel texte saisir ou copier, et ainsi de suite.
Que peut faire un navigateur headless ?
Voici quelques actions de base qu’un navigateur headless peut effectuer sous votre contrôle :
- Navigation et interaction automatisées : les navigateurs headless peuvent réaliser des tâches comme 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 : l’objectif consiste souvent à extraire des données de pages web. Les navigateurs headless peuvent analyser le HTML et le texte d’une page, puis extraire les informations dont vous avez besoin, afin de les utiliser dans votre application ou de les stocker pour une utilisation ultérieure.
- Exécution de scripts personnalisés : puisque les navigateurs headless peuvent exécuter du JavaScript, vous pouvez lancer des scripts personnalisés pour interagir de manière complexe avec des pages web, par exemple pour gérer du contenu dynamique ou l’authentification.
À quelles fins puis-je utiliser un navigateur headless ?
Compte tenu de ces actions de base, les navigateurs headless offrent un éventail de fonctionnalités avancées extrêmement utiles. Pour les concrétiser, vous devez intégrer le navigateur headless dans des workflows low-code sur Latenode. Cela vous permet d’utiliser un navigateur headless dans les cas d’usage suivants :
| Fonctionnalité | Description |
|---|---|
| Tests automatisés | Utilisez le navigateur headless pour tester automatiquement des applications web et vous assurer qu’elles fonctionnent correctement sur différents navigateurs et appareils. |
| Exploration et scraping web | Le navigateur headless est idéal pour l’exploration et le scraping web, ce qui vous permet de collecter efficacement de grandes quantités de données sur le Web. |
| Surveillance des performances | Les navigateurs headless peuvent vous aider à surveiller les performances d’applications web en suivant les temps de chargement, la réactivité et d’autres indicateurs clés. |
| Gestion des sites AJAX et riches en JavaScript | Le navigateur headless peut gérer les sites utilisant fortement AJAX et JavaScript, tout comme un navigateur classique, ce qui le rend idéal pour les applications web dynamiques. |
Cas d’usage du navigateur headless
Passons maintenant à des cas d’usage concrets que vous pouvez simplement copier-coller pour démarrer vous-même un navigateur headless, même sans expérience préalable.
Cas d’usage n°1 : rechercher sur le Web comme les plugins GPT avec un navigateur headless
Fait amusant : lorsque vous utilisez ChatGPT et lui demandez de naviguer sur le Web, un navigateur headless entre en jeu ! Créons un MVP de quelque chose de similaire et demandons au navigateur headless d’effectuer une requête de recherche pour nous.
Voici un aperçu rapide du workflow suivant :
- L’URL du webhook attend une requête POST contenant une demande de recherche.
- Le navigateur headless reçoit cette demande, ouvre Google et renvoie les titres des 10 premiers résultats de recherche.
- La réponse du webhook renvoie le résultat au webhook.
Examinons un peu plus en détail le code du navigateur headless, où nous mappons les données du webhook afin que notre nœud Navigateur headless sache exactement ce qu’il doit rechercher dans Google.
Ensuite, effectuons une requête POST et envoyons notre requête de recherche sous forme de clé « Search » dans le corps de la requête. En quelques secondes seulement, nous pouvons voir le résultat de l’exécution du workflow.
👉Vous souhaitez le tester vous-même ? Copiez le modèle prêt à l’emploi et naviguez sur le Web avec le navigateur headless !
Essayez le workflow « Make Screenshot and Send To Telegram » à l’aide d’un navigateur headless
Cas d’usage n°2 : analyser les données de pages web avec un navigateur headless
Passons maintenant directement à l’analyse des données issues de sites web ! Les possibilités d’utilisation sont très larges : de la synchronisation en temps réel des prix depuis des marketplaces au scraping en masse d’éléments SEO pour une analyse ultérieure.
Premier exemple : que diriez-vous d’extraire tous les titres (H1, H2, H3) de la landing page de Latenode ? Allons-y !
- Le workflow reste le même :
- Le webhook écoute une URL à analyser.
- Le navigateur headless accède à l’URL fournie, recherche et récupère les titres H1, H2 et H3.
- La réponse du webhook affiche la liste des titres comme résultat de l’appel du déclencheur webhook.
Nous effectuons ensuite à nouveau une requête POST vers notre workflow et envoyons le site web à analyser dans la section du corps de la requête, comme illustré ci-dessous :
Nous obtenons ainsi la liste des titres H1, H2 et H3 de la page web envoyée au navigateur headless.
Remarque : vous pouvez utiliser ces informations dans le workflow Latenode pour toute transformation ultérieure des données ou pour les envoyer là où vous en avez besoin.
Deuxième exemple : si vous ne disposez pas d’une API pour le site web depuis lequel 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 headless pour y accéder directement.
En effectuant une nouvelle requête POST avec deux devises, vous obtenez inévitablement deux taux de change en réponse du workflow Latenode.
Cas d’usage n°3 : remplir des formulaires avec un navigateur headless
Nous passons maintenant de la recherche et de l’extraction au remplissage. Que diriez-vous de remplir automatiquement un formulaire web, sans API ?
- Fournissez au navigateur headless le lien vers le formulaire web.
- Donnez-lui le texte à saisir.
- Indiquez le chemin vers l’élément HTML, CSS ou XPath dans lequel saisir votre texte.
Créez des intégrations illimitées avec des branches, plusieurs déclencheurs arrivant dans un même nœud, utilisez le low-code ou écrivez votre propre code avec AI Copilot.
Le code permettant de remplir un formulaire 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’usage n°4 : réaliser des captures d’écran avec un navigateur headless
Enfin, vous pouvez réaliser des captures d’écran de tout ce que vous trouvez sur le Web.
Pour présenter cette fonctionnalité, nous avons créé un graphique dynamique sur la plateforme Latenode, qui se met à jour chaque semaine avec de nouvelles informations. Le tout à l’aide d’un nœud JavaScript et de variables globales.
Voici à quoi il ressemble. Mais que se passe-t-il si nous souhaitons partager ce graphique avec quelqu’un chaque semaine après sa mise à jour ? Pour y parvenir, nous pouvons demander l’aide de navigateurs headless afin de réaliser une capture d’écran et d’envoyer le fichier là où il doit être envoyé.
Le nœud Navigateur headless vous renvoie une capture d’écran au format base64. Ensuite, le nœud JavaScript vous permet de la transformer selon les besoins de votre système afin d’obtenir ce fichier.
Recréez ce workflow avec Latenode.
👉Pour personnaliser ce modèle prêt à l’emploi et commencer à réaliser des captures d’écran avant de les envoyer à votre chat Telegram, suivez ces étapes :
- Copiez le modèle depuis notre galerie.
- Dans le nœud JavaScript, remplacez le jeton du bot Telegram et le ChatID par vos informations.
- Déployez votre workflow et appelez manuellement l’URL du webhook.
Conclusion
Dans cet article, nous avons exploré la puissance des navigateurs headless sur Latenode, un outil performant pour les automatisations low-code. Ces navigateurs, dépourvus de l’interface habituelle de Chrome ou Firefox, offrent une manière rapide et pilotée par 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 sur des sites web et les tests automatisés, en particulier sur des sites complexes et dynamiques.
Ce qui distingue notre nœud Navigateur headless, c’est sa simplicité d’utilisation dans un environnement low-code. Cela signifie que même les personnes ne possédant pas de solides connaissances en programmation peuvent exploiter ses capacités. De l’automatisation de tâches simples à la gestion d’interactions web complexes, le navigateur headless constitue un outil robuste pour répondre à divers besoins.
Profitez de Latenode et, pour toute question concernant la plateforme, rejoignez notre communauté Discord d’experts low-code.
Pour une présentation visuelle de l’automatisation avec navigateur headless, regardez le tutoriel Latenode sur l’automatisation low-code à l’aide de notre nœud Navigateur headless prêt à l’emploi sur notre plateforme.
