Представьте себе создание платформы электронной коммерции, на которой мы можем легко получать данные о продуктах в режиме реального времени из крупных магазинов, таких как eBay, Amazon и Flipkart. Конечно, есть Shopify и подобные сервисы, но давайте будем честными — покупать подписку только для проекта может показаться немного обременительным. Итак, я подумал, а почему бы не очистить эти сайты и не хранить товары прямо в нашей базе данных? Это был бы эффективный и экономичный способ получать продукты для наших проектов электронной коммерции.

Что такое парсинг веб-страниц?

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

?Что такое Кукловод?

Puppeteer — это библиотека Node.js. Она предоставляет высокоуровневый API для управления безголовыми браузерами Chrome или Chromium. Headless Chrome — это версия Chrome, которая запускает все без пользовательского интерфейса (идеально подходит для запуска приложений в фоновом режиме).

Мы можем автоматизировать различные задачи с помощью puppeteer, например:

• Веб-скрапинг: Извлечение контента с веб-сайтов предполагает взаимодействие с HTML и JavaScript страницы. Обычно мы извлекаем контент, ориентируясь на селекторы CSS.
• Генерация PDF: Программное преобразование веб-страниц в PDF-файлы идеально подходит, если вы хотите напрямую создать PDF-файл из веб-страницы, а не делать снимок экрана и затем преобразовывать его в PDF-файл. (P.S. Извините, если у вас уже есть обходные пути).
• Автоматическое тестирование: Запуск тестов на веб-страницах путем моделирования действий пользователя, таких как нажатие кнопок, заполнение форм и создание снимков экрана. Это избавляет от утомительного процесса ручного просмотра длинных форм, чтобы убедиться, что все на месте.

?Как начать работу с Puppetter?

Сначала нам нужно установить библиотеку, сделайте это.
Использование npm:

npm i puppeteer # Downloads compatible Chrome during installation.
npm i puppeteer-core # Alternatively, install as a library, without downloading Chrome.

Использование пряжи:

yarn add puppeteer // Downloads compatible Chrome during installation.
yarn add puppeteer-core // Alternatively, install as a library, without downloading Chrome.

Использование pnpm:

pnpm add puppeteer # Downloads compatible Chrome during installation.
pnpm add puppeteer-core # Alternatively, install as a library, without downloading Chrome.

? Пример демонстрации использования puppeteer

Вот пример парсинга веб-сайта. (P.S. Я использовал этот код для получения продуктов с веб-сайта Myntra для своего проекта электронной коммерции.)

const puppeteer = require("puppeteer");
const CategorySchema = require("./models/Category");

// Define the scrape function as a named async function
const scrape = async () => {
    // Launch a new browser instance
    const browser = await puppeteer.launch({ headless: false });

    // Open a new page
    const page = await browser.newPage();

    // Navigate to the target URL and wait until the DOM is fully loaded
    await page.goto('https://www.myntra.com/mens-sport-wear?rawQuery=mens sport wear', { waitUntil: 'domcontentloaded' });

    // Wait for additional time to ensure all content is loaded
    await new Promise((resolve) => setTimeout(resolve, 25000));

    // Extract product details from the page
    const items = await page.evaluate(() => {
        // Select all product elements
        const elements = document.querySelectorAll('.product-base');
        const elementsArray = Array.from(elements);

        // Map each element to an object with the desired properties
        const results = elementsArray.map((element) => {
            const image = element.querySelector(".product-imageSliderContainer img")?.getAttribute("src");
            return {
                image: image ?? null,
                brand: element.querySelector(".product-brand")?.textContent,
                title: element.querySelector(".product-product")?.textContent,
                discountPrice: element.querySelector(".product-price .product-discountedPrice")?.textContent,
                actualPrice: element.querySelector(".product-price .product-strike")?.textContent,
                discountPercentage: element.querySelector(".product-price .product-discountPercentage")?.textContent?.split(' ')[0]?.slice(1, -1),
                total: 20, // Placeholder value, adjust as needed
                available: 10, // Placeholder value, adjust as needed
                ratings: Math.round((Math.random() * 5) * 10) / 10 // Random rating for demonstration
            };
        });

        return results; // Return the list of product details
    });

    // Close the browser
    await browser.close();

    // Prepare the data for saving
    const data = {
        category: "mens-sport-wear",
        subcategory: "Mens",
        list: items
    };

    // Create a new Category document and save it to the database
    // Since we want to store product information in our e-commerce store, we use a schema and save it to the database.
    // If you don't need to save the data, you can omit this step.
    const category = new CategorySchema(data);
    console.log(category);
    await category.save();

    // Return the scraped items
    return items;
};

// Export the scrape function as the default export
module.exports = scrape;

?Объяснение:

• В этом коде мы используем Puppeteer для сбора данных о продуктах с веб-сайта. После извлечения деталей мы создаем схему (CategorySchema) для структурирования и сохранения этих данных в нашей базе данных. Этот шаг особенно полезен, если мы хотим интегрировать очищенные продукты в наш интернет-магазин. Если хранение данных в базе данных не требуется, вы можете опустить код, связанный со схемой.
• Перед парсингом важно понять структуру HTML страницы и определить, какие селекторы CSS содержат контент, который вы хотите извлечь.
• В моем случае я использовал соответствующие селекторы CSS, указанные на веб-сайте Myntra, чтобы извлечь целевой контент.