Динамический парсинг веб-страниц с использованием Puppeteer в Node.js

Иногда веб-сайты имеют динамический контент, созданный с помощью JavaScript или WebAssembly. В такой ситуации нельзя использовать парсер HTML, нужно открыть настоящий веб-браузер, например Chrome, и запустить его в безголовом режиме. Существует множество модулей Node.js для этого, таких как Selenium, PhantomJS и Puppeteer.

Puppeteer использует протокол инструментов разработчика Google Chrome для автоматического управления браузером.

Для установки Puppeteer можно использовать следующую команду:

npm i puppeteer

Я буду использовать Puppeteer для получения названий товаров с страницы поиска Walmart. В принципе, я просто внедряю JavaScript через Puppeteer и возвращаю результаты в переменную Node.js.

Прежде чем создавать внедряемый JavaScript-код, мне нужно открыть целевой сайт в веб-браузере и найти уникальную метку на теге HTML, которую можно использовать для выбора HTML с помощью функции document.querySelectorAll, document.getElementById или других. Для этого нужно щелкнуть правой кнопкой мыши и выбрать "Инспектировать элемент".

На каждом элементе мы видим, что есть search-result-gridview-item, который мы можем использовать.

Поскольку в этом руководстве я буду брать только название товара, я ищу элемент заголовка и нахожу его так:

Хорошо, теперь все готово, и мы можем написать код:

Мы запустим этот код с помощью команды:

node main.js

И результат будет таким: