Automatisieren ohne API: Headless Browser auf Low-Code-Plattform Latenode

Hallo, ich bin Daniel von Latenode 👋.

Heute werden wir ein Automatisierungstool besprechen, das unter No-Code-Experten nicht weit verbreitet ist. Außerdem ist diese Funktion, die in Latenode enthalten ist, nicht auf Plattformen wie Zapier, Make und anderen verfügbar, aber sie hat großes Potenzial, deine Arbeitsabläufe zu verbessern.

Übrigens: Jedes Mal, wenn du über ChatGPT im Internet surfst, benutzt du es! Es ist ein Headless Browser.

Erläuterung zum Headless Browser

Treten wir einen Schritt zurück und schauen uns die Welt der Geschäftsprozessautomatisierung an. In den meisten Fällen nutzen Unternehmen nur zwei Automatisierungsansätze, die ihre Bedürfnisse vollständig erfüllen:

1. Automatisiere Prozesse über API.

Dies ist ein solider Ansatz, um Datenflüsse zwischen verschiedenen Anwendungen zu erstellen, die über eine öffentliche API verfügen. Entweder du gehst selbst zum Entwickler-Hub und findest heraus, wie du einen korrekten API-Aufruf machst, um genau das zu tun, was du brauchst, oder du bittest den JavaScript-KI-Assistenten auf Latenode , in Sekundenschnelle eine Integration mit jeder beliebigen App zu erstellen, indem du einfach deine Anfrage beschreibst.

Leider verfügen nicht alle Aktionen im Web über eine API-Infrastruktur, um die gleichen Dinge automatisch zu erledigen. Deshalb verlassen sich Unternehmen auf die zweite Methode, die keine API-Endpunkte benötigt.

2. Headless Browser zum Automatisieren ohne APIs

In diesem Artikel dreht sich alles darum. Also nimm Platz, entspann dich und lass uns in ein neues Automatisierungsfeld eintauchen, das dir später den Rücken stärken wird.

Was ist ein Headless Browser?

Stell dir einen normalen Internetbrowser wie Chrome oder Firefox vor. Entferne nun alle sichtbaren Teile der Benutzeroberfläche - Schaltflächen, Adressleiste, Lesezeichen. Was bleibt übrig? Das "Gehirn", das im Internet navigieren, Websites öffnen und mit ihnen interagieren kann. Das nennen wir einen "kopflosen" Browser. Er kann verschiedene Aufgaben auf Websites automatisieren, ohne dass visuelle Inhalte angezeigt werden, und das in rasender Geschwindigkeit. Ein Skript, nicht ein Mensch, steuert den Prozess.

Ein wichtiger Bestandteil des Headless Browsers ist die Fähigkeit, eigene JavaScript-Skripte auszuführen. Damit kannst du Benutzeraktionen wie das Anklicken von Schaltflächen, das Ausfüllen von Formularen und das Navigieren durch das Menü einer Website simulieren. Das ist wichtig für Aufgaben wie automatisierte Tests, Web Scraping und die Automatisierung von sich wiederholenden Aufgaben auf Webportalen.

Wie funktioniert ein Headless Browser?

Der Betrieb eines Headless Browsers erfordert einige wichtige Schritte, die du unbedingt verstehen musst, um sein Potenzial nutzen zu können:

1. URL zum Durchsuchen: Zuerst musst du die URL der Webseite angeben, mit der du interagieren möchtest. Das ist so, als würdest du die Adresse einer Website in einem normalen Browser eingeben, aber hier machst du das über ein Skript.
2. Selektoren zum Navigieren: Selektoren sind wichtig, um dem Headless-Browser mitzuteilen, mit welchen Elementen auf einer Webseite du interagieren willst. Das können CSS-Selektoren, XPath- oder JavaScript-Befehle sein. Sie ermöglichen es dir, bestimmte Elemente wie Schaltflächen, Textfelder, Bilder usw. zu markieren.
3. Zusätzliche Parameter: Je nach deiner Aufgabe musst du vielleicht Text in Formulare eingeben, Dateien hochladen oder auf Schaltflächen klicken. Diese Aktionen werden von Skripten ausgeführt, die du schreibst und in denen du festlegst, was zu tun ist und wann es geschehen soll.

Grundsätzlich solltest du dem Headless Browser sagen, wo er hingehen soll, was er finden soll, wo er klicken soll, welchen Text er eingeben oder kopieren soll und so weiter.

Was kann ein Headless Browser tun?

Es gibt einige grundlegende Aktionen, die ein Headless Browser unter deiner Kontrolle unterstützt:

• Automatisierte Navigation und Interaktion: Headless-Browser können Aufgaben wie das Ausfüllen von Formularen, das Anklicken von Links, das Scraping von Daten und sogar das Erstellen von Screenshots von Webseiten übernehmen.
• Datenextraktion und -verarbeitung: Oft ist es das Ziel, Daten aus Webseiten zu extrahieren. Headless-Browser können den HTML-Code und den Text einer Seite analysieren und die benötigten Informationen extrahieren, die dann in deiner Anwendung verwendet oder zur späteren Verwendung gespeichert werden können.
• Benutzerdefinierte Skripte ausführen: Da Headless-Browser JavaScript ausführen können, kannst du benutzerdefinierte Skripte ausführen, um auf komplexe Weise mit Webseiten zu interagieren, z. B. bei der Handhabung dynamischer Inhalte oder bei der Authentifizierung.

Für welche Zwecke kann ich einen Headless Browser verwenden?

Abgesehen von den grundlegenden Aktionen bieten Headless Browser eine Reihe von erweiterten Aktionen, die unglaublich nützlich sein können. Um sie zu verwirklichen, musst du den Headless Browser in Low-Code-Szenarien auf Latenode integrieren. Damit kannst du den Headless Browser in den folgenden Anwendungsfällen einsetzen:

Anwendungsfälle von Headless Browser

Kommen wir nun zu bestimmten Anwendungsfällen, bei denen du die Zündung des Headless Browsers auch ohne Vorkenntnisse einfach durch Kopieren und Einfügen selbst in Gang setzen kannst.

Anwendungsfall Nr. 1: Suche im Web wie GPT-Plugins mit Headless Browser

Spaßfakt: Wenn du ChatGPT benutzt und es bittest, das Web zu durchsuchen, kommt ein Headless Browser ins Spiel! Lass uns ein MVP von etwas Ähnlichem bauen und den Headless Browser bitten, eine Suchanfrage für uns zu stellen.

Hier ist ein kurzer Überblick über das folgende Szenario:

• Die Webhook-URL sucht nach einer Post-Anfrage mit einer Suchanfrage.
• Headless Browser erhält diese Anfrage, öffnet Google und liefert die Titel der ersten 10 Suchpositionen.
• Die Webhook-Antwort sendet das Ergebnis an den Webhook zurück.

Tauchen wir etwas tiefer in den Code des Headless Browsers ein, wo wir die Daten aus dem Webhook abbilden, damit unser Headless Browser Node weiß, wonach genau er in Google suchen soll.

Danach stellen wir eine POST-Anfrage und senden unsere Suchanfrage als "Search"-Schlüssel im Body. Schon nach wenigen Sekunden können wir das Ergebnis der Ausführung des Szenarios sehen.

👉Willst du es selbst testen? Kopiere die gebrauchsfertige Vorlage und surfe mit dem Headless Browser im Internet!

Anwendungsfall Nr. 2: Daten von Webseiten mit dem Headless Browser parsen

Jetzt direkt zum Parsen von Daten aus Websites! Sie kann so vielfältig eingesetzt werden: von der Echtzeit-Synchronisation von Preisen auf Marktplätzen bis zum Bulk Scraping von SEO-Elementen für weitere Analysen.

Erstes Beispiel: Wie wäre es, wenn du alle Titel (H1, H2, H3) der Landing Page von Latenodeauslesen würdest? Los geht's!

• Das Szenario sieht genauso aus:
• Der Webhook wartet auf eine zu analysierende URL.
• Der Headless Browser navigiert zu der angegebenen URL, findet die H1, H2 und H3 Überschriften und ruft sie ab.
• Die Webhook-Antwort zeigt die Liste der Titel als Ergebnis des Aufrufs des Webhook-Triggers.

Dann stellen wir wieder eine POST-Anfrage an unser Szenario und senden die Website zum Parsen in den Body-Bereich, wie unten gezeigt:

Als Ergebnis erhalten wir die Liste der H1-, H2und H3-Titel von der Webseite, die wir an den Headless-Browser gesendet haben.

Hinweis: Wichtig ist, dass du mit diesen Informationen innerhalb des Latenode Szenarios arbeiten kannst, um weitere Daten umzuwandeln oder Informationen an andere Stellen zu senden.

Zweites Beispiel: Wenn du keine API für die Website hast, von der du wichtige Informationen abrufen musst, z. B. den Wechselkurs zwischen US-Dollar und Euro und englischem Pfund, kannst du einen Headless-Browser verwenden, um direkten Zugriff darauf zu erhalten.

Wenn du eine weitere POST-Anfrage mit zwei Währungen stellst, erhältst du unweigerlich zwei Wechselkurse als Antwort vom Latenode Szenario.

Anwendungsfall Nr. 3: Formulare mit dem Headless Browser ausfüllen

Jetzt wechseln wir unseren Fokus vom Suchen und Abrufen zum Ausfüllen. Wie wäre es, ein Webformular automatisch und ohne API auszufüllen?

• Gib dem Headless-Browser den Link zum Webformular.
• Gib ihm Text zur Eingabe.
• Gib den Pfad zum HTML-, CSS- oder XPath-Element an, um deinen Text einzugeben.

Der Code zum Ausfüllen eines solchen einfachen HTML-Codes sieht wie folgt aus:

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

Anwendungsfall Nr. 4: Screenshots mit dem Headless Browser erstellen

Zu guter Letzt solltest du Screenshots von allem machen, was du im Internet findest.

Um einen Showcase zu erstellen, bauen wir ein dynamisches Diagramm auf der Plattform Latenode , das sich jede Woche mit neuen Informationen aktualisiert. Das alles geschieht mit Hilfe eines JavaScript-Knotens und globalen Variablen.

Sie sieht so aus. Aber was, wenn wir diese Tabelle jede Woche mit jemandem teilen wollen, wenn sie aktualisiert wird? Um das zu realisieren, können wir Headless Browsers um Hilfe bitten, einen Screenshot zu machen und die Datei dorthin zu schicken, wo sie hingehört.

Der Headless Browser-Knoten liefert dir ein Bildschirmfoto im base64-Format. Danach kannst du ihn mit dem JavaScript-Knoten so umwandeln, wie es dein weiteres System benötigt, um diese Datei zu erhalten.

👉Um diese gebrauchsfertige Vorlage anzupassen und Screenshots zu erstellen, die du dann an deinen Telegram-Chat senden kannst, befolge diese Schritte:

• Kopiere die Vorlage aus unserer Galerie.
• Ersetze im JavaScript-Knoten den Telegram Bot Token & ChatID durch deine Daten.
• Setze dein Szenario ein und rufe die Webhook-URL manuell auf.

Fazit 

In diesem Artikel haben wir die Leistungsfähigkeit von Headless Browsern auf Latenode aufgedeckt, einem leistungsstarken Werkzeug für Low-Code-Automatisierungen. Diese Browser ohne die übliche Oberfläche von Chrome oder Firefox bieten eine schnelle, skriptgesteuerte Möglichkeit, das Web zu nutzen. Sie eignen sich perfekt für Aufgaben wie das Ausfüllen von Formularen, das Abrufen von Daten von Websites und automatisierte Tests, insbesondere bei komplexen, dynamischen Websites.

Was unseren Headless Browser Node so besonders macht, ist seine Benutzerfreundlichkeit in einer Low-Code-Umgebung. Das bedeutet, dass auch Personen ohne tiefgreifende Programmierkenntnisse seine Funktionen nutzen können. Von der Automatisierung einfacher Aufgaben bis hin zur Handhabung komplexer Webinteraktionen ist der Headless Browser ein robustes Tool für verschiedene Anforderungen.

Viel Spaß bei der Nutzung von Latenode und bei allen Fragen zur Plattform, tritt unserer Discord-Community von Low-Code-Experten bei.

Eine visuelle Darstellung der Headless Browser Automation findest du im Latenode Tutorial zur Low-Code-Automatisierung mit Hilfe unseres einsatzbereiten Headless Browser Nodes auf unserer Plattform.

Verwandte Artikel:

• JavaScript + KI: ein perfektes Duo für Low-Code-Automatisierungen
• Schaffe Integration mit jeder App: Zwei Methoden
• Erstmals ein Lifetime-Deal für Frühbucher!