Автоматизация без API: Headless Browser на лоу-код платформе Нодуль

Привет, это Даник из Нодуля 👋

Сегодня мы обсудим инструмент автоматизации, который не так широко используется экспертами в области ноу-код. К тому же, эта функция, уникальная для Нодуля, отсутствует на платформах вроде Zapier и Make, но обладает огромным потенциалом для улучшения ваших рабочих процессов.

Кстати, каждый раз, когда вы пользуетесь интернетом через ChatGPT, вы используете его! Это так называемый Headless Browser.

Содержание:

1. Что такое Headless Browser?
2. Как работает Headless Browser?
3. Что может делать Headless Browser?
4. Для каких целей можно использовать Headless Browser?
5. Сценарий использования №1: Поиск в Интернете с помощью Headless Browser, как это делают плагины GPT
6. Сценарий использования №2: Извлечение данных с веб-страниц с помощью Headless Browser
7. Сценарий использования №3: Заполнение форм с помощью Headless Browser
8. Сценарий использования №4: Создание скриншотов с помощью Headless Browser
9. Заключение

Что такое Headless Browser?

Давайте вернемся назад и посмотрим на мир автоматизации бизнес-процессов. В большинстве случаев компании используют только два подхода к автоматизации, которые полностью удовлетворяют их потребности:

1. Автоматизация процессов через API.

Это надежный подход к созданию потоков данных между различными приложениями, имеющими публичный API. Вы либо самостоятельно обращаетесь к разработчику, либо просите JavaScript AI Assistant на Нодуле построить интеграцию с любым приложением за секунды, просто описав ваш запрос.

К сожалению, не все действия в интернете имеют поддержку API для автоматического выполнения тех же действий. Вот тут-то и пригождается второй метод, который не требует конечных точек API.

2. Headless Browser для автоматизации без API

Об этом и пойдет речь в статье, так что устройтесь поудобнее и давайте погрузимся в новую область автоматизации, которая впоследствии облегчит вам жизнь.

Headless Browser - это особый тип интернет-браузера, подобный Chrome или Firefox, но без видимого интерфейса, включая кнопки, адресную строку и закладки. Что осталось? "Мозг", который производит навигацию в интернете, может открывать сайты и взаимодействовать с ними. Этот браузер способен автоматизировать различные задачи на сайтах без отображения визуального контента и делает это с очень высокой скоростью. Процесс управляется скриптом, а не человеком.

Особенно важной частью Headless Browser является его способность запускать пользовательские скрипты на JavaScript. Это позволяет имитировать действия пользователя, такие как клики по кнопкам, заполнение форм и навигацию по меню сайта. Это имеет решающее значение для таких задач, как автоматизированного тестирования, веб-скрейпинга и автоматизации повторяющихся задач на веб-порталах.

Как работает Headless Browser?

Headless Browser включает в себя несколько ключевых шагов, и важно понимать их, чтобы начать использовать его потенциал:

1. Указание URL: Сначала нужно определить URL веб-страницы, с которой вы хотите взаимодействовать, это как ввод адреса сайта в обычном браузере, но здесь это делается через скрипт.

2. Селекторы для навигации: Селекторы важны для указания Headless Browser, с какими элементами веб-страницы вы хотите взаимодействовать. Это могут быть селекторы CSS, XPath или команды JavaScript, которые позволяют точно определить нужные элементы, такие как кнопки, текстовые поля, изображения и т.д.

3. Дополнительные параметры: В зависимости от задачи, вы можете вводить текст в формы, загружать файлы или нажимать на кнопки. Эти действия управляются написанными вами скриптами, которые указывают, что и когда делать.

По сути, вы должны указать Headless Browser, куда идти, что найти, куда нажать, какой текст ввести или скопировать и так далее.

Что может делать Headless Browser?

Есть несколько основных действий, которые поддерживает Headless Browser под вашим контролем:

• Автоматическая навигация и взаимодействие: Headless браузеры могут выполнять такие задачи, как заполнение форм, переход по ссылкам, очистка данных и даже создание скриншотов веб-страниц.
• Извлечение и обработка данных: Часто целью является извлечение данных с веб-страниц. Headless браузеры могут анализировать HTML и текст страницы и извлекать необходимую вам информацию, которую затем можно использовать в вашем приложении или сохранить для последующего использования.
• Запуск пользовательских скриптов: Поскольку Headless браузеры могут запускать JavaScript, вы можете выполнять пользовательские скрипты для взаимодействия с веб-страницами сложными способами, такими как обработка динамического содержимого или аутентификация.

Для каких целей можно использовать Headless Browser?

Учитывая базовые действия, Headless браузеры предлагают ряд расширенных действий, которые могут быть невероятно полезны. Чтобы воплотить это в жизнь, вам необходимо интегрировать  Headless Browser в лоу-код сценарии на Нодуле. Это позволяет реализовать Headless Browser в следующих вариантах использования:

Сценарии использования Headless Browser

Теперь давайте перейдем к конкретным сценариям использования, которые вы можете просто скопировать-вставить и настроить запуск Headless Browser самостоятельно, даже без предварительного опыта.

Сценарий использования № 1: Поиск в Интернете, как это делают GPT-плагины с Headless Browser

Забавный факт: когда вы используете ChatGPT и просите его просматривать веб-страницы, в игру вступает Headless Browser! Давайте создадим MVP чего-то подобного и попросим Headless Browser сделать поисковый запрос для нас.

Вот краткий обзор следующего сценария:

• Мы передаем поисковой запрос на Webhook URL.
• Headless Browser получает этот запрос, открывает Google, совершает запрос и возвращает названия первых 10 позиций поиска.
• Webhook response возвращает полученный результат обратно в postman откуда был совершен запрос либо дальше по сценарию в зависимости от вашей настройки.

Давайте немного углубимся в код Headless Browser, где мы сопоставляем данные из webhook, чтобы узел Headless Browser знал, что именно он должен искать в Google.

После этого сделаем POST-запрос и отправим наш поисковый запрос в виде ключа "Search" в теле. Буквально через несколько секунд мы сможем увидеть результат выполнения сценария.

👉 Хотите протестировать самостоятельно? Скопируйте готовый к использованию шаблон и просматривайте веб-страницы с помощью Headless Browser!

Сценарий использования № 2: Анализ данных с веб-страниц с помощью Headless Browser

Теперь перейдем непосредственно к анализу данных с веб-сайтов! Его можно использовать очень широко: от синхронизации цен с торговых площадок в режиме реального времени до массового сбора элементов SEO для дальнейшего анализа.

Первый пример: как насчет удаления всех заголовков (H1, H2, H3) с целевой страницы Нодуля? Давайте сделаем это!

Сценарий выглядит так же:

• Webhook прослушивает URL для анализа.
• Headless Browser переходит по указанному URL, находит и извлекает заголовки H1, H2, H3.
• Ответ Webhook показывает список заголовков в результате вызова триггера Webhook.

Затем мы снова отправляем POST-запрос в наш сценарий и отправляем веб-сайт для анализа в разделе body, как показано ниже:

В результате мы получаем список заголовков H1, H2 и H3 с веб-страницы, которую мы отправили в Headless Browser.

Примечание: Что важно, вы можете оперировать этой информацией внутри сценария Нодуля для любого дальнейшего преобразования данных или отправки информации туда, куда вам нужно.

👉 Хотите протестировать самостоятельно? Скопируйте готовый к использованию шаблон и повторите то, что описано выше.

Второй пример: если у вас нет API для веб–сайта, с которого вам нужно получить какую-то важную информацию, например, обменный курс доллара США и евро к английскому фунту - используйте Headless Browser, чтобы получить прямой доступ к нему.‍

Сделав еще один POST-запрос с двумя валютами, вы неизбежно получите два обменных курса в качестве ответа из сценария Нодуля.

👉 Хотите протестировать самостоятельно? Скопируйте готовый к использованию шаблон Нодуля и проанализируйте данные с веб-страниц с помощью Headless Browser!

Сценарий использования №3: Заполнение формы с помощью Headless Browser 

Теперь мы переключаем наше внимание с поиска и извлечения на заполнение. Как насчет автоматического заполнения веб-формы без использования API?

• Предоставьте Headless Browser ссылку на веб-форму.
• Предоставьте текст для ввода.
• Укажите путь к элементу HTML, CSS или XPath для ввода текста.

👉Создвйте свой сценарий на платформе автоматизации Iow-Code Нодуль в соответствии с потребностями вашего бизнеса с помощью Headless Browser.

Код для заполнения такого простого HTML-кода выглядит следующим образом:

const targetUrl = '<https://webhook.nodul.ru/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' };

Сценарий использования № 4: Делайте скриншоты с помощью Headless Browser

И последнее, но не менее важное: делайте скриншоты всего, что вы можете найти в Интернете.

Для наглядности мы создаем динамическую диаграмму на платформе Нодуля, которая каждую неделю обновляется новой информацией. Все это делается с помощью узла JavaScript и Global Variables.

Это выглядит примерно так. Но что, если мы захотим делиться этой диаграммой с кем-то еще каждую неделю, когда она обновляется? Чтобы сделать это реальным, мы можем попросить Headless Browser о помощи, чтобы сделать скриншот и отправить файл туда, куда ему нужно.

Узел Headless Browser возвращает вам снимок экрана в формате base64. После этого узел JavaScript позволяет вам преобразовать его так, как вашей системе необходимо для получения этого файла.

👉 Чтобы настроить готовый к использованию шаблон и начать делать скриншоты с последующей отправкой в ваш чат Telegram, выполните следующие действия:

• Скопируйте шаблон из нашей галереи.
• В узле JavaScript замените токен Telegram-бота и ChatID своими данными.
• Разверните свой сценарий и вызовите URL webhook вручную.

Заключение

В этой статье мы раскрыли возможности Headless браузеров последней модели, мощного инструмента для автоматизации с низким содержанием кода. Эти браузеры, без обычного интерфейса Chrome или Firefox, предлагают быстрый, управляемый сценариями способ использования Интернета. Они идеально подходят для таких задач, как заполнение форм, получение данных с веб-сайтов и автоматическое тестирование, особенно на сложных динамических сайтах.

Что отличает наш узел Headless Browser, так это простота использования в лоу-код среде. Это означает, что даже те, кто не обладает глубокими знаниями в области программирования, все еще могут использовать его возможности. От автоматизации простых задач до обработки сложных веб-взаимодействий, Headless Browser - надежный инструмент для различных нужд.

Наслаждайтесь использованием Нодуля, а по любым вопросам о платформе вступайте в наше Telegram сообщество. Для наглядного представления автоматизации Headless Browser ознакомьтесь с руководством Нодуля по лоу-код автоматизации с помощью готового к использованию узла Headless Browser на нашей платформе.