Automatizace bez API: Bezhlavý prohlížeč na platformě s nízkým kódem Latenode

Ahoj, tady Daniel z Latenode 👋

Dnes se budeme zabývat automatizačním nástrojem, který není mezi odborníky na kódování příliš rozšířený. Navíc tato funkce, která je nativní pro Latenode, není k dispozici na platformách jako Zapier, Make a dalších, ale má silný potenciál pro vylepšení vašich pracovních postupů.

Mimochodem, pokaždé, když procházíte web přes ChatGPT, používáte ho! Je to bezhlavý prohlížeč.

Vysvětlení prohlížeče bez hlavy

Podívejme se zpět na svět automatizace podnikových procesů. Ve většině případů podniky používají pouze dva přístupy k automatizaci, které plně uspokojují jejich potřeby:

1. Automatizace procesů prostřednictvím rozhraní API.

Jedná se o spolehlivý přístup k vytváření datových toků mezi různými aplikacemi, které mají veřejné rozhraní API. Buď sami navštívíte vývojářské centrum a zjistíte, jak provést správné volání API, abyste udělali přesně to, co potřebujete, nebo požádáte asistenta umělé inteligence v JavaScriptu na adrese Latenode , aby během několika sekund vytvořil integraci s jakoukoli aplikací, kterou potřebujete, pouhým popsáním vašeho požadavku.

Bohužel ne všechny akce na webu mají základní infrastrukturu API pro automatické provádění stejných úkonů. Proto se podniky spoléhají na druhou metodu, která nevyžaduje žádné koncové body API.

2. Bezhlavý prohlížeč pro automatizaci bez rozhraní API

Tento článek je právě o tom, takže se pohodlně usaďte, uvolněte se a pojďte se ponořit do nové oblasti automatizace, která vám později pokryje záda.

Co je bezhlavý prohlížeč?

Představte si běžný internetový prohlížeč, jako je Chrome nebo Firefox. Nyní odstraňte všechny viditelné části rozhraní - tlačítka, adresní řádek, záložky. Co zůstane? "Mozek", který dokáže procházet internetem, otevírat webové stránky a komunikovat s nimi. Tomu říkáme "bezhlavý" prohlížeč. Dokáže automatizovat různé úkoly na webových stránkách bez zobrazování vizuálního obsahu a dokáže to dělat závratnou rychlostí. Celý proces řídí skript, nikoli člověk.

Klíčovou součástí prohlížeče Headless Browser je jeho schopnost spouštět vlastní skripty JavaScriptu. Umožňuje simulovat akce uživatele, jako je klikání na tlačítka, vyplňování formulářů a procházení nabídkou webu. To je klíčové pro úlohy, jako je automatizované testování, web scraping a automatizace opakujících se úloh na webových portálech.

Jak funguje bezhlavý prohlížeč?

Provoz bezhlavého prohlížeče zahrnuje několik klíčových kroků, které je nutné pochopit, abyste mohli začít využívat jeho potenciál:

1. Adresa URL k procházení: Nejprve je třeba zadat adresu URL webové stránky, se kterou chcete komunikovat. Je to podobné jako zadání adresy webové stránky v běžném prohlížeči, ale zde to provádíte prostřednictvím skriptu.
2. Selektory pro navigaci: Selektory mají zásadní význam při určování prvků na webové stránce, se kterými chcete pracovat. Mohou to být selektory CSS, XPath nebo příkazy jazyka JavaScript. Umožňují přesně určit konkrétní prvky, jako jsou tlačítka, textová pole, obrázky atd.
3. Další parametry: V závislosti na úkolu může být nutné zadávat text do formulářů, nahrávat soubory nebo klikat na tlačítka. Tyto akce se provádějí pomocí skriptů, které napíšete a které určují, co a kdy se má provést.

V podstatě byste měli bezhlavému prohlížeči říci, kam má jít, co má najít, kam má kliknout, který text má napsat nebo zkopírovat atd.

Co umí prohlížeč bez hlavy?

Bezhlavý prohlížeč podporuje několik základních akcí, které můžete ovládat:

• Automatizovaná navigace a interakce: Bezhlavé prohlížeče mohou provádět úkoly, jako je vyplňování formulářů, klikání na odkazy, získávání dat a dokonce pořizování snímků obrazovky webových stránek.
• Získávání dat a manipulace s nimi: Cílem je často extrahovat data z webových stránek. Bezhlavé prohlížeče mohou analyzovat HTML a text stránky a extrahovat potřebné informace, které pak lze použít v aplikaci nebo uložit pro pozdější použití.
• Spouštění vlastních skriptů: Vzhledem k tomu, že bezhlavé prohlížeče mohou spouštět JavaScript, můžete spouštět vlastní skripty pro složitou interakci s webovými stránkami, například pro zpracování dynamického obsahu nebo ověřování.

K jakým účelům mohu používat bezhlavý prohlížeč?

Vzhledem k základním akcím nabízejí prohlížeče Headless řadu pokročilých akcí, které mohou být neuvěřitelně užitečné. Aby se to stalo skutečností, je třeba integrovat Headless Browser do low-code scénářů na Latenode. To vám umožní implementovat bezhlavý prohlížeč do následujících případů použití:

Případy použití prohlížeče bez hlavy

Nyní přejděme ke konkrétním případům použití, které můžete jednoduše zkopírovat a zažehnout pomocí Headless Browseru sami, a to i bez předchozích zkušeností.

Případ použití č. 1: Vyhledávání na webu jako u zásuvných modulů GPT pomocí prohlížeče Headless Browser

Zábavný fakt: když použijete ChatGPT a požádáte jej o procházení webu, spustí se bezhlavý prohlížeč! Vytvořme MVP něčeho podobného a požádejme Headless Browser, aby za nás vytvořil vyhledávací dotaz.

Zde je stručný přehled následujícího scénáře:

• Adresa URL webhooku hledá požadavek na příspěvek s požadavkem na vyhledávání.
• Prohlížeč Headless Browser tento požadavek přijme, otevře Google a vrátí názvy prvních 10 pozic vyhledávání.
• Odpověď webhooku odešle zpět do webhooku výsledek.

Ponořme se trochu hlouběji do kódu bezhlavého prohlížeče, kde mapujeme data z webhooku, aby náš uzel bezhlavého prohlížeče věděl, co přesně má v Googlu vyhledávat.

Poté provedeme požadavek POST a odešleme náš vyhledávací dotaz jako klíč 'Search' v těle. Již za několik sekund jsme schopni vidět výsledek provedení scénáře.

👉Chcete si to vyzkoušet sami? Zkopírujte si připravenou šablonu a procházejte web s Headless Browserem!

Případ použití č. 2: Parsování dat z webových stránek pomocí prohlížeče Headless Browser

Nyní rovnou k analýze dat z webových stránek! Využití je tak široké: od synchronizace cen z tržišť v reálném čase až po hromadné škrabání prvků SEO pro další analýzu.

První příklad: co takhle vyškrábat všechny nadpisy (H1, H2, H3) z cílové stránky Latenode? Pojďme na to!

• Scénář vypadá stejně:
• Webový háček naslouchá adrese URL, kterou má analyzovat.
• Headless Browser přejde na zadanou adresu URL, vyhledá a načte nadpisy H1, H2, H3.
• Webhook Response zobrazuje seznam titulů jako výsledek volání spouštěče Webhook.

Poté opět provedeme požadavek POST na náš scénář a odešleme webovou stránku k analýze v části těla, jak je znázorněno níže:

Výsledkem je seznam nadpisů H1, H2 a H3 z webové stránky, kterou jsme odeslali do prohlížeče headless.

Poznámka: Důležité je, že s těmito informacemi můžete pracovat uvnitř scénáře Latenode pro jakoukoli další transformaci dat nebo odesílání informací kamkoli potřebujete.

Druhý příklad: pokud nemáte k dispozici rozhraní API pro webovou stránku, ze které potřebujete získat některé důležité informace, například směnný kurz z amerického dolaru a eura na anglickou libru - použijte bezhlavý prohlížeč, abyste k nim získali přímý přístup.

Pokud zadáte ještě jeden požadavek POST se dvěma měnami, získáte jako odpověď ze scénáře Latenode nevyhnutelně dva směnné kurzy.

Případ použití #3: Vyplňování formulářů pomocí prohlížeče bez hlavy

Nyní se zaměříme z vyhledávání a získávání na vyplňování. Co takhle vyplnit webový formulář automaticky a bez rozhraní API?

• Poskytněte prohlížeči bez hlavy odkaz na webový formulář.
• Zadejte text, který chcete zadat.
• Zadejte cestu k prvku HTML, CSS nebo XPath pro zadání textu.

Kód pro vyplnění takového jednoduchého kódu HTML vypadá takto:

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

Případ použití #4: Pořizování snímků obrazovky pomocí prohlížeče Headless Browser

V neposlední řadě si můžete pořizovat snímky obrazovky z čehokoli, co najdete na webu.

Abychom mohli vytvořit prezentaci, vytvoříme na platformě Latenode dynamický graf, který se každý týden aktualizuje o nové informace. Vše se provádí pomocí uzlu JavaScriptu a globálních proměnných.

Vypadá to takto. Ale co když chceme tento graf sdílet s někým dalším každý týden, když je aktualizován? Aby to bylo reálné, můžeme požádat Headless Browsers o pomoc s vytvořením snímku obrazovky a odesláním souboru tam, kam je třeba.

Uzel Headless Browser vrátí snímek obrazovky ve formátu base64. Poté vám uzel JavaScript umožní transformovat jej tak, jak potřebuje váš další systém pro získání tohoto souboru.

👉Chcete-li si tuto šablonu připravenou k použití přizpůsobit a začít vytvářet snímky obrazovky s dalším odesíláním do chatu Telegram, postupujte podle následujících kroků:

• Zkopírujte šablonu z naší galerie.
• V uzlu JavaScriptu nahraďte token Telegram Bot a ChatID svými údaji.
• Nasaďte scénář a zavolejte adresu URL webhooku ručně.

Závěr 

V tomto článku jsme odhalili možnosti bezhlavých prohlížečů na webu Latenode, výkonného nástroje pro nízkokódové automatizace. Tyto prohlížeče bez obvyklého rozhraní prohlížečů Chrome nebo Firefox nabízejí rychlý, skripty řízený způsob používání webu. Jsou ideální pro úlohy, jako je vyplňování formulářů, získávání dat z webových stránek a automatizované testování, zejména na složitých, dynamických webech.

Náš uzel Headless Browser vyniká snadným použitím v prostředí s nízkým kódem. To znamená, že jeho možnosti mohou využívat i ti, kteří nemají hluboké znalosti kódování. Headless Browser je robustní nástroj pro různé potřeby, od automatizace jednoduchých úloh až po obsluhu složitých webových interakcí.

Užijte si používání Latenode, a pro případné dotazy týkající se platformy, připojte se k naší komunitě Discord odborníků na nízký kód.

Chcete-li si názorně představit automatizaci bezhlavého prohlížeče, podívejte se na výukový program Latenode , který se věnuje nízkokódové automatizaci pomocí uzlu Headless Browser připraveného k použití na naší platformě.

Související články:

• JavaScript + umělá inteligence: dokonalá dvojice pro nízkokódové automatizace
• Vytvoření integrace s libovolnou aplikací: Dvě metody
• Vůbec první doživotní nabídka pro ranní ptáčata!