Como coletar dados automaticamente de um site usando o Node.js e o Puppeteer

O autor selecionou o Free and Open Source Fund para receber uma doação como parte do programa Write for DOnations.

Introdução

O scraping (coleta de dados) é o processo de automatizar a coleta de dados da Web. O processo envolve geralmente a implementação de um “rastreador” que navega automaticamente pela Web e coleta dados de páginas selecionadas. Existem muitas razões pelas quais pode ser interessante coletar dados automaticamente. A principal delas é que esse processo torna a coleta de dados muito mais rápida, eliminando a necessidade de um processo manual. O scraping também funciona como uma solução nos casos em que a coleta de dados é desejada ou necessária, mas o site não fornece uma API.

Neste tutorial, você irá construir um aplicativo Web de scraping usando o Node.js e o Puppeteer. Seu app irá ganhar complexidade à medida que você progredir. Primeiro, você irá programar seu app para abrir o Chromium e carregar um site especial projetado como uma área restrita de scraping na internet: books.toscrape.com. Nos dois passos seguintes, você irá coletar todos os livros em uma única página do books.toscrape e então todos os livros em várias páginas. Nos passos restantes, irá filtrar seu scraping por categoria de livro e então salvar seus dados como um arquivo JSON.

Pré-requisitos

• Node.js instalado em sua máquina de desenvolvimento. Esse tutorial foi testado no Node.js versão 12.18.3 e no npm versão 6.14.6. Você pode seguir este guia para instalar o Node.js no macOS ou no Ubuntu 18.04, ou seguir este guia para instalar o Node.js no Ubuntu 18.04 usando um PPA.

Passo 1 — Configurando o coletor de dados Web

Com o Node.js instalado, já é possível começar a configurar seu coletor de dados Web. Primeiro, você irá criar um diretório raiz do projeto e então instalar as dependências necessárias. Esse tutorial exige apenas uma dependência, e você irá instalá-la usando o gerenciador de pacotes padrão do Node.js, o npm. O npm já vem instalado previamente junto com o Node.js, de forma que não é necessário instalá-lo.

Crie uma pasta para este projeto e então entre nela:

mkdir book-scraper
cd book-scraper

Você irá executar todos os comandos subsequentes a partir deste diretório.

Precisamos instalar um pacote usando o npm (node package manager). Primeiro, inicialize o npm para criar um arquivo packages.json, que irá gerenciar as dependências e os metadados do seu projeto.

Inicialize o npm para o seu projeto:

npm init

O npm irá apresentar uma sequência de prompts. Você pode pressionar ENTER para todos os prompts, ou adicionar descrições personalizadas. Certifique-se de pressionar ENTER e deixar os valores padrão intactos quando questinado sobre o entry point: e test command:. De maneira alternativa, você pode passar a flag y para o npm — npm init -y— ela fará com que todos os valores padrão sejam submetidos para você.

Seu resultado se parecerá com este:

Output
{
  "name": "sammy_scraper",
  "version": "1.0.0",
  "description": "a web scraper",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "sammy the shark",
  "license": "ISC"
}


Is this OK? (yes) yes

Digite yes e pressione ENTER. O npm irá salvar esse resultado como seu arquivo package.json.

Agora, use o npm para instalar o Puppeteer:

npm install --save puppeteer

Esse comando instala tanto o Puppeteer quanto uma versão do Chromium que a equipe do Puppeteer sabe que irá funcionar com sua API.

Em máquinas Linux, o Puppeteer pode exigir algumas dependências adicionais.

Caso esteja usando o Ubuntu 18.04, verifique o menu suspenso ‘Debian Dependencies’ dentro da seção ‘Chrome headless doesn’t launch on UNIX’ dos documentos de solução de problemas do Puppeteer. Você pode usar o comando a seguir como auxílio para encontrar quaisquer dependências que estejam faltando:

ldd chrome | grep not

Com o npm, o Puppeteer e as dependências adicionais instaladas, seu arquivo package.json exige uma última configuração antes que você possa começar a codificar. Neste tutorial, você irá iniciar seu app a partir da linha de comando com npm run start. É necessário adicionar algumas informações sobre esse script start no package.json. Mais especificamente, é preciso adicionar uma linha abaixo da diretiva scripts sobre seu comando start.

Abra o arquivo no seu editor de texto de preferência:

nano package.json

Encontre a seção scripts: e adicione as seguintes configurações. Lembre-se de colocar uma vírgula no final da linha test do script, ou seu arquivo não funcionará corretamente.

Output
{
  . . .
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"start": "node index.js"
  },
  . . .
  "dependencies": {
    "puppeteer": "^5.2.1"
  }
}

Você também verá que o puppeteer agora aparece sob dependências, próximos do final do arquivo. Seu arquivo package.json não exigirá mais revisões. Salve suas alterações e saia do seu editor.

Agora, você está pronto para começar a codificar seu coletor de dados. No próximo passo, você irá configurar uma instância de navegador e testar funcionalidades básicas do seu coletor de dados.

Passo 2 — Configurando a instância do navegador

Ao abrir um navegador tradicional, você pode fazer coisas como clicar em botões, navegar com seu mouse, digitar, abrir as ferramentas de desenvolvedor e muito mais. Um navegador sem periféricos como o Chromium lhe permite fazer essas mesmas coisas, mas programaticamente e sem uma interface de usuário. Neste passo, você irá configurar a instância de navegador do seu coletor de dados. Ao iniciar seu aplicativo, ele irá automaticamente abrir o Chromium e navegar para books.toscrape.com. Essas ações iniciais irão formar a base do seu programa.

Seu coletor de dados exigirá quatro arquivos .js: browser.js, index.js, pageController.js e pageScraper.js. Neste passo, você irá criar todos os quatro arquivos e então atualizá-los continuamente enquanto seu programa cresce em complexidade. Comece com o browser.js. Esse arquivo irá conter o script que inicia seu navegador.

A partir do diretório raiz do seu projeto, crie e abra o browser.js em um editor de texto:

nano browser.js

Primeiro, você irá require (solicitar) o Puppeteer e então criar uma função async chamada startBrowser(). Essa função irá iniciar o navegador e retornar uma instância dele. Adicione o seguinte código:

const puppeteer = require('puppeteer');

async function startBrowser(){
	let browser;
	try {
	    console.log("Opening the browser......");
	    browser = await puppeteer.launch({
	        headless: false,
	        args: ["--disable-setuid-sandbox"],
	        'ignoreHTTPSErrors': true
	    });
	} catch (err) {
	    console.log("Could not create a browser instance => : ", err);
	}
	return browser;
}

module.exports = {
	startBrowser
};

O Puppeteer tem um método .launch() que inicia uma instância de um navegador. Esse método retorna uma Promessa, então é necessário garantir que a Promesa resolva usando um bloco .then ou await.

Você está usando o await para garantir que a Promessa resolva, envolvendo essa instância em torno de um bloco de código try-catch e então retornando uma instância do navegador.

Observe que o método .launch() recebe um parâmetro JSON com diversos valores:

• headless - false significa que o navegador será executado com uma Interface para que você possa assistir ao seu script sendo executado, enquanto true significa que o navegador será executado em modo sem periféricos. No entanto, observe que se você quiser implantar seu coletor de dados na nuvem, deve redefinir headless para true. A maioria das máquinas virtuais são sem periféricos e não incluem uma interface de usuário. Dessa forma, o navegador só pode ser executado no modo sem periféricos. O Puppeteer também inclui um modo headful (com periféricos), mas que deve ser usado exclusivamente para fins de teste.
• ignoreHTTPSErrors - true permite que você visite sites que não estão hospedados em um protocolo HTTPS seguro e ignore quaisquer erros relacionados ao HTTPS.

Salve e feche o arquivo.

Agora, crie seu segundo arquivo .js, o index.js:

nano index.js

Aqui você irá usar o require para o browser.js e o pageController.js. Em seguida, irá chamar a função startBrowser() e passar a instância do navegador criada para nosso controlador de páginas, que irá direcionar suas ações. Adicione as linhas a seguir:

const browserObject = require('./browser');
const scraperController = require('./pageController');

//Start the browser and create a browser instance
let browserInstance = browserObject.startBrowser();

// Pass the browser instance to the scraper controller
scraperController(browserInstance)

Salve e feche o arquivo.

Crie seu terceiro arquivo .js, o pageController.js:

nano pageController.js

O pageController.js controla seu processo de coleta de dados. Ele usa a instância do navegador para controlar o arquivo pageScraper.js, onde todos os scripts de coleta de dados são executados. Por fim, você irá usá-lo para especificar qual categoria de livro deseja coletar. Por enquanto, você só deseja, no entanto, garantir que seja capaz de abrir o Chromium e navegar até uma página da Web:

const pageScraper = require('./pageScraper');
async function scrapeAll(browserInstance){
	let browser;
	try{
		browser = await browserInstance;
		await pageScraper.scraper(browser);	
		
	}
	catch(err){
		console.log("Could not resolve the browser instance => ", err);
	}
}

module.exports = (browserInstance) => scrapeAll(browserInstance)

Esse código exporta uma função que toma a instância do navegador e a passa para uma função chamada scrapeAll(). Essa função, por sua vez, passa essa instância para o pageScraper.scraper() como um argumento que é usado para fazer a coleta de páginas.

Salve e feche o arquivo.

Por fim, crie seu último arquivo .js, o pageScraper.js:

nano pageScraper.js

Aqui você irá criar um objeto literal com uma propriedade url e um método scraper(). O url é o URL da página Web na qual deseja fazer a coleta, enquanto que o método scraper() contém o código que irá realizar a coleta de dados em si, embora neste estágio ele meramente navegue até uma URL. Adicione as linhas a seguir:

const scraperObject = {
	url: 'http://books.toscrape.com',
	async scraper(browser){
		let page = await browser.newPage();
		console.log(`Navigating to ${this.url}...`);
		await page.goto(this.url);
		
	}
}

module.exports = scraperObject;

O Puppeteer possui um método newPage() que cria uma nova instância de página no navegador, e essas instâncias de página podem fazer algumas coisas. Em nosso método scraper(), você criou uma instância de página e então usou o método page.goto() para navegar até a página inicial do books.toscrape.com.

Salve e feche o arquivo.

A estrutura de arquivos do seu programa agora está completa. O primeiro nível da árvore de diretórios do seu projeto se parecerá com isto:

Output
.
├── browser.js
├── index.js
├── node_modules
├── package-lock.json
├── package.json
├── pageController.js
└── pageScraper.js

Agora, execute o comando npm run start e acompanhe seu aplicativo coletor de dados enquanto ele é executado:

npm run start

Ele irá abrir automaticamente uma instância do navegador Chromium, abrir uma nova página no navegador e navegar até books.toscrape.com.

Neste passo, você criou um aplicativo Puppeteer que abriu o Chromium e carregou a página inicial de uma livraria online fictícia, books.toscrape.com. No próximo passo, você irá coletar os dados de todos os livros nessa página inicial.

Passo 3 — Coletando os dados de uma única página

Antes de adicionar mais funcionalidades ao seu aplicativo coletor de dados, abra seu navegador Web de preferência e navegue manualmente até a página inicial de books to scrape. Navegue pelo site e observe como os dados são estruturados.

Você verá uma seção de categoria à esquerda e os livros exibidos à direita. Ao clicar em um livro, o navegador irá até uma nova URL que exibirá informações relevantes sobre esse livro em particular.

Neste passo, esse comportamento será replicado, mas em código. Você fará a automação do processo de navegar pelo site e consumir seus dados.

Primeiro, se você inspecionar o código fonte para a página inicial usando as ferramentas de desenvolvedor dentro do seu navegador, verá que a página lista os dados de cada livro sob uma etiqueta section. Dentro da etiqueta section, todos os livros estão sob uma etiqueta list (li), e é aqui que você encontra o link para a página dedicada do livro, seu preço e a disponibilidade em estoque.

Você irá coletar essas URLs de livros, filtrando por livros que estão em estoque. Isso será feito navegando até a página de cada livro e coletando os dados deste livro.

Reabra seu arquivo pageScraper.js:

nano pageScraper.js

Adicione o conteúdo destacado a seguir: Você irá aninhar outro bloco await dentro de await page.goto(this.url):

const scraperObject = {
    url: 'http://books.toscrape.com',
    async scraper(browser){
        let page = await browser.newPage();
		console.log(`Navigating to ${this.url}...`);
		// Navigate to the selected page
		await page.goto(this.url);
		// Wait for the required DOM to be rendered
		await page.waitForSelector('.page_inner');
		// Get the link to all the required books
		let urls = await page.$$eval('section ol > li', links => {
			// Make sure the book to be scraped is in stock
			links = links.filter(link => link.querySelector('.instock.availability > i').textContent !== "In stock")
			// Extract the links from the data
			links = links.map(el => el.querySelector('h3 > a').href)
			return links;
		});
		console.log(urls);
    }
}

module.exports = scraperObject;

Nesse bloco de código, você chamou o método page.waitForSelector(). Isso fez com que houvesse a espera pelo div que contém todas as informações relacionadas ao livro ser renderizado no DOM, e então você chamou o método page.$$eval(). Esse método recebe o elemento URL com o seletor section ol li (certifique-se de que seja retornado sempre somente uma string ou um número dos métodos page.$eval() e page.$$eval()).

Cada livro possui dois status; ou um livro está In Stock (em estoque) ou Out of stock (fora de estoque). Você só deseja coletar os livros que estão In Stock. Como o page.$$eval() retorna uma matriz de elementos correspondentes, você filtrou essa matriz para garantir que estivesse trabalhando apenas com livros em estoque. Você fez isso procurando e avaliando a classe .instock.availability. Em seguida, mapeou a propriedade href dos links dos livros e a retornou do método.

Salve e feche o arquivo.

Execute seu aplicativo novamente:

npm run start

O navegador será aberto. Navegue até a página Web e então feche-a assim que a tarefa for concluída. Agora, verifique seu console; ele irá conter todas as URLs coletadas:

Output
> book-scraper@1.0.0 start /Users/sammy/book-scraper
> node index.js

Opening the browser......
Navigating to http://books.toscrape.com...
[
  'http://books.toscrape.com/catalogue/a-light-in-the-attic_1000/index.html',
  'http://books.toscrape.com/catalogue/tipping-the-velvet_999/index.html',
  'http://books.toscrape.com/catalogue/soumission_998/index.html',
  'http://books.toscrape.com/catalogue/sharp-objects_997/index.html',
  'http://books.toscrape.com/catalogue/sapiens-a-brief-history-of-humankind_996/index.html',
  'http://books.toscrape.com/catalogue/the-requiem-red_995/index.html',
  'http://books.toscrape.com/catalogue/the-dirty-little-secrets-of-getting-your-dream-job_994/index.html',
  'http://books.toscrape.com/catalogue/the-coming-woman-a-novel-based-on-the-life-of-the-infamous-feminist-victoria-woodhull_993/index.html',
  'http://books.toscrape.com/catalogue/the-boys-in-the-boat-nine-americans-and-their-epic-quest-for-gold-at-the-1936-berlin-olympics_992/index.html',
  'http://books.toscrape.com/catalogue/the-black-maria_991/index.html',
  'http://books.toscrape.com/catalogue/starving-hearts-triangular-trade-trilogy-1_990/index.html',
  'http://books.toscrape.com/catalogue/shakespeares-sonnets_989/index.html',
  'http://books.toscrape.com/catalogue/set-me-free_988/index.html',
  'http://books.toscrape.com/catalogue/scott-pilgrims-precious-little-life-scott-pilgrim-1_987/index.html',
  'http://books.toscrape.com/catalogue/rip-it-up-and-start-again_986/index.html',
  'http://books.toscrape.com/catalogue/our-band-could-be-your-life-scenes-from-the-american-indie-underground-1981-1991_985/index.html',
  'http://books.toscrape.com/catalogue/olio_984/index.html',
  'http://books.toscrape.com/catalogue/mesaerion-the-best-science-fiction-stories-1800-1849_983/index.html',
  'http://books.toscrape.com/catalogue/libertarianism-for-beginners_982/index.html',
  'http://books.toscrape.com/catalogue/its-only-the-himalayas_981/index.html'
]

Esse é um ótimo começo, mas é desejável coletar todos os dados relevantes para um livro em particular, e não apenas sua URL. Agora, você irá usar essas URLs para abrir cada página e coletar o título do livro, autor, preço, disponibilidade, código de barras, descrição e a URL da imagem.

Abra o pageScraper.js novamente:

nano pageScraper.js

Adicione o código a seguir, que irá percorrer em loop todos os links coletados, abrir uma nova instância de página e então recuperar os dados relevantes:

const scraperObject = {
    url: 'http://books.toscrape.com',
    async scraper(browser){
        let page = await browser.newPage();
		console.log(`Navigating to ${this.url}...`);
		// Navigate to the selected page
		await page.goto(this.url);
		// Wait for the required DOM to be rendered
		await page.waitForSelector('.page_inner');
		// Get the link to all the required books
		let urls = await page.$$eval('section ol > li', links => {
			// Make sure the book to be scraped is in stock
			links = links.filter(link => link.querySelector('.instock.availability > i').textContent !== "In stock")
			// Extract the links from the data
			links = links.map(el => el.querySelector('h3 > a').href)
			return links;
		});


        // Loop through each of those links, open a new page instance and get the relevant data from them
		let pagePromise = (link) => new Promise(async(resolve, reject) => {
			let dataObj = {};
			let newPage = await browser.newPage();
			await newPage.goto(link);
			dataObj['bookTitle'] = await newPage.$eval('.product_main > h1', text => text.textContent);
			dataObj['bookPrice'] = await newPage.$eval('.price_color', text => text.textContent);
			dataObj['noAvailable'] = await newPage.$eval('.instock.availability', text => {
				// Strip new line and tab spaces
				text = text.textContent.replace(/(\r\n\t|\n|\r|\t)/gm, "");
				// Get the number of stock available
				let regexp = /^.*\((.*)\).*$/i;
				let stockAvailable = regexp.exec(text)[1].split(' ')[0];
				return stockAvailable;
			});
			dataObj['imageUrl'] = await newPage.$eval('#product_gallery img', img => img.src);
			dataObj['bookDescription'] = await newPage.$eval('#product_description', div => div.nextSibling.nextSibling.textContent);
			dataObj['upc'] = await newPage.$eval('.table.table-striped > tbody > tr > td', table => table.textContent);
			resolve(dataObj);
			await newPage.close();
		});

		for(link in urls){
			let currentPageData = await pagePromise(urls[link]);
			// scrapedData.push(currentPageData);
			console.log(currentPageData);
		}

    }
}

module.exports = scraperObject;

Você tem uma matriz de todas as URLs. Você deseja que o loop percorra essa matriz, abra a URL em uma nova página, colete os dados dela, feche-a e abra uma nova página para a próxima URL na matriz. Observe que você envolveu esse código em uma Promessa. Isso foi feito porque deseja-se ser capaz de esperar que cada ação no loop seja concluída. Portanto, cada Promessa abre uma nova URL e não irá ser finalizada até que o programa tenha coletado todos os dados na URL, e que essa instância de página tenha sido fechada.

Dê uma olhada mais de perto na sua função pagePromise. Seu coletor de dados criou uma nova página para cada URL, e então você usou a função page.$eval() para direcionar os coletores de dados para detalhes relevantes que você queria coletar na nova página. Alguns dos textos contêm espaços em branco, caracteres de nova linha e outros caracteres não alfanuméricos, que você retirou usando uma expressão regular. Em seguida, você anexou o valor para cada parte dos dados coletada nesta página a um Objeto e resolveu esse objeto.

Salve e feche o arquivo.

Execute o script novamente:

npm run start

O navegador abre a página inicial e então abre cada página de livro e registra os dados coletados de cada uma dessas páginas. Esse resultado será impresso em seu console:

Output
Opening the browser......
Navigating to http://books.toscrape.com...
{
  bookTitle: 'A Light in the Attic',
  bookPrice: '£51.77',
  noAvailable: '22',
  imageUrl: 'http://books.toscrape.com/media/cache/fe/72/fe72f0532301ec28892ae79a629a293c.jpg',
  bookDescription: "It's hard to imagine a world without A Light in the Attic. [...]',
  upc: 'a897fe39b1053632'
}
{
  bookTitle: 'Tipping the Velvet',
  bookPrice: '£53.74',
  noAvailable: '20',
  imageUrl: 'http://books.toscrape.com/media/cache/08/e9/08e94f3731d7d6b760dfbfbc02ca5c62.jpg',
  bookDescription: `"Erotic and absorbing...Written with starling power."--"The New York Times Book Review " Nan King, an oyster girl, is captivated by the music hall phenomenon Kitty Butler [...]`,
  upc: '90fa61229261140a'
}
{
  bookTitle: 'Soumission',
  bookPrice: '£50.10',
  noAvailable: '20',
  imageUrl: 'http://books.toscrape.com/media/cache/ee/cf/eecfe998905e455df12064dba399c075.jpg',
  bookDescription: 'Dans une France assez proche de la nôtre, [...]',
  upc: '6957f44c3847a760'
}
...

Neste passo, você coletou dados relevantes para todos os livros na página inicial de books.toscrape.com, mas poderia adicionar ainda muito mais funcionalidades. Cada página de livros, por exemplo, é paginada; como você pega livros dessas outras páginas? Além disso, no lado esquerdo do site que você viu categorias de livros; e se você não quiser todos os livros, mas apenas aqueles de um gênero em particular? Agora, você irá adicionar esses recursos.

Passo 4 — Coletando dados de várias páginas

As páginas em books.toscrape.com que são paginadas têm um botão next abaixo do seu conteúdo, enquanto que as páginas que não são paginadas não o tem.

Você irá usar a presença desse botão para determinar se a página é paginada ou não. Como os dados em cada página têm a mesma estrutura e a mesma marcação, não será necessário escrever um coletor de dados para todas as páginas possíveis. Em vez disso, você irá usar a prática de recursão.

Primeiro, é necessário alterar um pouco a estrutura do seu código para acomodar a navegação recursiva para várias páginas.

Abra o pagescraper.js novamente:

nano pagescraper.js

Você irá adicionar uma nova função chamada scrapeCurrentPage() ao seu método scraper(). Essa função irá conter todo o código que coleta dados de uma página em particular e então clica no botão ‘next’ se ele existir. Adicione o conteúdo destacado a seguir:

const scraperObject = {
    url: 'http://books.toscrape.com',
    async scraper(browser){
		let page = await browser.newPage();
		console.log(`Navigating to ${this.url}...`);
		// Navigate to the selected page
		await page.goto(this.url);
		let scrapedData = [];
		// Wait for the required DOM to be rendered
		async function scrapeCurrentPage(){
			await page.waitForSelector('.page_inner');
			// Get the link to all the required books
			let urls = await page.$$eval('section ol > li', links => {
				// Make sure the book to be scraped is in stock
				links = links.filter(link => link.querySelector('.instock.availability > i').textContent !== "In stock")
				// Extract the links from the data
				links = links.map(el => el.querySelector('h3 > a').href)
				return links;
			});
			// Loop through each of those links, open a new page instance and get the relevant data from them
			let pagePromise = (link) => new Promise(async(resolve, reject) => {
				let dataObj = {};
				let newPage = await browser.newPage();
				await newPage.goto(link);
				dataObj['bookTitle'] = await newPage.$eval('.product_main > h1', text => text.textContent);
				dataObj['bookPrice'] = await newPage.$eval('.price_color', text => text.textContent);
				dataObj['noAvailable'] = await newPage.$eval('.instock.availability', text => {
					// Strip new line and tab spaces
					text = text.textContent.replace(/(\r\n\t|\n|\r|\t)/gm, "");
					// Get the number of stock available
					let regexp = /^.*\((.*)\).*$/i;
					let stockAvailable = regexp.exec(text)[1].split(' ')[0];
					return stockAvailable;
				});
				dataObj['imageUrl'] = await newPage.$eval('#product_gallery img', img => img.src);
				dataObj['bookDescription'] = await newPage.$eval('#product_description', div => div.nextSibling.nextSibling.textContent);
				dataObj['upc'] = await newPage.$eval('.table.table-striped > tbody > tr > td', table => table.textContent);
				resolve(dataObj);
				await newPage.close();
			});

			for(link in urls){
				let currentPageData = await pagePromise(urls[link]);
				scrapedData.push(currentPageData);
				// console.log(currentPageData);
			}
			// When all the data on this page is done, click the next button and start the scraping of the next page
			// You are going to check if this button exist first, so you know if there really is a next page.
			let nextButtonExist = false;
			try{
				const nextButton = await page.$eval('.next > a', a => a.textContent);
				nextButtonExist = true;
			}
			catch(err){
				nextButtonExist = false;
			}
			if(nextButtonExist){
				await page.click('.next > a');	
				return scrapeCurrentPage(); // Call this function recursively
			}
			await page.close();
			return scrapedData;
		}
		let data = await scrapeCurrentPage();
		console.log(data);
		return data;
	}
}

module.exports = scraperObject;

Você define a variável nextButtonExist como falsa inicialmente, para então verificar-se se o botão existe. Se o botão next existir, você define o nextButtonExists como true, para em seguida clicar no botão next. Depois disso, chama essa função de forma recursiva.

Se o nextButtonExists for falso, ele retorna a matriz scrapedData como de costume.

Salve e feche o arquivo.

Execute seu script novamente:

npm run start

Ele pode demorar um tempo para ser concluído. Sua aplicação, afinal de contas, está agora coletando dados de mais de 800 livros. Sinta-se livre para fechar o navegador ou pressionar CTRL + C para cancelar o processo.

Agora, você maximizou as capacidades do seu coletor de dados, mas criou um novo problema no processo. Agora, o problema não existe por haver poucos dados, mas sim muitos dados. No próximo passo, você irá ajustar seu aplicativo para filtrar sua coleta de dados por categoria de livro.

Passo 5 — Coletando dados por categoria

Para coletar dados por categoria, será necessário modificar tanto seu arquivo pageScraper.js quanto seu arquivo pageController.js.

Abra o pageController.js em um editor de texto:

nano pageController.js

Chame o coletor de dados para que ele colete apenas livros de viagens. Adicione as linhas a seguir:

const pageScraper = require('./pageScraper');
async function scrapeAll(browserInstance){
	let browser;
	try{
		browser = await browserInstance;
		let scrapedData = {};
		// Call the scraper for different set of books to be scraped
		scrapedData['Travel'] = await pageScraper.scraper(browser, 'Travel');
		await browser.close();
		console.log(scrapedData)
	}
	catch(err){
		console.log("Could not resolve the browser instance => ", err);
	}
}
module.exports = (browserInstance) => scrapeAll(browserInstance)

Agora, você está passando dois parâmetros para seu método pageScraper.scraper(), sendo o segundo parâmetro a categoria de livros que deseja coletar, que neste exemplo é Travel. Mas seu arquivo pageScraper.js ainda não reconhece esse parâmetro. Será necessário ajustar também esse arquivo.

Salve e feche o arquivo.

Abra o pageScraper.js:

nano pageScraper.js

Adicione o código a seguir, que irá adicionar seu parâmetro de categoria, navegar até essa página da categoria e então começar a coletar os resultados paginados:

const scraperObject = {
    url: 'http://books.toscrape.com',
    async scraper(browser, category){
        let page = await browser.newPage();
        console.log(`Navigating to ${this.url}...`);
        // Navigate to the selected page
        await page.goto(this.url);
        // Select the category of book to be displayed
		let selectedCategory = await page.$$eval('.side_categories > ul > li > ul > li > a', (links, _category) => {

			// Search for the element that has the matching text
			links = links.map(a => a.textContent.replace(/(\r\n\t|\n|\r|\t|^\s|\s$|\B\s|\s\B)/gm, "") === _category ? a : null);
			let link = links.filter(tx => tx !== null)[0];
			return link.href;
		}, category);
		// Navigate to the selected category
		await page.goto(selectedCategory);
        let scrapedData = [];
        // Wait for the required DOM to be rendered
        async function scrapeCurrentPage(){
            await page.waitForSelector('.page_inner');
            // Get the link to all the required books
            let urls = await page.$$eval('section ol > li', links => {
                // Make sure the book to be scraped is in stock
                links = links.filter(link => link.querySelector('.instock.availability > i').textContent !== "In stock")
                // Extract the links from the data
                links = links.map(el => el.querySelector('h3 > a').href)
                return links;
            });
            // Loop through each of those links, open a new page instance and get the relevant data from them
            let pagePromise = (link) => new Promise(async(resolve, reject) => {
                let dataObj = {};
                let newPage = await browser.newPage();
                await newPage.goto(link);
                dataObj['bookTitle'] = await newPage.$eval('.product_main > h1', text => text.textContent);
                dataObj['bookPrice'] = await newPage.$eval('.price_color', text => text.textContent);
                dataObj['noAvailable'] = await newPage.$eval('.instock.availability', text => {
                    // Strip new line and tab spaces
                    text = text.textContent.replace(/(\r\n\t|\n|\r|\t)/gm, "");
                    // Get the number of stock available
                    let regexp = /^.*\((.*)\).*$/i;
                    let stockAvailable = regexp.exec(text)[1].split(' ')[0];
                    return stockAvailable;
                });
                dataObj['imageUrl'] = await newPage.$eval('#product_gallery img', img => img.src);
                dataObj['bookDescription'] = await newPage.$eval('#product_description', div => div.nextSibling.nextSibling.textContent);
                dataObj['upc'] = await newPage.$eval('.table.table-striped > tbody > tr > td', table => table.textContent);
                resolve(dataObj);
                await newPage.close();
            });

            for(link in urls){
                let currentPageData = await pagePromise(urls[link]);
                scrapedData.push(currentPageData);
                // console.log(currentPageData);
            }
            // When all the data on this page is done, click the next button and start the scraping of the next page
            // You are going to check if this button exist first, so you know if there really is a next page.
            let nextButtonExist = false;
            try{
                const nextButton = await page.$eval('.next > a', a => a.textContent);
                nextButtonExist = true;
            }
            catch(err){
                nextButtonExist = false;
            }
            if(nextButtonExist){
                await page.click('.next > a');   
                return scrapeCurrentPage(); // Call this function recursively
            }
            await page.close();
            return scrapedData;
        }
        let data = await scrapeCurrentPage();
        console.log(data);
        return data;
    }
}

module.exports = scraperObject;

Esse bloco de código usa a categoria que você passou para obter a URL onde os livros dessa categoria residem.

O page.$$eval() pode receber argumentos passando o argumento como um terceiro parâmetro para o método $$eval() e o definindo como o terceiro parâmetro na callback, dessa forma:

page.$$eval('selector', function(elem, args){
	// .......
}, args)

Isso foi o que você fez em seu código: passou a categoria de livros da qual queria coletar dados, verificou todas as categorias para verificar qual é a correspondente e então retornou a URL dessa categoria.

Essa URL é então usado para navegar até a página que exibe a categoria de livros da qual deseja coletar dados usando o método page.goto(selectedCategory).

Salve e feche o arquivo.

Execute seu aplicativo novamente. Você verá que ele navega até a categoria Travel, abre de forma recursiva os livros dessa categoria página por página e registra os resultados:

npm run start

Neste passo, você primeiro coletou dados de diversas páginas e então coletou dados de diversas páginas de uma categoria em particular. No passo final, você irá modificar seu script para coletar dados de diversas categorias e então salvar esses dados coletados em um arquivo JSON em string.

Passo 6 — Coletando dados de diversas categorias e salvando-os como JSON

Neste passo final, você fará com que seu script colete dados de todas as categorias que quiser e então altere a forma do seu resultado. Em vez de registrar os resultados, você irá salvá-los em um arquivo estruturado chamado data.json.

É possível adicionar mais categorias de onde serão coletados os dados. Para fazer isso, é necessário apenas uma linha adicional por gênero.

Abra o pageController.js:

nano pageController.js

Ajuste seu código para incluir categorias adicionais. O exemplo abaixo adiciona HistoricalFiction e Mystery à nossa categoria Travel existente:

const pageScraper = require('./pageScraper');
async function scrapeAll(browserInstance){
    let browser;
    try{
		browser = await browserInstance;
		let scrapedData = {};
		// Call the scraper for different set of books to be scraped
		scrapedData['Travel'] = await pageScraper.scraper(browser, 'Travel');
		scrapedData['HistoricalFiction'] = await pageScraper.scraper(browser, 'Historical Fiction');
		scrapedData['Mystery'] = await pageScraper.scraper(browser, 'Mystery');
		await browser.close();
		console.log(scrapedData)
	}
	catch(err){
		console.log("Could not resolve the browser instance => ", err);
	}
}

module.exports = (browserInstance) => scrapeAll(browserInstance)

Salve e feche o arquivo.

Execute o script novamente e obeserve-o enquanto coleta dados de todas as três categorias:

npm run start

Com o coletor de dados totalmente funcional, seu passo final envolve salvar seus dados em um formato que seja mais útil. Agora, você irá armazená-los em um arquivo JSON usando o módulo fs no Node.js.

Primeiro, abra o pageController.js novamente:

nano pageController.js

Adicione o conteúdo destacado a seguir:

const pageScraper = require('./pageScraper');
const fs = require('fs');
async function scrapeAll(browserInstance){
	let browser;
	try{
		browser = await browserInstance;
		let scrapedData = {};
		// Call the scraper for different set of books to be scraped
		scrapedData['Travel'] = await pageScraper.scraper(browser, 'Travel');
		scrapedData['HistoricalFiction'] = await pageScraper.scraper(browser, 'Historical Fiction');
		scrapedData['Mystery'] = await pageScraper.scraper(browser, 'Mystery');
		await browser.close();
		fs.writeFile("data.json", JSON.stringify(scrapedData), 'utf8', function(err) {
		    if(err) {
		        return console.log(err);
		    }
		    console.log("The data has been scraped and saved successfully! View it at './data.json'");
		});
	}
	catch(err){
		console.log("Could not resolve the browser instance => ", err);
	}
}

module.exports = (browserInstance) => scrapeAll(browserInstance)

Primeiro, você está solicitando o módulo fs do Node,js em pageController.js. Isso garante que seja possível salvar seus dados como um arquivo JSON. Em seguida, está adicionando código para que quando a coleta de dados for concluída e o navegador for fechado, o programa crie um novo arquivo chamado data.json. Observe que o conteúdo de data.json é JSON em string. Portanto, ao ler o conteúdo de data.json, analise-o sempre como JSON antes de reusar os dados.

Salve e feche o arquivo.

Agora, você criou um aplicativo de coleta de dados na Web que coleta livros de várias categorias e então armazena seus dados coletados em um arquivo JSON. À medida que seu aplicativo cresce em complexidade, pode ser desejável armazenar esses dados coletados em um banco de dados ou atendê-los por meio de uma API. A forma como esses dados são consumidos depende somente de você.

Conclusão

Neste tutorial, você construiu um rastreador Web que coletou dados de várias páginas de forma recursiva e então os salvou em um arquivo JSON. Em resumo, você aprendeu uma nova maneira de automatizar a coleta de dados de sites.

O Puppeteer possui muitos recursos que não estavam no âmbito deste tutorial. Para aprender mais, confira Usando o Puppeteer para o controle fácil do Chrome sem periféricos. Visite também a documentação oficial do Puppeteer.