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

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

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

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

Чтобы извлечь все 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();
})();

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

1. Импортируем Puppeteer: В начале кода мы подключаем библиотеку Puppeteer, которая предоставляет интерфейс для управления браузером.

2. Запускаем браузер: Мы создаем новую сессию браузера и открываем новую вкладку.

3. Переход на нужный URL: Используем метод goto для перехода на целевой сайт. URL в примере замените на тот, с которого нужно собрать изображения.

4. Сбор фонов изображений: Здесь мы используем page.evaluate(), чтобы выполнить JavaScript прямо в контексте страницы.

   • Получаем все элементы на странице с помощью document.querySelectorAll('*').
   • Для каждого элемента извлекаем значение backgroundImage и проверяем, не является ли оно none.
   • Используем slice(5, -2), чтобы очистить строку от url("...") и оставить только сам URL.

5. Фильтрация и уникальность: Удаляем дубликаты с помощью Set и фильтруем любые null значения.

6. Вывод результатов: Все уникальные URL-адреса фоновых изображений выводятся в консоль.

7. Завершение работы браузера: С помощью метода browser.close() мы закрываем сессию браузера после выполнения скрипта.

Заключение

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