CoderCastrov logo
CoderCastrov
JavaScript - JavaScript

Парсинг данных с веб-сайта с пагинацией с использованием JavaScript и Playwright

Парсинг данных с веб-сайта с пагинацией с использованием JavaScript и Playwright
просмотров
4 мин чтение
#JavaScript - JavaScript

Объяснение с традиционной пагинацией

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

Пагинация - это широко используемая техника в веб-разработке для структурирования контента, группировки его по фиксированному количеству пространства или количеству элементов. Это делается для обеспечения более удобной навигации пользователей.

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

Однако, парсинг данных с веб-сайтов бывает сложнее на некоторых сайтах, чем на других, в зависимости от их структуры.

Давайте рассмотрим пример парсинга данных с веб-сайтов с пагинацией. Мы будем разрабатывать наш скрипт с использованием Playwright, новой технологии для тестирования современных веб-приложений.

Традиционная пагинация

Традиционная пагинация разделяет содержимое на произвольные группы по 10, 25, 100 или любое другое количество результатов. В конце списка включены ссылки для перемещения вперед и назад страница за страницей. Пользователь может использовать эти ссылки или кнопки вперед и назад в самом веб-браузере.

Большинство веб-сайтов, таких как газеты, интернет-магазины, поисковые системы и форумы, используют систему традиционной пагинации.

Парсинг YTravel

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

Мы собираемся работать с этой категорией сообщений Путевые советы - y Travel Blog

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

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

2 - Найдите элемент пагинации и проверьте его с помощью браузера. Чтобы взаимодействовать с пагинацией, нам нужно найти элемент кнопки "Далее" и общее количество страниц.

Шаг 2

3 - Мы находим элементы, которые хотим извлечь с каждой страницы. В данном случае нам нужны название блога и ссылка.

Шаг 3

4 - Пришло время писать код

Если у вас все еще есть сомнения относительно парсинга или того, как это работает, я рекомендую вам взглянуть на мою статью, где я подробнее объясняю это.

Что вам нужно знать, чтобы разработать свой первый парсер веб-страниц на JavaScript

Краткое руководство для начинающих в парсинге веб-страниц

medium.com

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

Во-первых, нам нужно знать общее количество страниц, чтобы щелкать и переходить через каждую из них или, при необходимости, парсить только определенное количество страниц на основе общего числа.

Ниже приведен код упражнения. Я кратко прокомментировал, что делает каждый блок кода. Чтобы выполнить код, вам нужно только установить Playwright и выполнить node fileName.js.

Если нам нужно только спарсить все найденные страницы, в этой второй форме нам не нужно знать общее количество страниц, поэтому мы просто выполняем цикл, пока на странице не будет видима кнопка "Next", что означает, что больше страниц нет.

Финальный результат

JSON-объект вывода

Заключение

Мы рассмотрели наиболее распространенный способ отображения контента на веб-сайтах с помощью пагинации.

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

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

Удачного парсинга!

Узнайте больше о парсинге веб-сайтов:

Веб-парсинг: что это такое и для чего он используется?

medium.com


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

Хотите связаться с автором?Обожаю общаться с друзьями со всего мира в Twitter.


Дальнейшее чтение

Преодоление 3 основных проблем парсинга веб-сайтов, с которыми сталкиваются разработчики

Как преодолеть 3 основных ограничения парсинга веб-сайтов - динамические веб-сайты, взаимодействие с веб-сайтом и управление отпечатками...

javascript.plainenglish.io

Автоматизация парсинга веб-страниц с помощью простого в использовании расширения для браузера

Как легко автоматизировать процесс парсинга веб-страниц с помощью Listly, инструмента без кода, идеального для начинающих.

javascript.plainenglish.io

Больше контента на PlainEnglish.io. Подпишитесь на наш бесплатный еженедельный бюллетень. Подписывайтесь на нас в Twitter, LinkedIn, YouTube и Discord.