Imagine construir uma plataforma de comércio eletrônico onde possamos facilmente buscar dados de produtos em tempo real de grandes lojas como eBay, Amazon e Flipkart. Claro, existe o Shopify e serviços semelhantes, mas sejamos honestos: pode parecer um pouco complicado comprar uma assinatura apenas para um projeto. Então pensei, por que não vasculhar esses sites e armazenar os produtos diretamente em nosso banco de dados? Seria uma forma eficiente e econômica de obter produtos para nossos projetos de comércio eletrônico.

O que é Web Scraping?

Web scraping envolve a extração de dados de sites, analisando o HTML das páginas da web para ler e coletar conteúdo. Freqüentemente, envolve automatizar um navegador ou enviar solicitações HTTP ao site e, em seguida, analisar a estrutura HTML para recuperar informações específicas, como texto, links ou imagens.Puppeteer é uma biblioteca usada para raspar os sites.

?O que é marionetista?

Puppeteer é uma biblioteca Node.js. Ela fornece uma API de alto nível para controlar os navegadores Headless Chrome ou Chromium. Headless Chrome é uma versão do Chrome que executa tudo sem uma IU (perfeito para executar coisas em segundo plano).

Podemos automatizar várias tarefas usando o titereiro, como:

• Web Scraping: Extrair conteúdo de sites envolve interagir com o HTML e JavaScript da página. Normalmente recuperamos o conteúdo visando os seletores CSS.
• Geração de PDF: A conversão de páginas da web em PDFs programaticamente é ideal quando você deseja gerar um PDF diretamente de uma página da web, em vez de fazer uma captura de tela e depois convertê-la em PDF. (P.S. desculpas se você já tiver soluções alternativas para isso).
• Testes automatizados: execução de testes em páginas da web simulando ações do usuário, como clicar em botões, preencher formulários e fazer capturas de tela. Isso elimina o tedioso processo de passar manualmente por longos formulários para garantir que tudo esteja no lugar.

?Como começar com o fantoche?

Primeiro temos que instalar a biblioteca, vá em frente e faça isso.
Usando npm:

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

Usando fio:

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

Usando pnpm:

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

? Exemplo para demonstrar o uso do marionetista

Aqui está um exemplo de como raspar um site. (P.S. usei este código para recuperar produtos do site Myntra para meu projeto de comércio eletrônico.)

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;

?Explicação:

• Neste código, estamos usando o Puppeteer para extrair dados de produtos de um site. Após extrair os detalhes, criamos um esquema (CategorySchema) para estruturar e salvar esses dados em nosso banco de dados. Esta etapa é particularmente útil se quisermos integrar os produtos raspados em nossa loja de comércio eletrônico. Se não for necessário armazenar os dados em um banco de dados, você poderá omitir o código relacionado ao esquema.
• Antes de raspar, é importante entender a estrutura HTML da página e identificar quais seletores CSS contêm o conteúdo que você deseja extrair.
• No meu caso, usei os seletores CSS relevantes identificados no site Myntra para extrair o conteúdo que eu estava almejando.