Automatiseren zonder API: Headless Browser op low-code platform Latenode

Hallo, ik ben Daniel van Latenode 👋

Vandaag bespreken we een automatiseringstool die niet veel gebruikt wordt door no-code experts. Bovendien is deze functie, die afkomstig is van Latenode, niet beschikbaar op platforms zoals Zapier, Make en andere, maar het heeft een groot potentieel voor het verbeteren van je workflows.

Trouwens, elke keer dat je op het web surft via ChatGPT, gebruik je het! Het is een Browser zonder hoofd.

Uitleg headless browser

Laten we een stapje terug doen en de wereld van de automatisering van bedrijfsprocessen bekijken. In de meeste gevallen gebruiken bedrijven slechts twee automatiseringsmethoden die volledig aan hun behoeften voldoen:

1. Automatiseer processen via API.

Dit is een solide aanpak voor het bouwen van gegevensstromen tussen verschillende applicaties die een openbare API hebben. Of je gaat zelf naar de hub voor ontwikkelaars en zoekt uit hoe je een juiste API-aanroep doet om precies te doen wat je nodig hebt, of je vraagt de JavaScript AI Assistant op Latenode om binnen enkele seconden een integratie te bouwen met elke app die je nodig hebt door simpelweg je verzoek te beschrijven.

Helaas hebben niet alle acties op het web een onderliggende API-infrastructuur om dezelfde dingen automatisch te doen. Dat is waar bedrijven vertrouwen op de tweede methode die geen API endpoints nodig heeft.

2. Headless Browser om te automatiseren zonder API's

Dit artikel gaat er helemaal over, dus neem plaats, ontspan en laten we in een nieuw automatiseringsveld duiken dat later je rug zal bedekken.

Wat is een browser zonder hoofd?

Stel je een gewone internetbrowser voor zoals Chrome of Firefox. Verwijder nu alle zichtbare onderdelen van de interface - knoppen, adresbalk, bladwijzers. Wat blijft er over? De "hersenen" die over het internet kunnen navigeren, websites kunnen openen en ermee kunnen communiceren. Dit noemen we een "headless" browser. Het kan verschillende taken op websites automatiseren zonder visuele inhoud weer te geven en kan dit razendsnel doen. Een script, niet een mens, bestuurt het proces.

Een cruciaal onderdeel van de Headless Browser is de mogelijkheid om JavaScript aangepaste scripts uit te voeren. Hiermee kun je gebruikersacties simuleren zoals het klikken op knoppen, het invullen van formulieren en het navigeren door het menu van een site. Dit is cruciaal voor taken als geautomatiseerd testen, web scraping en het automatiseren van terugkerende taken op webportalen.

Hoe werkt een Headless Browser?

Het werken met een headless browser omvat een paar belangrijke stappen en het is essentieel om deze te begrijpen om de mogelijkheden ervan te gaan gebruiken:

1. URL om te bladeren: Eerst moet je de URL opgeven van de webpagina waarmee je wilt communiceren. Dit is hetzelfde als het invoeren van een websiteadres in een gewone browser, maar hier doe je het via een script.
2. Selecties om te navigeren: Selectors zijn cruciaal om de headless browser te vertellen met welke elementen op een webpagina je wilt communiceren. Dit kunnen CSS selectors, XPath of JavaScript commando's zijn. Hiermee kun je specifieke elementen aanwijzen, zoals knoppen, tekstvelden, afbeeldingen, enzovoort.
3. Extra parameters: Afhankelijk van je taak moet je misschien tekst invoeren in formulieren, bestanden uploaden of op knoppen klikken. Deze acties worden afgehandeld door scripts die je schrijft, die aangeven wat er moet gebeuren en wanneer.

In principe moet je de Headless Browser vertellen waar hij heen moet gaan, wat hij moet vinden, waar hij moet klikken, welke tekst hij moet typen of kopiëren, enzovoort.

Wat kan een browser zonder hoofd doen?

Er zijn een aantal basisacties die een Headless Browser onder jouw controle ondersteunt:

• Geautomatiseerde navigatie en interactie: Headless browsers kunnen taken uitvoeren zoals formulieren invullen, op links klikken, gegevens schrapen en zelfs screenshots maken van webpagina's.
• Gegevens extraheren en verwerken: Vaak is het doel om gegevens van webpagina's te extraheren. Headless browsers kunnen de HTML en tekst van een pagina ontleden en de informatie die je nodig hebt extraheren, die vervolgens in je toepassing kan worden gebruikt of kan worden opgeslagen voor later gebruik.
• Aangepaste scripts uitvoeren: Omdat headless browsers JavaScript kunnen uitvoeren, kun je aangepaste scripts uitvoeren om op complexe manieren met webpagina's te interageren, zoals dynamische inhoud verwerken of authenticatie afhandelen.

Voor welke doeleinden kan ik een Headless Browser gebruiken?

Naast de basisacties bieden Headless Browsers een reeks geavanceerde acties die ongelooflijk nuttig kunnen zijn. Om het echt te maken, moet je de Headless browser integreren in low-code scenario's op Latenode. Daarmee kun je Headless Browsers implementeren in de volgende use-cases:

Gebruikssituaties van Headless Browser

Laten we nu naar bepaalde use-cases springen die je eenvoudig zelf kunt copy-pasten en de ontsteking van Headless Browser kunt hotwire, zelfs zonder eerdere ervaring.

Use Case #1: Zoeken op het web zoals GPT-plugins doen met Headless Browser

Leuk weetje: als je ChatGPT gebruikt en het vraagt om op het web te browsen, komt er een Headless Browser in beeld! Laten we een MVP bouwen van iets vergelijkbaars en de Headless Browser vragen om een zoekopdracht voor ons te maken.

Hier volgt een kort overzicht van het volgende scenario:

• De Webhook URL is op zoek naar een postverzoek met een zoekopdracht.
• Headless Browser krijgt dat verzoek, opent Google en geeft titels van de eerste 10 zoekposities.
• Webhook antwoord stuurt het resultaat terug naar de webhook.

Laten we wat dieper duiken in de headless browser code, waar we gegevens van de webhook in kaart brengen, zodat onze Headless Browser node weet waar hij precies naar moet zoeken in Google.

Daarna maken we een POST-verzoek en sturen we onze zoekopdracht als een 'Search' Key in de Body. Binnen een paar seconden kunnen we het resultaat zien van de uitvoering van het scenario.

👉Wil je het zelf testen? Kopieer de kant-en-klare sjabloon en surf op het web met Headless Browser!

Use Case #2: Gegevens van webpagina's parsen met Headless Browser

Nu meteen gegevens van websites parsen! Het kan zo breed worden gebruikt: van realtime synchronisatie van prijzen van marktplaatsen tot het in bulk scrapen van SEO-elementen voor verdere analyse.

Eerste voorbeeld: hoe zit het met het schrapen van alle titels (H1, H2, H3) van Latenode's landingspagina? Laten we het doen!

• Het scenario ziet er hetzelfde uit:
• De Webhook luistert naar een URL om te parsen.
• Headless Browser navigeert naar de opgegeven URL, zoekt en haalt H1, H2, H3 Titels op.
• Webhook Response toont de lijst met titels als resultaat van het aanroepen van de Webhook trigger.

Vervolgens doen we opnieuw een POST-verzoek naar ons scenario en sturen we de website om te parsen in de body-sectie zoals hieronder getoond:

Als resultaat krijgen we de lijst met H1, H2 en H3 titels van de webpagina die we naar de browser zonder kop hebben gestuurd.

Opmerking: Wat belangrijk is, is dat je met die info kunt werken binnen het Latenode scenario voor verdere gegevenstransformatie of het versturen van info naar waar je maar wilt.

Tweede voorbeeld: als je geen API hebt voor de website waar je cruciale informatie vandaan moet halen, zoals een wisselkoers van Amerikaanse dollar en euro naar Engelse pond, gebruik dan een browser zonder kop om er direct toegang toe te krijgen.

Door nog een POST-verzoek te doen met twee valuta's, krijg je onvermijdelijk twee wisselkoersen als antwoord van het scenario Latenode .

Use Case #3: Formulieren invullen met Headless Browser

Nu verschuiven we onze aandacht van zoeken en ophalen naar vullen. Hoe zit het met het automatisch invullen van een webformulier zonder API?

• Geef de headless browser de link naar het webformulier.
• Geef het tekst om in te voeren.
• Geef het pad op naar het HTML, CSS of XPath element om je tekst in te typen.

De code voor het invullen van zo'n eenvoudige HTML-code ziet er als volgt uit:

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

Use Case #4: Screenshots maken met Headless Browser

Last but not least: maak screenshots van alles wat je op het web vindt.

Om een showcase te maken, bouwen we een dynamische grafiek op het Latenode platform die zichzelf elke week bijwerkt met nieuwe informatie. Dit alles met behulp van een JavaScript-node en globale variabelen.

Het ziet er zo uit. Maar wat als we deze grafiek elke week met iemand anders willen delen als hij wordt bijgewerkt? Om het echt te maken, kunnen we Headless Browsers om hulp vragen om een screenshot te maken en het bestand te sturen waar het naartoe moet.

Het knooppunt Headless Browser stuurt je een schermafbeelding in base64 formaat. Daarna kun je het met het knooppunt JavaScript transformeren zoals je verdere systeem nodig heeft om dit bestand te krijgen.

👉Om deze kant-en-klare sjabloon aan te passen en te beginnen met het maken van schermafbeeldingen met verdere verzending naar je Telegram chat, volg je deze stappen:

• Kopieer de sjabloon uit onze galerij.
• Vervang in het JavaScript-knooppunt de Telegram Bot Token & ChatID door jouw gegevens.
• Implementeer je scenario en roep de webhook URL handmatig aan.

Conclusie 

In dit artikel hebben we de kracht van Headless Browsers op Latenode blootgelegd, een krachtig hulpmiddel voor low-code automatiseringen. Deze browsers, zonder de gebruikelijke interface van Chrome of Firefox, bieden een snelle, script-gestuurde manier om het web te gebruiken. Ze zijn perfect voor taken als het invullen van formulieren, het ophalen van gegevens van websites en geautomatiseerd testen, vooral op complexe, dynamische sites.

Wat onze Headless Browser node zo bijzonder maakt, is het gebruiksgemak in een low-code omgeving. Dit betekent dat zelfs mensen zonder diepgaande kennis van codering nog steeds gebruik kunnen maken van de mogelijkheden. Van het automatiseren van eenvoudige taken tot het afhandelen van complexe webinteracties, Headless Browser is een robuuste tool voor verschillende behoeften.

Veel plezier met Latenode en voor vragen over het platform, word lid van onze Discord gemeenschap van low-code experts.

Bekijk voor een visuele weergave van Headless Browser Automation de Latenode tutorial over low-code automatisering met behulp van onze kant-en-klare Headless Browser node op ons platform.

Gerelateerde artikelen:

• JavaScript + AI: een perfect duo voor low-code automatiseringen
• Maak integratie met elke app: Twee methoden
• Eerste levenslange deal voor vroege vogels!