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

Hallo, hier ist Daniel von Latenode 👋

Heute besprechen wir ein Automatisierungstool, das unter No-Code-Experten nicht weit verbreitet ist. Darüber hinaus ist diese in Latenode integrierte Funktion auf Plattformen wie Zapier, Make und anderen nicht verfügbar, bietet jedoch großes Potenzial zur Verbesserung Ihrer Arbeitsabläufe.

Übrigens: Jedes Mal, wenn Sie mit ChatGPT im Internet surfen, verwenden Sie es! Es ist ein Headless-Browser.

Erklärung zum Headless-Browser

Lassen Sie uns einen Schritt zurücktreten und einen Blick auf die Welt der Geschäftsprozessautomatisierung werfen. In den meisten Fällen verwenden Unternehmen nur zwei Automatisierungsansätze, die ihre Anforderungen vollständig erfüllen:

1. Automatisieren Sie Prozesse über die API.

Dies ist ein solider Ansatz zum Erstellen von Datenflüssen zwischen verschiedenen Anwendungen, die über eine öffentliche API verfügen. Sie können entweder selbst zum Entwickler-Hub gehen und herausfinden, wie Sie einen korrekten API-Aufruf durchführen, um genau das zu tun, was Sie benötigen, oder Sie bitten den JavaScript AI Assistant auf Latenode, in Sekundenschnelle eine Integration mit jeder gewünschten App zu erstellen, indem Sie einfach Ihre Anfrage beschreiben.

Leider verfügen nicht alle Aktionen im Web über eine zugrunde liegende API-Infrastruktur, um dieselben Dinge automatisch auszuführen. Daher verlassen sich Unternehmen auf die zweite Methode, die keine API-Endpunkte erfordert.

2. Headless-Browser zur Automatisierung ohne APIs

In diesem Artikel geht es genau darum. Nehmen Sie also Platz, entspannen Sie sich und lassen Sie uns in ein neues Automatisierungsfeld eintauchen, das Ihnen später den Rücken freihalten wird.

Was ist ein Headless-Browser?

Stellen Sie sich einen normalen Internetbrowser wie Chrome oder Firefox vor. Entfernen Sie 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 „headless“ Browser. Er kann verschiedene Aufgaben auf Websites automatisieren, ohne visuelle Inhalte anzuzeigen, und das in rasender Geschwindigkeit. Ein Skript, kein Mensch, steuert den Prozess.

Ein entscheidender Teil des Headless Browsers ist seine Fähigkeit, benutzerdefinierte JavaScript-Skripte auszuführen. Damit können Sie Benutzeraktionen wie das Klicken auf Schaltflächen, das Ausfüllen von Formularen und das Navigieren durch das Menü einer Site simulieren. Dies ist entscheidend für Aufgaben wie automatisierte Tests, Web Scraping und die Automatisierung sich wiederholender Aufgaben auf Webportalen.

Wie funktioniert ein Headless-Browser?

Der Betrieb eines Headless-Browsers umfasst einige wichtige Schritte. Um sein Potenzial nutzen zu können, ist es wichtig, diese zu verstehen:

1. Zu durchsuchende URL: Zuerst müssen Sie die URL der Webseite angeben, mit der Sie interagieren möchten. Dies ist wie das Eingeben einer Website-Adresse in einen normalen Browser, aber hier erfolgt dies über ein Skript.
2. Auswahlmöglichkeiten zur Navigation: Selektoren sind entscheidend, um dem Headless-Browser mitzuteilen, mit welchen Elementen einer Webseite Sie interagieren möchten. Dies können CSS-Selektoren, XPath oder JavaScript-Befehle sein. Sie ermöglichen es Ihnen, bestimmte Elemente wie Schaltflächen, Textfelder, Bilder usw. genau auszuwählen.
3. Zusätzliche Parameter: Abhängig von Ihrer Aufgabe müssen Sie möglicherweise Text in Formulare eingeben, Dateien hochladen oder auf Schaltflächen klicken. Diese Aktionen werden von Skripten ausgeführt, die Sie schreiben und die angeben, was zu tun ist und wann es zu tun ist.

Grundsätzlich sollten Sie dem Headless Browser mitteilen, wohin er gehen, was er finden, wo er klicken, welchen Text er eingeben oder kopieren soll usw.

Was kann ein Headless-Browser?

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

• Automatisierte Navigation und Interaktion: Headless-Browser können Aufgaben wie das Ausfüllen von Formularen, das Klicken auf Links, das Scraping von Daten und sogar das Erstellen von Screenshots von Webseiten ausführen.
• Datenextraktion und -verarbeitung: Oft besteht das Ziel darin, Daten aus Webseiten zu extrahieren. Headless-Browser können HTML und Text einer Seite analysieren und die benötigten Informationen extrahieren, die dann in Ihrer Anwendung verwendet oder für die spätere Verwendung gespeichert werden können.
• Ausführen benutzerdefinierter Skripts: Da Headless-Browser JavaScript ausführen können, können Sie benutzerdefinierte Skripts ausführen, um auf komplexe Weise mit Webseiten zu interagieren, z. B. durch die Verarbeitung dynamischer Inhalte oder die Authentifizierung.

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

Neben den grundlegenden Aktionen bieten Headless-Browser eine Reihe erweiterter Aktionen, die unglaublich nützlich sein können. Um dies umzusetzen, müssen Sie den Headless-Browser in Low-Code-Szenarien auf Latenode integrieren. So können Sie den Headless-Browser in den folgenden Anwendungsfällen implementieren:

Anwendungsfälle des Headless-Browsers

Kommen wir nun zu bestimmten Anwendungsfällen, die Sie einfach kopieren und einfügen und die Aktivierung des Headless Browsers selbst durchführen können, auch ohne Vorkenntnisse.

Anwendungsfall Nr. 1: Durchsuchen Sie das Web wie GPT-Plugins mit Headless Browser

Interessante Tatsache: Wenn Sie ChatGPT verwenden und es auffordern, im Internet zu surfen, kommt ein Headless-Browser ins Spiel! Lassen Sie uns ein MVP von etwas Ähnlichem erstellen 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.
• Der Headless Browser erhält diese Anfrage, öffnet Google und gibt die Titel der ersten zehn Suchpositionen zurück.
• Die Webhook-Antwort sendet das Ergebnis an den Webhook zurück.

Lassen Sie uns etwas tiefer in den Headless-Browser-Code eintauchen, wo wir Daten vom Webhook zuordnen, damit unser Headless-Browser-Knoten weiß, wonach er genau in Google suchen soll.

Danach stellen wir eine POST-Anfrage und senden unsere Suchanfrage als „Suchschlüssel“ im Text. In nur wenigen Sekunden können wir das Ergebnis der Szenarioausführung sehen.

👉Möchten Sie es selbst testen? Kopieren Sie die gebrauchsfertige Vorlage und surfen Sie mit Headless Browser im Internet!

Anwendungsfall Nr. 2: Daten von Webseiten mit einem Headless-Browser analysieren

Jetzt direkt zum Parsen von Daten von Websites! Die Verwendungsmöglichkeiten sind vielfältig: von der Echtzeitsynchronisierung von Preisen auf Marktplätzen bis hin zum Massen-Scraping von SEO-Elementen für weitere Analysen.

Erstes Beispiel: Wie wäre es, alle Titel (H1, H2, H3) von der Landingpage von Latenode zu scrapen? Lass es uns tun!

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

Dann stellen wir erneut eine POST-Anfrage an unser Szenario und senden die Website zur Analyse in den Textabschnitt, wie unten gezeigt:

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

Hinweis: Wichtig ist, dass Sie mit diesen Informationen im Latenode-Szenario für weitere Datentransformationen arbeiten oder Informationen senden können, wohin Sie sie benötigen.

Zweites Beispiel: Wenn Sie keine API für die Website haben, von der Sie wichtige Informationen abrufen müssen, z. B. einen Wechselkurs von US-Dollar und Euro zum Britischen Pfund, verwenden Sie einen Headless-Browser, um direkt darauf zuzugreifen.

Indem Sie eine weitere POST-Anfrage mit zwei Währungen stellen, erhalten Sie zwangsläufig zwei Wechselkurse als Antwort aus dem Latenode-Szenario.

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

Nun verlagern wir unseren Fokus vom Suchen und Abrufen auf das Ausfüllen. Wie wäre es, ein Webformular automatisch und ohne API auszufüllen?

• Stellen Sie dem Headless-Browser den Link zum Webformular zur Verfügung.
• Geben Sie den einzugebenden Text ein.
• Geben Sie den Pfad zum HTML-, CSS- oder XPath-Element an, um Ihren Text einzugeben.

Der Code zum Ausfüllen eines solchen einfachen HTML-Codes sieht folgendermaßen 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 Headless Browser erstellen

Und zu guter Letzt: Machen Sie Screenshots von allem, was Sie im Internet finden.

Um ein Schaustück zu erstellen, erstellen wir ein dynamisches Diagramm auf der Latenode-Plattform, das sich jede Woche mit neuen Informationen aktualisiert. Alles wird mit Hilfe eines JavaScript-Knotens und globaler Variablen erledigt.

Es sieht so aus. Aber was, wenn wir dieses Diagramm jede Woche, wenn es aktualisiert wird, mit jemand anderem teilen möchten? Um dies zu ermöglichen, können wir Headless Browsers um Hilfe bitten, einen Screenshot zu erstellen und die Datei an den gewünschten Zielort zu senden.

Der Headless-Browser-Knoten gibt Ihnen einen Screenshot im Base64-Format zurück. Anschließend können Sie ihn mit dem JavaScript-Knoten so umwandeln, wie Ihr weiteres System diese Datei benötigt.

👉Um diese gebrauchsfertige Vorlage anzupassen und Screenshots zu erstellen und sie anschließend an Ihren Telegram-Chat zu senden, folgen Sie diesen Schritten:

• Kopieren Sie die Vorlage aus unserer Galerie.
• Ersetzen Sie im JavaScript-Knoten das Telegram Bot Token und die ChatID durch Ihre Daten.
• Stellen Sie Ihr Szenario bereit und rufen Sie die Webhook-URL manuell auf.

Schlussfolgerung 

In diesem Artikel haben wir die Leistungsfähigkeit von Headless-Browsern auf Latenode entdeckt, einem leistungsstarken Tool für Low-Code-Automatisierungen. Diese Browser bieten ohne die übliche Benutzeroberfläche von Chrome oder Firefox eine schnelle, skriptgesteuerte Möglichkeit, das Internet 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 auf komplexen, dynamischen Websites.

Was unseren Headless-Browser-Knoten auszeichnet, ist seine Benutzerfreundlichkeit in einer Low-Code-Umgebung. Das bedeutet, dass selbst diejenigen ohne umfassende Programmierkenntnisse seine Funktionen nutzen können. Von der Automatisierung einfacher Aufgaben bis hin zur Handhabung komplexer Webinteraktionen ist Headless Browser ein robustes Tool für verschiedene Anforderungen.

Viel Spaß mit Latenode. Bei Fragen zur Plattform, Treten Sie unserer Discord-Community bei von Low-Code-Experten.

Eine visuelle Darstellung der Headless-Browser-Automatisierung finden Sie im Latenode-Tutorial zur Low-Code-Automatisierung mithilfe unseres gebrauchsfertigen Headless-Browser-Knotens auf unserer Plattform.

In Verbindung stehende Artikel:

• JavaScript + KI: ein perfektes Duo für Low-Code-Automatisierungen
• Integration mit jeder App erstellen: Zwei Methoden
• Das allererste Lifetime-Angebot für Frühbucher!