Hallo, Daniel von Latenode hier 👋
Heute sprechen wir über ein Automatisierungstool, das unter No-Code-Expert:innen noch nicht weit verbreitet ist. Außerdem ist diese native Latenode-Funktion auf Plattformen wie Zapier, Make und anderen nicht verfügbar, bietet jedoch großes Potenzial zur Verbesserung Ihrer Workflows.
Übrigens: Jedes Mal, wenn Sie mit ChatGPT im Web suchen, nutzen Sie es! Es ist ein Headless Browser.
Testen Sie den Workflow „Screenshot erstellen und an Telegram senden“ mit einem Headless Browser
Erklärung zum Headless Browser
Treten wir einen Schritt zurück und betrachten wir die Welt der Automatisierung von Geschäftsprozessen. In den meisten Fällen nutzen Unternehmen nur zwei Automatisierungsansätze, die ihre Anforderungen vollständig erfüllen:
- Prozesse über APIs automatisieren.
Dies ist ein solider Ansatz, um Datenflüsse zwischen verschiedenen Anwendungen mit einer öffentlichen API aufzubauen. Entweder besuchen Sie selbst das Entwicklerportal und finden heraus, wie Sie den richtigen API-Aufruf für Ihre Anforderungen erstellen, oder Sie bitten den JavaScript-KI-Assistenten von Latenode, innerhalb von Sekunden eine Integration mit jeder benötigten App zu erstellen – indem Sie Ihre Anfrage einfach beschreiben.
Leider verfügen nicht alle Aktionen im Web über eine zugrunde liegende API-Infrastruktur, um dieselben Aufgaben automatisch auszuführen. Hier setzen Unternehmen auf die zweite Methode, die keine API-Endpunkte erfordert.
- Mit einem Headless Browser ohne APIs automatisieren
In diesem Artikel dreht sich alles darum. Lehnen Sie sich zurück und tauchen wir in ein neues Feld der Automatisierung ein, das Ihnen künftig den Rücken freihält.
Was ist ein Headless Browser?
Stellen Sie sich einen gewöhnlichen Internetbrowser wie Chrome oder Firefox vor. Entfernen Sie nun alle sichtbaren Teile der Benutzeroberfläche – Schaltflächen, Adressleiste und Lesezeichen. Was bleibt übrig? Das „Gehirn“, das im Internet navigieren, Websites öffnen und mit ihnen interagieren kann. Genau das nennen wir einen „Headless“ Browser. Er kann verschiedene Aufgaben auf Websites automatisieren, ohne visuelle Inhalte anzuzeigen – und das mit atemberaubender Geschwindigkeit. Ein Skript, nicht ein Mensch, steuert den Prozess.
Ein entscheidender Teil eines Headless Browsers ist seine Fähigkeit, eigene JavaScript-Skripte auszuführen. Damit können Sie Nutzeraktionen wie das Klicken auf Schaltflächen, das Ausfüllen von Formularen und die Navigation durch das Menü einer Website simulieren. Das ist entscheidend für Aufgaben wie automatisierte Tests, Web Scraping und die Automatisierung wiederkehrender Aufgaben in Webportalen.
Wie funktioniert ein Headless Browser?
Die Verwendung eines Headless Browsers umfasst einige wichtige Schritte. Um sein Potenzial nutzen zu können, sollten Sie diese verstehen:
- Zu öffnende URL: Zunächst müssen Sie die URL der Webseite angeben, mit der Sie interagieren möchten. Das entspricht der Eingabe einer Website-Adresse in einem gewöhnlichen Browser – hier erfolgt dies jedoch per Skript.
- Selektoren zur Navigation: Selektoren sind entscheidend, um dem Headless Browser mitzuteilen, mit welchen Elementen einer Webseite Sie interagieren möchten. Das können CSS-Selektoren, XPath oder JavaScript-Befehle sein. Damit können Sie bestimmte Elemente wie Schaltflächen, Textfelder, Bilder und mehr gezielt auswählen.
- Zusätzliche Parameter: Je nach Aufgabe müssen Sie möglicherweise Text in Formulare eingeben, Dateien hochladen oder Schaltflächen anklicken. Diese Aktionen werden durch Skripte gesteuert, die Sie schreiben und die festlegen, was wann geschehen soll.
Grundsätzlich sollten Sie dem Headless Browser mitteilen, wohin er navigieren 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?
Ein Headless Browser unterstützt unter Ihrer Steuerung einige grundlegende Aktionen:
- Automatisierte Navigation und Interaktion: Headless Browser können Aufgaben wie das Ausfüllen von Formularen, das Anklicken von Links, das Extrahieren von Daten und sogar das Erstellen von Screenshots von Webseiten ausführen.
- Datenextraktion und -verarbeitung: Häufig besteht das Ziel darin, Daten aus Webseiten zu extrahieren. Headless Browser können den HTML-Code und Text einer Seite analysieren und die benötigten Informationen extrahieren, die anschließend in Ihrer Anwendung verwendet oder zur späteren Nutzung gespeichert werden können.
- Ausführen eigener Skripte: Da Headless Browser JavaScript ausführen können, können Sie eigene Skripte einsetzen, um auf komplexe Weise mit Webseiten zu interagieren, etwa zur Verarbeitung dynamischer Inhalte oder zur Handhabung der Authentifizierung.
Für welche Zwecke kann ich einen Headless Browser einsetzen?
Auf Grundlage dieser Basisaktionen bieten Headless Browser eine Reihe fortgeschrittener Funktionen, die äußerst hilfreich sein können. Damit dies möglich wird, müssen Sie den Headless Browser in Low-Code-Workflows auf Latenode integrieren. So können Sie einen Headless Browser für die folgenden Anwendungsfälle einsetzen:
| Funktion | Beschreibung |
|---|---|
| Automatisierte Tests | Nutzen Sie einen Headless Browser für automatisierte Tests von Webanwendungen und stellen Sie sicher, dass sie in verschiedenen Browsern und auf unterschiedlichen Geräten korrekt funktionieren. |
| Web Crawling und Scraping | Ein Headless Browser eignet sich perfekt für Web Crawling und Scraping und ermöglicht Ihnen, große Datenmengen effizient aus dem Web zu erfassen. |
| Performance-Monitoring | Headless Browser können die Performance von Webanwendungen überwachen, indem sie Ladezeiten, Reaktionsfähigkeit und andere wichtige Kennzahlen verfolgen. |
| Verarbeitung von AJAX- und JavaScript-intensiven Websites | Ein Headless Browser kann AJAX- und JavaScript-intensive Websites ähnlich wie ein gewöhnlicher Browser verarbeiten und ist daher ideal für dynamische Webanwendungen. |
Anwendungsfälle für Headless Browser
Kommen wir nun zu konkreten Anwendungsfällen, die Sie einfach kopieren, einfügen und selbst mit dem Headless Browser starten können – auch ohne Vorerfahrung.
Anwendungsfall Nr. 1: Mit einem Headless Browser wie GPT-Plugins im Web suchen
Interessante Tatsache: Wenn Sie ChatGPT nutzen und es bitten, im Web zu suchen, kommt ein Headless Browser zum Einsatz! Lassen Sie uns ein MVP für etwas Ähnliches erstellen und den Headless Browser bitten, eine Suchanfrage für uns auszuführen.
Hier ist ein kurzer Überblick über den folgenden Workflow:
- Die Webhook-URL erwartet eine POST-Anfrage mit einer Suchanfrage.
- Der Headless Browser erhält diese Anfrage, öffnet Google und gibt die Titel der ersten 10 Suchergebnisse zurück.
- Die Webhook-Antwort sendet das Ergebnis an den Webhook zurück.
Schauen wir uns den Code des Headless Browsers etwas genauer an. Dort ordnen wir Daten aus dem Webhook zu, damit unser Headless-Browser-Node genau weiß, wonach er bei Google suchen soll.
Anschließend führen wir eine POST-Anfrage aus und senden unsere Suchanfrage als Schlüssel „Search“ im Body. Schon nach wenigen Sekunden sehen wir das Ergebnis der Workflow-Ausführung.
👉Möchten Sie es selbst testen? Kopieren Sie die sofort einsatzbereite Vorlage und durchsuchen Sie das Web mit einem Headless Browser!
Testen Sie den Workflow „Screenshot erstellen und an Telegram senden“ mit einem Headless Browser
Anwendungsfall Nr. 2: Daten von Webseiten mit einem Headless Browser extrahieren
Jetzt geht es direkt an die Datenextraktion von Websites! Die Einsatzmöglichkeiten sind vielfältig: von der Echtzeit-Synchronisierung von Preisen aus Marktplätzen bis zum massenhaften Scraping von SEO-Elementen für weitere Analysen.
Erstes Beispiel: Wie wäre es, alle Überschriften (H1, H2, H3) von Latenodes Landingpage zu extrahieren? Los geht's!
- Der Workflow 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 an.
Dann senden wir erneut eine POST-Anfrage an unseren Workflow und übermitteln die zu analysierende Website im Body-Bereich, 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 diese Informationen innerhalb des Latenode-Workflows für jede weitere Datentransformation verwenden oder dorthin senden können, wo Sie sie benötigen.
Zweites Beispiel: Wenn Sie für die Website, von der Sie wichtige Informationen abrufen müssen, keine API haben – etwa einen Wechselkurs von US-Dollar und Euro zu Britischen Pfund –, verwenden Sie einen Headless Browser für den direkten Zugriff darauf.
Mit einer weiteren POST-Anfrage mit zwei Währungen erhalten Sie zwangsläufig zwei Wechselkurse als Antwort aus dem Latenode-Workflow.
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 damit, ein Webformular automatisch und ohne API auszufüllen?
- Stellen Sie dem Headless Browser den Link zum Webformular bereit.
- Geben Sie ihm den einzugebenden Text.
- Geben Sie den Pfad zum HTML-, CSS- oder XPath-Element an, in das Ihr Text eingegeben werden soll.
Erstellen Sie unbegrenzt viele Integrationen mit Verzweigungen und mehreren Triggern, die in einen Node führen, nutzen Sie Low-Code oder schreiben Sie Ihren eigenen Code mit AI Copilot.
Der Code zum Ausfüllen eines solch einfachen HTML-Formulars 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 einem Headless Browser erstellen
Zu guter Letzt: Screenshots von allem erstellen, was Sie im Web finden.
Für eine Demonstration erstellen wir auf der Latenode-Plattform ein dynamisches Diagramm, das sich jede Woche mit neuen Informationen aktualisiert. Alles erfolgt mithilfe eines JavaScript-Nodes und globaler Variablen.
So sieht es aus. Doch was ist, wenn wir dieses Diagramm jede Woche nach der Aktualisierung mit jemandem teilen möchten? Um dies umzusetzen, können wir Headless Browser um Hilfe bitten, einen Screenshot zu erstellen und die Datei an den gewünschten Ort zu senden.
Der Headless-Browser-Node gibt Ihnen einen Screenshot im Base64-Format zurück. Anschließend ermöglicht der JavaScript-Node Ihnen, ihn so umzuwandeln, wie Ihr nachgelagertes System diese Datei benötigt.
Erstellen Sie diesen Workflow mit Latenode nach.
👉Um diese sofort einsatzbereite Vorlage anzupassen und Screenshots zu erstellen, die anschließend an Ihren Telegram-Chat gesendet werden, folgen Sie diesen Schritten:
- Kopieren Sie die Vorlage aus unserer Galerie.
- Ersetzen Sie im JavaScript-Node den Telegram Bot Token und die ChatID durch Ihre Daten.
- Veröffentlichen Sie Ihren Workflow und rufen Sie die Webhook-URL manuell auf.
Fazit
In diesem Artikel haben wir die Leistungsfähigkeit von Headless Browsern auf Latenode vorgestellt – einem leistungsstarken Werkzeug für Low-Code-Automatisierungen. Diese Browser ohne die übliche Benutzeroberfläche von Chrome oder Firefox bieten eine schnelle, skriptgesteuerte Möglichkeit zur Nutzung des Webs. Sie eignen sich ideal 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-Node auszeichnet, ist seine einfache Nutzung in einer Low-Code-Umgebung. Das bedeutet, dass auch Personen ohne tiefgehende Programmierkenntnisse seine Funktionen nutzen können. Von der Automatisierung einfacher Aufgaben bis zur Verarbeitung komplexer Webinteraktionen ist der Headless Browser ein robustes Werkzeug für unterschiedlichste Anforderungen.
Viel Freude bei der Nutzung von Latenode. Bei Fragen zur Plattform treten Sie unserer Discord-Community aus Low-Code-Expert:innen bei.
Eine visuelle Darstellung der Headless-Browser-Automatisierung finden Sie im Latenode-Tutorial zur Low-Code-Automatisierung mit unserem sofort einsatzbereiten Headless-Browser-Node auf unserer Plattform.
