Несколько дней назад я видел видео на DevTips, где они пытались использовать Puppeteer, я никогда не использовал его сам и подумал, что это выглядит действительно круто. Итак, я попробовал и делюсь тем, что узнал здесь.
Что такое кукловод?
Прежде чем мы просто погрузимся в код, важно понять, что это за технология, которую мы используем, и почему она существует.
Безголовый браузер
Puppeteer поставляется с Chromium и по умолчанию работает «без головы». Что такое безголовый браузер? Безголовый браузер - это браузер для компьютеров. Он не имеет пользовательского интерфейса и позволяет программе - часто называемой парсером или сканером - читать и взаимодействовать с ним.
API
Безголовые браузеры - это здорово и все такое, но иногда им может быть сложно пользоваться. Однако Puppeteer предоставляет действительно хороший API или набор функций для взаимодействия с ним.
Зачем это нужно?
Вы так много можете сделать с помощью Puppeteer и веб-скрапинга в целом!
- Сделайте автоматические тесты на реальной веб-странице,
- Создавать PDF-файлы
- Сделайте скриншоты
- Захватывайте данные с веб-сайтов и сохраняйте их
- Автоматизируйте скучные задачи
- Кукловод - это, пожалуй, лучший инструмент, который вы можете использовать ИМО.
Давай с кодом!
Давайте начнем!
Предпосылки
Если вы продолжите, вам потребуется установленный NodeJS, базовые знания командной строки, знание JavaScript и знание DOM.
Примечание. Код парсера не обязательно должен быть идеальным. При выполнении собственных проектов не зацикливайтесь на этом.
Настройка проекта
- Создайте папку (назовите как угодно)
- Откройте папку в терминале / командной строке
- При запуске вашего терминала
npm init -yЭто сгенерируетpackage.jsonдля управления зависимостями проекта. - Затем запустите
npm install puppeteer. Это установит puppeteer, который включает Chromium, так что не удивляйтесь, если он большой. - Наконец, откройте папку в вашем любимом редакторе кода и создайте файл
index.js. Вам также понадобятся эти папки:screenshots,pdfsиjson, если вы в точности следуете моему примеру.
Простой пример
Теперь давайте попробуем что-нибудь простое (но действительно крутое!), Чтобы убедиться, что наша установка работает. Мы собираемся сделать снимок экрана веб-страницы и сгенерировать файл PDF.
Сбор данных - подготовка
Используя тот же сайт из приведенного выше примера, мы возьмем некоторые данные и сохраним их в файл. Допустим, в этом сценарии нам нужны только название команды, год, победы и поражения. Первый шаг - создать несколько селекторов.
Селектор - это просто путь к данным. (подумайте о селекторах CSS). Мы придумаем пути здесь, используя инструменты разработчика нашего браузера. Откройте их на странице, открыв меню браузера и ища «инструменты разработчика». Я буду использовать Chrome, и вы можете просто нажать CTRL + Shift + I, чтобы открыть их.
На сайте откройте вкладку «Элементы» в инструментах разработчика и найдите, какие данные вы хотите получить. Обратите внимание на его структуру, классы и т. Д.
Получение данных - в коде
Пора применить это к нашему коду.
Основная часть этого page.evaluate() это позволяет нам запускать JS-код в браузере и передавать обратно любые данные, которые нам нужны. Это все, что нужно для получения данных.
Возможно, вы заметили, что здесь у нас есть доступ к DOM - это очень приятный и знакомый API, который предоставляет Puppeteer!
Сохранение данных в файл
В качестве последнего штриха мы сохраним эти данные в файл. В моем случае мне нужны данные в формате JSON, потому что его легче всего использовать с JS.
- Загрузите модуль файловой системы с узла
- Преобразуйте данные в JSON с помощью
JSON.stringify() - Запишите файл с
fs.writeFile()
Более продвинутый парсинг
Puppeteer поддерживает такие вещи, как одностраничные приложения (SPA), моделирование ввода, тесты и многое другое. Они выходят за рамки этого руководства, но вы можете найти примеры в документации Puppeteer.
Ссылки и ссылки
Спасибо за прочтение! Оставляйте отзывы или вопросы в комментариях ниже.
