Cheerio vs. Puppeteer para raspagem da web

Cheerio e Puppeteer são duas bibliotecas Node.js que lhe permitem navegar programaticamente na Internet. Devido a isto, ambas são escolhas populares para aqueles que desejam construir um raspador da web node.js a partir do zero.

A fim de comparar o Cheerio com o Puppeteer, vamos construir um simples raspador da web com o Cheerio e um raspador da web com o Puppeteer. Utilizaremos ambas as ferramentas para raspar todos os links do blogue de In Plain English, uma plataforma de programação popular.

Mas antes de começarmos, vamos ver o que vamos discutir neste artigo:

• Diferenças entre Cheerio e Puppeteer  
• Construir um Raspador da Web com o Cheerio  
• Construir um Raspador da Web com o Puppeteer  
• Conclusão  

Diferenças entre Cheerio e Puppeteer

Há muitas diferenças entre essas 2 bibliotecas, e cada uma delas vem com as suas próprias características especiais que pode aproveitar para a raspagem da web.

Cheerio

• Cheerio é um analisador DOM, capaz de analisar ficheiros HTML e XML.
• É uma implementação rápida e simples do núcleo jQuery concebida especificamente para o servidor.
• Se planeia usar isto para raspar um sítio web, terá de usar o Cheerio em conjunto com uma biblioteca de cliente http do Node.js como o https://axios-http.com/docs/introAxios.

   

• O Cheerio não mostra o sítio web como um navegador (não aplica CSS nem carrega recursos externos).
• Devido a isto, terá dificuldade em tentar raspar SPAs construídas com tecnologias de vanguarda como a React.
• O Cheerio não pode interagir com um sítio (por exemplo, não pode clicar em botões) nem aceder ao conteúdo de scripts.
• Tem uma curva de aprendizagem fácil graças à sua sintaxe simples. Os usuários de jQuery se sentirão em casa aqui.
• O Cheerio é rápido em comparação com o Puppeteer.

Puppeteer

• O Puppeteer é uma ferramenta de automatização do navegador. Tem acesso a todo o motor do navegador (geralmente o Chromium).
• Isto torna-o uma opção mais versátil, em comparação com o Cheerio.
• Pode executar JavaScript, tornando-o capaz de raspar páginas dinâmicas como aplicações de página única (SPAs).
• O Puppeteer pode interagir com sítios web, o que significa que pode ser usado para clicar em botões, digitar em formulários de registo, etc.
• Tem uma curva de aprendizagem íngreme, uma vez que tem mais funcionalidades e requer frequentemente o uso de código assíncrono (ou seja, promessas/async await).
• O Puppeteer é lento em comparação com o Cheerio.

Construir um Raspador da Web com o Cheerio

Primeiro, vamos criar uma pasta chamada ‘raspador’ para o nosso código. Dentro de ‘raspador’, correr npm init -y ou yarn init -y, dependendo de ter optado por usar npm ou yarn.

Agora que temos a nossa pasta pronta e package.json inicializado, vamos instalar os nossos pacotes.

Nota: Pode consultar o nosso guia principal de raspagem da web com node.js que inclui o uso de Cheerio e Axios para raspagem da web com mais detalhe.

Passo 1 – Instalação de Cheerio

Para instalar o Cheerio, execute o seguinte comando no seu terminal:

// using npm
npm install cheerio

// or using yarn
yarn add cheerio

Passo 2 – Instalação de Axios

Axios é uma biblioteca popular para fazer pedidos HTTP no Node.js. Pode ser utilizado para fazer chamadas de API, obter dados de sítios web, e muito mais.

Para o instalar, execute o seguinte comando no seu terminal:

// using npm
npm install axios

// or using yarn
yarn add axios

Utilizamos Axios para fazer pedidos HTTP para o sítio web que pretendemos raspar. A resposta que obtemos do sítio web é sob a forma de HTML, que podemos então analisar e extrair a informação de que precisamos utilizando o Cheerio.

Passo 3 – Preparar o nosso raspador

Vamos entrar na nossa pasta ‘raspador’ e criar um ficheiro chamado cheerio.js.

Aqui está a estrutura básica do código para começar com a raspagem da web usando Cheerio e Axios:

const axios = require('axios');
const cheerio = require('cheerio');

axios
 .get("https://plainenglish.io/blog")
 .then((response) => {
   // Initialize links array which we will push the links to later
   let links = [];

   // HTML Markup
   const body = response.data;

   // Load HTML data and initialize cheerio
   const $ = cheerio.load(body);

   // CSS selector for the target element
   const element = ".PostPreview_container__82q9E";

   // Loop through each matching element and extract the text content
   $(element).each(function () {
     // Loop through each matching element and get the href attribute of each element
     const _link = $(this).find("a").prop("href");

     // We check if the link is undefined because cheerio will return undefined if the element doesn't exist
     if (_link !== undefined) {
       // Add the link to the links array
       links.push(`https://plainenglish.io` + _link);
     }
   });

   return links;
 })
 .then((response) => {
   console.log(response);
 });

No código acima, precisamos primeiro as bibliotecas Axios e Cheerio.

Passo 5 – Processamento dos dados

A seguir, fazemos um pedido get() para “https://plainenglish.io/blog”. Porque o Axios é assíncrono, nós encadeamos a nossa função get() com then().

Inicializamos uma matriz de links vazia para capturar os links que planeamos raspar.

Passamos então o response.data de Axios para Cheerio com:

// HTML Markup
const body = response.data;

// Load HTML data and initialize cheerio
const $ = cheerio.load(body);
We choose which selector we plan to target, in our case:
// CSS selector for the target element
const element = ".PostPreview_container__82q9E";

Passo 5 – Processamento dos dados

Depois, fazemos um laço através de cada elemento correspondente, encontramos a etiqueta <a>, e agarramos o valor da propriedade href. Para cada partida, empurramo-la para a nossa matriz de links:

// Loop through each matching element and extract the text content
$(element).each(function () {
 // Loop through each matching element and get the href attribute of each element
 const _link = $(this).find("a").prop("href");

 // We check if the link is undefined because cheerio will return undefined if the element doesn't exist
 if (_link !== undefined) {
   // Add the link to the links array
   links.push(`https://plainenglish.io` + _link);
 }
});

Depois os devolvemos, encadeamos outro then() e enviamos ao console.log a nossa resposta.

Passo 6 – Resultados finais

Finalmente, se abrirmos um terminal de dentro da nossa pasta ‘raspador’, podemos correr o node.js cheerio.js. Isto irá executar todo o código do nosso ficheiro cheerio.js. Deverá ver os URLs da nossa matriz de links a serem enviados para a consola. Ficará algo parecido com isto:

 'https://plainenglish.io/blog/how-to-implement-a-search-bar-in-react-js',
 'https://plainenglish.io/blog/how-to-build-data-driven-surveys-with-react-rest-api-surveyjs',
 'https://plainenglish.io/blog/handle-errors-in-angular-with-httpclient-and-rxjs',
 'https://plainenglish.io/blog/deploying-a-localhost-server-with-node-js-and-express-js',
 'https://plainenglish.io/blog/complete-guide-to-data-center-migration',
 'https://plainenglish.io/blog/build-a-stripe-app-with-typescript-and-node-js-part-2',
 ... 861 more items

E assim mesmo, conseguimos raspar o sítio In Plain English!

A partir daqui, podemos ir um passo mais longe e guardar os dados num ficheiro, em vez de simplesmente enviá-los para a consola.

O Cheerio e o Axios facilitam a execução de raspagem da web no Node.js. Com apenas algumas linhas de código, é possível extrair dados de sítios web e utilizá-los para vários fins.

Construir um Raspador da Web com Puppeteer

Vamos para a nossa pasta ‘raspador’ e criemos um ficheiro chamado puppeteer.js. Já inicializámos o nosso package.json, mas se saltou para esta secção, vá em frente e inicialize agora esse ficheiro.

Uma vez inicializado, vamos instalar o Puppeteer.

Passo 1 – Instalação do Puppeteer

Para instalar o Puppeteer, executar um dos seguintes comandos:

// using npm
npm install puppeteer

// or using yarn
yarn add puppeteer

Passo 2 – Preparar o nosso raspador

Vamos para a nossa pasta ‘raspador’ e criemos um ficheiro chamado puppeteer.js.

Aqui está a estrutura básica do código para começar com a raspagem da web usando o Puppeteer:

const puppeteer = require("puppeteer");

// Because everything in Puppeteer is asynchronous,
// we wrap all of our code inside of an async IIFE
(async () => {
 // Initialize links array which we will push the links to later
 let links = [];

 // Launch Puppeteer
 const browser = await puppeteer.launch();

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

 // Go to URL
 await page.goto("https://plainenglish.io/blog");

 // Set screen size
 await page.setViewport({ width: 1080, height: 1024 });

 // CSS selector for the target element
 const element = ".PostPreview_container__82q9E";

 // Get all matching elements
 const elements = await page.$$(element);

 // Wrapped with Promise.all to wait for all promises to resolve before continuing
 const _links = await Promise.all(
   // Get the href attribute of each element
   elements.map(async (el) => el.evaluate((el) => el.children[0].href))
 );

 if (_links.length) {
   // If there are any links
   _links.forEach((url) => {
     // Loop through each link
     links.push(url); // Add the link to the links array
   });
 }

 console.log(links);

 await browser.close();
})();

No código acima, precisamos primeiro a biblioteca Puppeteer.

Passo 3 – Criação de uma IIFE

A seguir, criamos uma expressão de função imediatamente invocada (IIFE). Como tudo no Puppeteer é assíncrono, colocamos async no início. Em outras palavras, temos isto:

(async () => {
// ...code goes here
}()

Dentro da nossa IIFE assimétrica, criamos uma matriz de links vazia, que utilizaremos para capturar os links do blogue que estamos a raspar.

// Initialize links array which we will push the links to later
let links = []

A seguir, executamos o Puppeteer, abrimos uma nova página, navegamos para um URL, e definimos o suporte de visualização da página (o tamanho da tela).

 // Launch Puppeteer
 const browser = await puppeteer.launch();

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

 // Go to URL
 await page.goto("https://plainenglish.io/blog");

 // Set screen size
 await page.setViewport({ width: 1080, height: 1024 });

Por defeito, o Puppeteer corre em ‘modo sem cabeça’. Isto significa que não abre um navegador que se possa ver visualmente. No entanto, definimos um tamanho de visualização pois queremos que o Puppeteer navegue pelo sítio a uma certa largura e altura.

Nota: Se decidir que gostaria de ver o que o “Puppeteer” está a fazer em tempo real, pode passar a opção “headless: false” como parâmetro, assim:

// Launch Puppeteer
const browser = await puppeteer.launch({ headless: false });

Passo 5 – Processamento dos dados

A partir daqui, escolhemos qual é o seletor que pretendemos visar, no nosso caso:

// CSS selector for the target element
const element = ".PostPreview_container__82q9E";

E executamos o que equivale à querySelectorAll() para o nosso elemento alvo:

// Get all matching elements
const elements = await page.$$(element);

Nota: $$ não é o mesmo que querySelectorAll, por isso não espere ter acesso a todas as mesmas coisas.

Passo 5 – Processamento dos dados

Agora que temos os nossos elementos armazenados dentro de elementos, mapeamos cada elemento para retirar a propriedade href:

// Wrapped with Promise.all to wait for all promises to resolve before continuing
const _links = await Promise.all(
 // Get the href attribute of each element
 elements.map(async (el) => el.evaluate((el) => el.children[0].href))
);

No nosso caso de uso específico, temos el.children[0], pois sei que o primeiro elemento secundário do nosso elemento alvo é uma etiqueta a, e é a etiqueta a cujo valor eu quero.

Em seguida, fazemos um laço através de cada elemento mapeado e empurramos o valor para a nossa matriz de links, desta forma:

if (_links.length) {
 // If there are any links
 _links.forEach((url) => {
   // Loop through each link
   links.push(url); // Add the link to the links array
 });
}

Finalmente, enviamos os links ao console.log, e depois fechamos o navegador:

console.log(links);

await browser.close();

Nota: Se não fechar o navegador, este permanecerá aberto e o seu terminal ficará suspenso.

Passo 6 – Resultados finais

Agora, se abrirmos um terminal de dentro da nossa pasta ‘raspador’, podemos executar node.js puppeteer.js. Isto executará todo o código do nosso ficheiro puppeteer.js. Deverá ver os URLs da nossa matriz de links a serem enviados para a consola. Ficará algo parecido com isto:

'https://plainenglish.io/blog/how-to-implement-a-search-bar-in-react-js',
 'https://plainenglish.io/blog/how-to-build-data-driven-surveys-with-react-rest-api-surveyjs',
 'https://plainenglish.io/blog/handle-errors-in-angular-with-httpclient-and-rxjs',
 'https://plainenglish.io/blog/deploying-a-localhost-server-with-node-js-and-express-js',
 'https://plainenglish.io/blog/complete-guide-to-data-center-migration',
 'https://plainenglish.io/blog/build-a-stripe-app-with-typescript-and-node-js-part-2',
 ... 861 more items

E assim mesmo, conseguimos raspar o sítio web com o Puppeteer!

Puppeteer é uma ferramenta poderosa para raspar e automatizar tarefas de navegação na web. Fornece uma API rica para tarefas de raspagem e automatização de navegação na web. Pode utilizá-la para extrair informação de sítios web, gerar capturas de ecrã e PDFs, e realizar muitas outras tarefas.

Se quiser usar o Puppeteer para raspar os principais sítios, deve considerar integrar o Puppeteer com um proxy, para evitar ficar bloqueado.

Nota: Existem outras alternativas ao “Puppeteer”, tais como o Selenium, ou o IDE para Raspador da Web. Ou, se quiser poupar tempo, pode saltar todo o processo de raspagem da web completamente, procurando conjuntos de dados prontos.

Conclusão

Se procura raspar páginas estáticas sem a necessidade de interações tais como cliques e envios de formulários (ou qualquer tipo de tratamento de eventos), o Cheerio é a escolha ideal.

No entanto, se o sítio web depende do JavaScript para a injeção de conteúdo, ou se precisa de tratar eventos, é necessário o Puppeteer.

Qualquer que seja a abordagem que decidir, vale a pena notar que este caso de uso específico foi bastante simples. Se tentar raspar algo mais complexo, como um sítio web dinâmico (YouTube, Twitter, ou Facebook, por exemplo), poderá encontrar-se em águas bastante profundas.  

Se procura raspar sítios web e não quer perder semanas a tentar decifrar uma solução, talvez seja melhor procurar uma solução pronta a usar, tal como o IDE para Raspador da Web.

O IDE da Bright Data inclui funções de raspagem pré-fabricadas, infraestrutura proxy de desbloqueio sofisticada incorporada, scripts de navegador em JavaScript, depuração, e vários modelos de raspagem prontos a usar para sítios web populares.