Получите все URL-адреса изображений фона css с помощью puppeteer.

Получите все URL-адреса изображений фона css с помощью puppeteer.

На чтение 3 мин Опубликовано 13.11.2024

Содержание

Вопрос или проблема
Ответ или решение
Решение с использованием Puppeteer
Постепенное объяснение кода
Заключение

Вопрос или проблема

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

const backgroundImage = await page.evaluate(el => window.getComputedStyle(el).backgroundImage, await page.$(НЕ ИЗВЕСТНАЯ ИНФОРМАЦИЯ))

В идеале я хотел бы решение, соответствующее парадигме Puppeteer, но в противном случае единственные пути, которые я вижу, это: перебор всех разумных тегов и проверка на фоновое изображение; или использование регулярных выражений в HTML сайта для извлечения URL изображений.

Спасибо

Ответ или решение

Чтобы извлечь все URL-адреса фоновых изображений CSS с помощью Puppeteer, необходимо разработать метод, который выполняет обход всех элементов на веб-странице и собирает значения свойства backgroundImage в стилях этих элементов. Это позволит обеспечить универсальность решения, не полагаясь на конкретные селекторы.

Решение с использованием Puppeteer

Ниже представлен пример кода, который продемонстрирует данный подход.

const puppeteer = require('puppeteer');

(async () => {
    // Запускаем браузер
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    // Переходим на нужный сайт
    await page.goto('https://example.com'); // Замените на нужный URL

    // Сбор всех URL фонов изображений
    const backgroundImages = await page.evaluate(() => {
        // Получаем все элементы на странице
        const elements = Array.from(document.querySelectorAll('*'));

        // Извлекаем фоновое изображение из каждого элемента
        const backgrounds = elements.map(el => {
            const style = window.getComputedStyle(el);
            const backgroundImage = style.backgroundImage;

            // Проверяем, есть ли значение и не является ли оно "none"
            return backgroundImage !== 'none' ? backgroundImage.slice(5, -2) : null;
        });

        // Удаляем дубликаты и фильтруем null
        return [...new Set(backgrounds)].filter(url => url !== null);
    });

    console.log(backgroundImages);

    // Закрываем браузер
    await browser.close();
})();

Постепенное объяснение кода

Импортируем Puppeteer: В начале кода мы подключаем библиотеку Puppeteer, которая предоставляет интерфейс для управления браузером.
Запускаем браузер: Мы создаем новую сессию браузера и открываем новую вкладку.
Переход на нужный URL: Используем метод goto для перехода на целевой сайт. URL в примере замените на тот, с которого нужно собрать изображения.
Сбор фонов изображений: Здесь мы используем page.evaluate(), чтобы выполнить JavaScript прямо в контексте страницы.
- Получаем все элементы на странице с помощью document.querySelectorAll('*').
- Для каждого элемента извлекаем значение backgroundImage и проверяем, не является ли оно none.
- Используем slice(5, -2), чтобы очистить строку от url("...") и оставить только сам URL.
Фильтрация и уникальность: Удаляем дубликаты с помощью Set и фильтруем любые null значения.
Вывод результатов: Все уникальные URL-адреса фоновых изображений выводятся в консоль.
Завершение работы браузера: С помощью метода browser.close() мы закрываем сессию браузера после выполнения скрипта.

Заключение

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