Web Scraping e Puppeteer: Como rastrear facilmente as alterações nas páginas da Web? Um guia para a automação de dados

O que é raspagem da Web e por que ela é necessária?

A raspagem da Web é uma maneira fácil e conveniente de coletar automaticamente dados de páginas da Web. Em vez de copiar informações manualmente, programas especiais fazem isso por você, extraindo os dados necessários do conteúdo do site. A raspagem da Web economiza tempo, simplifica as tarefas de rotina e permite que você fique por dentro das alterações em tempo real. 

Como funciona o web scraping?

1. O programa entra no site como um usuário normal;
2. Ele "lê" o código da página e encontra os elementos necessários - texto, imagens, links ou tabelas;
3. Os dados resultantes são salvos para que possam ser analisados ou usados posteriormente.

Isso é especialmente útil quando há muitas informações, elas mudam constantemente ou não são apresentadas de forma conveniente.

Por que é importante rastrear alterações em sites?"

A Internet está mudando a cada minuto, e é muito difícil manter o controle de tudo manualmente, o que não é necessário quando há a oportunidade de usar a automação. Aqui estão alguns exemplos de por que você precisa dela:

• Alterações de preço

Imagine que você está procurando as melhores ofertas em lojas on-line. Os preços dos produtos podem mudar dependendo da hora do dia, da estação ou da atividade dos concorrentes. A raspagem da Web o ajudará a descobrir rapidamente onde estão os preços mais baixos ou a ajustar o custo de seus produtos a tempo.

• Disponibilidade de mercadorias

Se você quiser comprar um item popular que muitas vezes está em falta, o script o ajudará a rastrear quando ele estará disponível novamente. É útil para as empresas entenderem o que os fornecedores têm em estoque.

• Notícias e atualizações

Acompanhar as últimas notícias, publicações ou alterações em páginas importantes o ajudará a se manter atualizado. Por exemplo, você pode configurar a coleta de informações de sites de notícias ou blogs.

• Monitoramento de concorrentes

As empresas precisam saber o que seus concorrentes estão fazendo: que promoções estão realizando, que novidades acrescentaram ao seu sortimento, que avaliações estão recebendo. A raspagem da Web pode realizar essa tarefa com facilidade.

• Páginas Dinâmicas

Os sites modernos geralmente carregam dados não imediatamente, mas à medida que o usuário realiza uma ação - por exemplo, avaliações, classificações ou estatísticas. A coleta manual desses dados consome muito tempo, enquanto a automação fará tudo isso em segundos.

Puppeteer: o que é e por que é necessário na raspagem da Web?

Para coletar informações de sites, você precisa de ferramentas convenientes e confiáveis. Entre elas, Puppeteeré uma biblioteca para Node.js, que permite simular as ações de um usuário real: abrir páginas, clicar em elementos, preencher formulários e até mesmo fazer capturas de tela - tudo em um modo totalmente automático. 

A raspagem da Web com o Puppeteer se torna muito mais fácil, especialmente quando se trata de sites dinâmicos em que o conteúdo é carregado usando JavaScript. O Puppeteer não apenas "vê" o que o usuário vê, mas também permite que você interaja com esse conteúdo em um nível mais profundo, tornando-o ideal para coleta de dados, testes de sites e automatização de tarefas de qualquer complexidade. Se você trabalha com JavaScript e TypeScript, o Puppeteer é uma ótima opção para raspagem da Web e muitas outras tarefas! 

Benefícios do marionetista 

Os principais benefícios que o tornam tão popular:

• Trabalhando com conteúdo dinâmico

Ferramentas comuns de raspagem (e.Por exemplo, Axios, Cheerio) geralmente têm problemas para lidar com sites em que o conteúdo é carregado dinamicamente com JavaScript. O Puppeteer, por outro lado, faz um ótimo trabalho com isso! Ele executa um navegador completo (Google Chrome ou Firefox), permitindo que você carregue páginas exatamente como um usuário real faria. Isso significa que todo o conteúdo, mesmo aquele que aparece depois que os scripts são executados, fica disponível para análise e coleta de dados.

• Element Manipulation

Interaja facilmente com o DOM - adicione ou remova elementos, clique em botões, preencha formulários, role páginas e muito mais.

• Headless-mode

O Puppeteer permite controlar o navegador no modo normal e sem interface gráfica (sem GUI).

Headless-mode - ideal para automação rápida e discreta: o navegador é executado "em segundo plano", economizando recursos e acelerando as tarefas.

Modo de navegador completo - útil para depuração e desenvolvimento: você pode observar visualmente o que está acontecendo na página. 

• Device Emulation

O Puppeteer também pode simular dispositivos alterando o cabeçalho do agente do usuário, o que ajuda a contornar sites restritos e de bloqueio. Você pode até mesmo simular modos de rede, como 3G ou Wi-Fi, para testar o desempenho da página.

• Criação de capturas de tela e PDF

Você pode tirar instantâneos de páginas ou salvá-los como arquivos PDF. Isso é útil para criar relatórios, documentar conteúdo da Web ou fazer testes.

Discutiremos todas essas vantagens em detalhes nas seções a seguir.

Então, o Puppeteer não é apenas uma ferramenta de raspagem, mas um auxiliar universal para qualquer tarefa relacionada à automação do navegador. Vamos à instalação do Puppeteer e nos familiarizar com seus recursos na prática:

Puppeteer 

1. A biblioteca é muito fácil de instalar. Primeiro, verifique se você tem o Node.js instalado (site oficial). 
2. E, em seguida, abra um terminal ou prompt de comando e execute o comando npm:

npm i puppeteer

Este comando baixa automaticamente a versão mais recente do Chromium. Se o Chromium já estiver instalado ou se você quiser usar um navegador diferente, poderá instalar o Puppeteer sem ele:

npm i puppeteer-core

Trabalhando com DOM e ações do usuário 

O Puppeteer oferece uma ampla gama de recursos para automatizar suas páginas da Web. Ele não só permite que você altere o conteúdo das páginas manipulando o DOM (Document Object Modela estrutura de uma página da Web por meio da qual elementos e dados podem ser manipulados), mas também imitam as ações do usuário. Vamos dar uma olhada em como colocar esses recursos em prática.

Miscellaneous DOM actions

Puppeteer permite:

• Adicione ou remova elementos.Usar métodos evaluate() para executar código JavaScript no contexto da página.

await page.evaluate(() => {

     const newElement = document.createElement('div');

    newElement.textContent = 'Novo elemento!';

    document.body.appendChild(newElement);    // Adicionar elemento ao DOM

});

• Alterar o conteúdo da página.Você pode alterar facilmente o texto, os atributos ou os estilos dos elementos:

await page.evaluate(() => {

    document.querySelector('h1').textContent = 'Cabeçalho atualizado';

});

Imitindo ações do usuário

O Puppeteer pode emular ações do usuário, o que é especialmente útil para testar e extrair dados de sites interativos.

• Cliques e rolagem:

await page.click('button#submit');  // Clique no botão com id "submit"

await page.evaluate(() => window.scrollBy(0, 1000));  // Role para baixo

• Entrada de texto e preenchimento de formulário:

await page.type('input[name="username"]', 'myUsername');  // Digite o texto no campo

aguarde page.type('input[name="password"]', 'myPassword');

await page.click('button[type="submit"]');  // Enviar formulário

• Navegação automática. O titereiro pode navegar entre páginas, rastrear o carregamento e interagir com novos elementos:

await page.goto('https://example.com');

await page.waitForSelector('h1');  // Aguarde o cabeçalho aparecer

Trabalhando com sites dinâmicos

Muitos sites modernos usam JavaScript para carregar conteúdo de forma assíncrona. O Puppeteer pode lidar facilmente com essas tarefas:

• Aguardando o aparecimento de itensantes de interagir com eles: 

await page.waitForSelector('.dynamic-element');

• Trabalhando com elementos carregados de forma assíncrona. Ao extrair dados, é importante tratar adequadamente os elementos que aparecem mais tarde.

await page.waitForFunction((() => {

 return document.querySelector('.loaded-content') !== null;

});

Parâmetros para raspagem da Web com o Puppeteer

Para uma raspagem da Web eficiente e correta usando o Puppeteer, você precisa considerar vários parâmetros e configurações que ajudarão a melhorar o desempenho, a precisão e a estabilidade do processo. Vamos dar uma olhada nos principais parâmetros que podem ser usados em projetos:

• Headless-mode. O Puppeteer pode ser executado no modo headless (sem interface) ou headful (com interface).

const browser = await puppeteer.launch({ headless: true });  // Padrão true

• Personalizar tamanhos de janela e agentes de usuário:

const browser = await puppeteer.launch({

    args: ['--window-size=1920,1080']

});

const page = await browser.newPage();

await page.setViewport({ width: 1920, height: 1080 });

• Change User-Agent (ajuda a evitar bloqueios e a imitar diferentes dispositivos):

await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, como Gecko) Chrome/131.0.0.0.0.0 Safari/537.36');

• Aguardando o carregamento dos elementos necessários:

await page.waitForSelector('.dynamic-element', { visible: true });

• Navegação de espera (útil para rastrear transições entre páginas):

await Promise.all([

     page.waitForNavigation(), 

    page.click('a#next-page')  // Clicar e aguardar a navegação

]);

• Desabilitação de elementos gráficos (economiza recursos e acelera a execução do script):

const browser = await puppeteer.launch({

    args: ['--disable-gpu', '--no-sandbox']

});

• Emulação de dispositivo:

const iPhone = puppeteer.devices['iPhone X'];

await page.emulate(iPhone);

• Usar proxy:

const browser = await puppeteer.launch({

     args: ['--proxy-server=your-proxy-address']

});

• Gerenciamento de cookies e sessões:

const cookies = [{ { name: 'session', value: 'abc123', domain: 'example.com' }];

await page.setCookie(....cookies);

• Passando por sistemas anti-bot (Puppeteer-extra e plugins ajudam a passar por cima da proteção de automação):

npm install puppeteer-extra puppeteer-extra-plugin-stealth

const puppeteer = require('puppeteer-extra');

const stealthPlugin = require('puppeteer-extra-plugin-stealth');

puppeteer.use(stealthPlugin());

Parâmetros para coleta de dados e monitoramento de mudanças:

• Obter texto e atributos de elementos:

const title = await page.$eval('h1', element => element.textContent);

• Para rastrear alterações, use MutationObserver (um objeto JavaScript incorporado no navegador que permite rastrear e reagir a alterações no DOM, como adicionar ou remover elementos, alterar atributos ou a estrutura do documento):

await page.exposeFunction('onMutation', (mutations) => {

     console.log('DOM foi alterado:', mutações);

});

await page.evaluate(() => {

     const observer = new MutationObserver((mutations) => {

 window.onMutation(mutations);

      });

      observer.observe(document.body, { childList: true, subtree: true });

});

Exemplo de código de raspagem da Web

Agora, aplicando o conhecimento dos parâmetros básicos do Puppeteer, especialmente no contexto de raspagem da Web, vamos criar um exemplo de código simples que demonstrará a operação de todos os recursos mencionados em um site de teste Books to Scrape. Vamos tentar obter informações sobre livros: 

const puppeteer = require('puppeteer');



(async () => {

   // Iniciar o navegador com parâmetros adicionais para otimização e emulação

     const browser = await puppeteer.launch({

        headless: false,    // Abrir o navegador com interface

       args: ['--no-sandbox'],  // Argumentos adicionais para melhorar o desempenho

         defaultViewport: { // Definir o tamanho da janela do navegador

              largura: 1280,

             altura: 800

           }

      });



 página = await browser.newPage();



   // Instale o agente de usuário (emulação de navegador)

     aguarde page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, como Gecko) Chrome/131.0.0.0.0 Safari/537.36');

   

   // Ir para a página de destino

    aguarde page.goto('https://books.toscrape.com/', { waitUntil: 'networkidle2' });  // Aguardando o carregamento completo da página



    // Aguardando o carregamento dos elementos da página

    aguarde page.waitForSelector('ol.row li');

   

   // Recuperar e gerar apenas títulos de livros

    const bookTitles = await page.evaluate(() => {

         const bookElements = document.querySelectorAll('ol.row li h3 a');

         return Array.from(bookElements).map(book => book.getAttribute('title') || 'No title');

     });

   

   // Saída de cada nome com numeração de lista

     console.log('Títulos de livros:');

     bookTitles.forEach((title, index) => console.log(`${index + 1}. ${title}`));



     // Emular o clique no primeiro livro para demonstrar as ações do usuário

     aguarde page.click('ol.row li h3 a');

     await new Promise(resolve => setTimeout(resolve, 1000));   // Aguardando o carregamento da página do livro



    // Manipulação do DOM: alterar o título da página

     aguarde page.evaluate(() => {

         document.querySelector('h1').innerText = 'Cabeçalho alterado com o Puppeteer!

      });



   // Crie uma captura de tela da página após a alteração do DOM

     aguarde page.screenshot({ path: 'book_page.png', fullPage: true });



   // Gerar um documento PDF a partir da página atual

     aguarde page.pdf({ path: 'book_page.pdf', format: 'A4' });



   // Monitoramento de alterações na página usando MutationObserver

     aguarde page.evaluate(() => {

         const targetNode = document.body;

 Const observer = new MutationObserver((mutationsList) => {

                for (let mutation of mutationsList) {

                   console.log('Foi detectada uma alteração:', mutação);

             }

          });

         observer.observe(targetNode, { childList: true, subtree: true, attributes: true });

      });



    aguardar browser.close();

})()()();

Código separado para rastrear alterações na página (por exemplo, o código de rastreamento de alterações na página).g., atualizações de preços ou disponibilidade de produtos) usando o código acima MutationObserver:

const puppeteer = require('puppeteer');


(async () => {

     const browser = await puppeteer.launch({ headless: true });

    const page = await browser.newPage();


    aguarde page.goto('https://books.toscrape.com/');


    // Função de exportação para passar dados do navegador para o Node.js

      aguarde page.exposeFunction('onMutation', (mutations) => {

        mutations.forEach(mutation => {

             console.log('Change:', mutation); // Registre as alterações

          });

      });


   // Implementar MutationObserver na página

     aguarde page.evaluate(() => {

 Const targetNode = document.querySelector('.row'); // Observe o contêiner com a lista de livros


        const config = { childList: true, subtree: true, attributes: true }; // Configurações de observação

        const observer = new MutationObserver((mutationsList) => {

 window.onMutation(mutationsList.map(mutation => ({ {

                     type: mutation.type,

                    addedNodes: Array.from(mutation.addedNodes).map(node => node.outerHTML),

                 removedNodes: Array.from(mutation.removedNodes).map(node => node.outerHTML)

               }));

          }));

         observer.observe(targetNode, config);

      });


      // Simular a interação para criar alterações (por exemplo, atualização de página)

     await page.click('li.next a');  // Vá para a próxima página para demonstrar as alterações


    // Aguardar que o MutationObserver capture as alterações

      aguarde new Promise(resolve => setTimeout(resolve, 5000));

     aguardar browser.close();

})()()();

Code parsing:

• Expor função. Método page.exposeFunction() permite que você crie uma função onMutation(), que passará os dados de alteração do navegador para o ambiente Node.js.

•  

• MutationObserver.B page.evaluate()implementamos o MutationObserver na página. Ele rastreia as alterações no elemento especificado (.row) onde os livros estão localizados.

• configdefine quais alterações rastrear:

• childList: adicionando ou removendo filhos.

•  

• subárvore:supervisão de todas as crianças.

•  

• atributos:alterações nos atributos do elemento.

Ações sobre alterações.Quando as alterações são detectadas, os dados são passados para a função onMutation, e os itens adicionados ou removidos são exibidos no console.

Recursos adicionais

Detectar sites de API ocultos

Muitos sites usam APIs internas para carregar dados dinamicamente. Essas solicitações geralmente ficam ocultas para os usuários normais, mas o Puppeteer ajuda você a descobri-las. 

1. DevTools.Use a guia Network nas ferramentas de desenvolvedor do navegador para rastrear solicitações. O Puppeteer pode executar programaticamente o proxy DevTools:

await page.setRequestInterception(true);

page.on('request', request => {

     console.log(request.url());

    request.continue();

});

2. Análise de solicitações XHR.  O Puppeteer captura todas as solicitações XHR e facilita a visualização dos dados retornados.

Quando é melhor usar o Puppeteer e quando é melhor usar uma API?

Puppeteer: ideal para sites complexos que exigem simulação de ações do usuário ou manipulação da dinâmica do JavaScript.

API: melhor usada para dados estruturados (como JSON) e carregamento rápido. Se o site fornecer uma API oficial, essa é uma maneira mais eficiente e legítima de coletar informações.

Customize Change Notifications

O monitoramento usando o Puppeteer pode ser ampliado com notificações para receber alertas quando ocorrerem alterações importantes:

1. Use WebSockets ou Webhooks: enviando dados para um servidor ou mensageiro (e.g.,  Slack).
2. Integração de e-mail:envio de e-mail quando são detectadas alterações.

Exemplo de monitoramento e notificações usando o Puppeteer:

const puppeteer = require('puppeteer');

const nodemailer = require('nodemailer');



(async () => {

     const browser = await puppeteer.launch({ headless: true });

    const page = await browser.newPage();

    aguarde page.goto('https://example.com');



   // Alterar o monitoramento

     const initialContent = await page.content();

   

     setInterval(async () => {

         const currentContent = await page.content();

 Se (currentContent !== initialContent) {

           // Enviar notificação

 Enviar e-mail('Mudança no site!', 'O conteúdo foi atualizado.');

           }

     }, 30000);  // Verificar a cada 30 segundos

   

 função async sendEmail(subject, text) {

          let transporter = nodemailer.createTransport({ /* SMTP settings */ });

         await transporter.sendMail({ from: 'seu_email', to: 'notificar_email', subject, text });

      }



    aguardar browser.close();

})();

Integração com o CapMonster Cloud para solução CAPTCHA

Os sites geralmente usam captchas para se protegerem contra a coleta automatizada de dados. O Puppeteer permite que você integre uma ferramenta eficaz para contornar automaticamente diferentes tipos de captchas CapMonster Cloudpara resolvê-los: 

1. Instalando a biblioteca oficial: 

npm i @zennolab_com/capmonstercloud-client

2. Um exemplo de extração de dados de captcha dinâmicos da Amazon e sua resolução usando CapMonster Cloud:

const puppeteer = require('puppeteer');

const { CapMonsterCloudClientFactory, ClientOptions, AmazonProxylessRequest } = require('@zennolab_com/capmonstercloudclient');


(async () => {

 Const browser = await puppeteer.launch({ headless: false }); // Defina true para o modo headless

 Const page = await browser.newPage();


  const pageUrl = 'https://example.com'; // URL da página de captcha

  aguarde page.goto(pageUrl);



  // Recuperar parâmetros do CAPTCHA da página da Web

  const captchaParams = await page.evaluate(() => {

     const gokuProps = window.gokuProps || {};

     const scripts = Array.from(document.querySelectorAll('script'));


 Retorno {

      websiteKey: gokuProps.key || "Not found",

      context: gokuProps.context || "Not found",

      iv: gokuProps.iv || "Não encontrado",

 challengeScriptUrl: scripts.find(script => script.src.includes('challenge.js'))?.src || "Não encontrado",

      captchaScriptUrl: scripts.find(script => script.src.includes('captcha.js'))?.src || "Não encontrado"?

     };

  });

  console.log('Captcha Parameters:', captchaParams); // Verifique os parâmetros extraídos

  // Crie uma tarefa a ser enviada para o servidor CapMonster Cloud

 Const cmcClient = CapMonsterCloudClientFactory.Create(new ClientOptions({

     clientKey: 'your_api_key', // Substitua por sua chave de API do CapMonster Cloud

  }));


  // Personalize a consulta para resolver o captcha

  const amazonProxylessRequest = new AmazonProxylessRequest({

     websiteURL: pageUrl,

    challengeScript: captchaParams.challengeScriptUrl,

     captchaScript: captchaParams.captchaScriptUrl,

     websiteKey: captchaParams.websiteKey,

     contexto: captchaParams.context,

     iv: captchaParams.iv,

     cookieSolution: false,

  });

  // Solução CAPTCHA

  const response = await cmcClient.Solve(amazonProxylessRequest);

  if (!response?.solution) {

    console.error('CAPTCHA not solved.');

    aguarde browser.close();

    process.exit(1);

  }

  console.log('Captcha Resolvido:', response.solution);

  aguarde browser.close();

  console.log('DONE');

  process.exit(0);

})()

.catch(err => {

 console.error(err);

  process.exit(1);

});

Aspectos éticos e legais da raspagem da Web

É importante lembrar normas éticas e cumprir com as regras estabelecidaspara garantir que a raspagem da Web seja legal e segura. Princípios fundamentais da raspagem responsável da Web:

1. Robôs.txt: verifique as diretivas do arquivo robots.txt, que determina quais páginas podem ser raspadas e quais não podem:

Allow: /public/

Disallow: /admin/

Não permitir: /private/

Você pode encontrar esse arquivo manualmente por meio do navegador (por exemplog.: https://example.com/robots.txt) ou usando o Puppeteer:  

const puppeteer = require('puppeteer');

(async () => {

  const browser = await puppeteer.launch();

  const page = await browser.newPage();

  // URL do arquivo robots.txt

  const robotsUrl = 'https://example.com/robots.txt';

  aguarde page.goto(robotsUrl);


  // Obter o texto do robots.txt

  const robotsText = await page.evaluate(() => document.body.innerText);

  console.log('Conteúdo do robots.txt:\n', robotsText;)

  aguarde browser.close();
})();

2. É necessário limitar a frequência das solicitações para não sobrecarregar o servidor. Use atrasos entre as solicitações (aguarde page.waitForTimeout(3000);).
3. Aspectos legais:

• Conformidade com as leis do país, certifique-se de que a raspagem não viole as leis locais.

• Não publique dados protegidos por direitos autorais sem permissão.

• Alguns sites exigem permissão explícita para coletar dados.

Agora, detalhamos os principais recursos do Puppeteer para raspagem da Web e podemos concluir que ele é uma maneira eficaz de automatizar a coleta de dados de páginas da Web, economizando tempo e fornecendo acesso a informações relevantes em tempo real. A ferramenta facilita o trabalho com conteúdo dinâmico, emula ações do usuário e várias manipulações do DOM.

O artigo contém exemplos de código que demonstram a extração de dados e o trabalho com conteúdo dinâmico. Esses exemplos o ajudarão a aprender a raspar a Web mais rapidamente e a adaptá-los às suas necessidades.

Além disso, a integração com o CapMonster Cloud é um aspecto fundamental que aumenta muito a eficiência da coleta de dados, especialmente quando se depara com páginas da Web protegidas por vários tipos de captcha. A solução de captcha muitas vezes se torna um obstáculo para os sistemas automatizados, dificultando o acesso aos dados - nesses casos, o CapMonster Cloud oferece a capacidade de contornar essas proteções com alta velocidade e precisão. 

O Puppeteer é útil para tarefas que exigem alta precisão, como monitoramento de preços ou rastreamento de notícias. O uso do modo sem cabeça e a configuração flexível ajudam a otimizar seu trabalho.

O Puppeteer não é apenas uma ferramenta de raspagem, mas também uma solução versátil para testes e várias tarefas de automação. Esperamos que esta análise o ajude a começar e o inspire a criar suas próprias soluções de automação!" 

NB: Como lembrete, o produto é usado para automatizar testes em seus próprios sites e em sites aos quais você tem acesso legal.