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

Введение про типы сайтов и их различие

Статический сайт — это сайт, который состоит из заранее созданных файлов (HTML, CSS и JavaScript). Все страницы хранятся на сервере в готовом виде. Текст и картинки на таком сайте одинаковы для всех посетителей, а сервер не собирает страницы заново при каждом заходе.

Так согласно данным от w3techs, 69.1% - всех вебсайтов используют CMS (да сайты с CMS могут считаться динамическими). И это только CMS, разумеется количество динамических сайтов гораздо больше, учитывая что сейчас так же сильно популярны различные Frontend-фреймворки, которые по своей сути делают только динамические сайты. Кстати, мой сайт тоже считается динамическим.

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

1. Либо точные тайминги - нельзя сразу скачивать страницу, только после того, как необходимое содержимое появится на странице
2. Либо рендеринг JS - иногда требуется прямое взаимодействие с сайтом через клик, скролл или фокус на элементе, чтобы подгрузился необходимый контент, а грузится он через JS.

Подготовка, что, у кого и как будем парсить

1. Эмуляция браузеров и последующий рендеринг JS-скриптов
2. Эмуляция браузера напрямую, через драйверы - Selenium
3. Эмуляция браузера через специальные программный API - Playwright / Puppeteer / Cypress

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

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

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

Парсинг динамических сайтов разными способами

Парсинг сайта используя Selenium

mkdir dynamic-scraper; cd dynamic-scraper; python -m venv .venv; source .venv/bin/activate; pip install selenium;

from selenium import webdriver from selenium.webdriver.firefox.options import Options # Функция для сохраниения полученного HTML-кода def save_to_html(path, text): with open(path, 'w', encoding='utf-8') as file: file.write(text) file.close() TARGET_URL = "https://timthewebmaster.com/en/articles/" def run(): # Задаём опции работы тестового браузера options = Options() # Без графического интерфейса options.add_argument('--headless') driver = webdriver.Firefox(options=options) # Получаем саму страницу driver.get(TARGET_URL) # Сохраняем её save_to_html('index.html', driver.page_source) if __name__ == "__main__": run()

from selenium import webdriver from selenium.webdriver.firefox.options import Options from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions def save_to_html(path, text): with open(path, 'w', encoding='utf-8') as file: file.write(text) file.close() TARGET_URL = "https://timthewebmaster.com/en/articles/" NEXT_PAGE_BUTTON_ID = "next_pagin_button" LAST_BUTTON_ID = "paginator_last_page_example" NEXT_LOCATOR = "scroll-sentinel-" def run(): # Настраиваем тестовый браузер options = Options() options.add_argument('--headless') driver = webdriver.Firefox(options=options) # Заходим на сайт driver.get(TARGET_URL) # Находим количество доступных страниц pages = int(driver.find_element(By.ID, "paginator_body").find_element(By.ID, LAST_BUTTON_ID).get_attribute("data-page")) for page in range(2, pages): # Находим и нажимаем на кнопку next_page_button = driver.find_element(By.ID, NEXT_PAGE_BUTTON_ID) next_page_button.click() # Ждём пока не подгрузится необходимый контент WebDriverWait(driver, 10).until( expected_conditions.presence_of_element_located((By.ID, f"{NEXT_LOCATOR}{page+1}")) ) print(f"STATUS: On {page} page") # Так как последний анкорный тег не возвращается нужно ещё раз кликнуть next_page_button = driver.find_element(By.ID, NEXT_PAGE_BUTTON_ID) next_page_button.click() # Сохраняем страницу (т.к. новые статьи добавляются на ту же страницу, можно скачать её всего лишь один раз) save_to_html(f'index.html', driver.page_source) if __name__ == "__main__": run()

Почему я сохранил страницу только один раз? Тут вообще всё зависит от конкретного сайта. В моём случае, мой сайт просто вставляет статьи на ту же страницу если двигаться вперёд. Некоторые при переходе на новую страницу, перезагружают всю страницу и в таком случае потребовалось бы сохранять каждую страницу.

Парсинг сайта используя Playwright

Но на самом деле для парсера не имеет значения через какой браузер парсить. Парсеру нужно только получить желаемую HTML-страницу, а дальше дело техники ...

import { test } from '@playwright/test' import { writeFileSync } from 'fs'; let URL = "https://timthewebmaster.com/en/articles/" function saveToJson(data, filename){ const articlesArray = Array.from(data.values()); writeFileSync(filename, JSON.stringify(articlesArray, null, 2), 'utf-8'); } test('main', async ({ page }) => { let collectedArticles = new Map(); await page.goto(URL); // Находим количество доступных страниц let pages = parseInt(await page.locator('#paginator_last_page_example:not([data-page=""])').innerText()) // Прокликиваем страницы пагинации for (let i = 0; i < pages; i++){ console.log(`page=${i}`) await page.locator('#next_pagin_button').click() // Ждём пока этот элемент не загрузится и будет виден if (i < pages - 2) await page.locator(`#scroll-sentinel-${i+3}`).waitFor({ state: 'attached' }); } // Собираем все прогрузившиеся статьи const articles = page.locator('#page>div:not(.scroll-sentinel)'); const currentCount = await articles.count(); for (let j = 0; j < currentCount; j++){ const article = articles.nth(j); // Извлекаем уникальный маркер (например, ссылку или заголовок) const title = await article.locator('h2').innerText(); const link = await article.locator('h2>a').getAttribute('href'); collectedArticles.set(`article-${j}`, {"title": title, "link": link}) } saveToJson(collectedArticles, 'results.json') });

Парсинг такой страницы без многопоточного кода займёт где-то 10-30 секунд. По умолчанию, любой тест в playwright длиться только 30 секунд поэтому не забудь снять ограничение на время проведения теста. timeout: 0 в playwright.config.js

Парсинг сайта используя существующий API

Да, если ты не знал то Гугл официально позволяет парсить поисковую выдачу и многое другое, и условно бесплатно. Так у меня есть целая статья посвящённая парсингу SERP выдаче от Google.

import json import requests from bs4 import BeautifulSoup TARGET_URL = "https://timthewebmaster.com/api/v1/public/article/?page=1&page_size=10&format=json" def save_to_json(path, list): with open(path, 'w', encoding='utf-8') as file: json.dump(list, file, indent=4, ensure_ascii=False) def run(): # Делаем инициирующий запрос response = requests.get(TARGET_URL) all_data = json.loads(response.text) data = all_data # Обходим все while(data['next']): print(f"PAGE: {data['next']}") response = requests.get(data['next']) data = json.loads(response.text) # Сохраняем результат в один общий список all_data['results'].append(data['results']) save_to_json('data.json', all_data) # Дальше логика группировки и дальнейшей обработки данных # ... if __name__ == "__main__": run()

Парсинг сайта используя скрытый API

Так же, неформально сам адрес может быть скрытым API, который позволит спарсить все статьи с сайта.

Парсинг сайта через расширение для браузеров

Конечно же это полностью негилирует особенность любого парсинга в его автоматизации. Но всё же, такое тоже имеет место быть.

Заключение