Guia completo do titereiro pt.1

Puppeteer: a ferramenta poderosa para automação da Web

No cenário atual de desenvolvimento web acelerado, a automação é fundamental - e é aí que entra o Puppeteer. Desenvolvido pelo Google, o Puppeteer é uma poderosa biblioteca Node.js que permite aos desenvolvedores controlar os navegadores Chrome usando JavaScript. Esteja você navegando na web no modo headless para eficiência ou em um navegador completo para feedback visual, o Puppeteer torna mais fácil do que nunca automatizar tarefas como web scraping, testes e muito mais. Com o Puppeteer, o que antes exigia esforço manual agora está a apenas um script de distância.

Por que web scraping?

Em um projeto recente, trabalhei com um cliente que precisava de uma landing page para sua comunidade de negociação forex. Ele queria algo semelhante aos tickers de ações que você vê no MarketWatch ou no Yahoo Finance, mas em vez de ações, ele queria taxas de conversão de moeda em tempo real por US$ 1,00 exibidas no site.

Embora existam APIs disponíveis que possam fornecer os dados – com limites de uso e taxas mensais – vi uma oportunidade de criar uma solução personalizada usando o Puppeteer. Ao investir algum tempo antecipadamente, consegui extrair e exibir os dados gratuitamente, poupando meu cliente de custos recorrentes.

Site do cliente: Majesticpips.com

Configurar o titereiro de forma simples

Antes de começarmos a explorar toda a glória da web, devemos instalar o puppeteer em nosso aplicativo.

Exatamente como descrito nos documentos

Passo 1

Instale a biblioteca usando NPM, Yarn ou PnPM de sua preferência.

• npm eu titereiro

• fio adicionar marionetista

• pnpm adicionar marionetista

Isso fará o download da versão compatível do Chrome durante a instalação, o que é mais fácil para iniciantes colocar tudo em funcionamento rapidamente.

Se você é um desenvolvedor mais experiente e tem uma versão específica do Chrome/Chrome com a qual gostaria de trabalhar; então instalando esses pacotes

• npm i puppeteer-core

• fio adicionar núcleo de marionete

• pnpm adicionar puppeteer-core

seria melhor para você, o pacote será leve, pois instala apenas o marionetista e deixa a versão do Chrome para você decidir.

Instalar 'puppeteer' é a melhor opção para o testador iniciante. Ele simplifica a configuração e garante que você tenha uma versão funcional do Chromium, permitindo que você se concentre na escrita de seus scripts.

Etapa 2

agora em seu arquivo JS, você deseja importar o titereiro para aplicativos que usam sistemas de módulo ES (padrões ES6) com versões de nó 12 e superiores.

importar marionetista de 'titereiro'; (recomendado)
ou
importar marionetista de 'puppeteer-core';

ou você pode usar a sintaxe require para o sistema de módulos commonJs para Node.js que também é compatível com versões mais antigas do Node.js.

const titereiro = require('titereiro');
ou
const marionetista = require('titereiro-núcleo');

Etapa 3

Depois de importar o Puppeteer, podemos começar a escrever os comandos para realizar web scraping. O código abaixo mostra o que você precisará usar.

Iniciamos o navegador usando estes métodos fornecidos pela biblioteca.

const browser = await puppeteer.launch();

const page = await browser.newPage();

await browser.close();

puppeteer.launch() = Este método inicia uma nova instância do navegador.

browser.newPage() = Este método cria uma nova página (ou guia) dentro da instância do navegador.

browser.close() = Este método fecha a instância do navegador.

Em puppeteer.launch(), podemos passar argumentos para personalizar a inicialização do navegador de acordo com nossas preferências. Abordaremos isso com mais detalhes na parte 2. No entanto, por padrão, puppeteer.launch() tem valores predefinidos, como o modo headless sendo definido como true.

Etapa 4

O navegador foi lançado e agora temos uma página pronta para navegar na web. Vamos navegar até o site onde coletaremos alguns dados.

Neste exemplo, coletaremos dados de um site qoutes.

 await page.goto(https://quotes.toscrape.com/)

 await page.screenshot({ path: 'screenshot.png' })

Eu adicionei await page.screenshot({ path: 'screenshot.png' }) à mistura. Esta é uma ótima ferramenta para garantir que tudo esteja correndo conforme o planejado. Quando esse código for executado, você terá um arquivo de imagem no diretório do projeto capturando o estado atual do site que você está copiando. Você também pode ajustar o nome do arquivo ao seu gosto.

Se tudo estiver certo, prossiga para a etapa 5.

Etapa 5

Agora que nosso script está tomando forma, vamos mergulhar na parte principal onde extraímos dados da página da web. Esta é a aparência do nosso script até agora:

const puppeteer = require('puppeteer');

(async () => {

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.goto(https://quotes.toscrape.com/)

await page.screenshot({ path: 'screenshot.png' })

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

const quotes = document.querySelectorAll(".quote"); 
    const quotesArray = [];

   for (const quote of quotes) { 
       const texts = quote.querySelector(".text").innerText; 
         const author = quote.querySelector(".author").innerText;  

        quotesArray.push({
           quote: texts,
           author
         });

     }
     return quotesArray;
});

console.log(quotesScraper);

await browser.close();

})();

Para verificar se os dados foram extraídos com sucesso, podemos executar o nó "server-file-name" na CLI e os dados serão exibidos no console usando console.log(quotesScraper);.

[
  {
    quote: '“The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking.”',
    author: 'Albert Einstein'
  },
  {
    quote: '“It is our choices, Harry, that show what we truly are, far more than our abilities.”',
    author: 'J.K. Rowling'
  },
  {
    quote: '“There are only two ways to live your life. One is as though nothing is a miracle. The other is as though everything is a miracle.”',
    author: 'Albert Einstein'
  },
  {
    quote: '“The person, be it gentleman or lady, who has not pleasure in a good novel, must be intolerably stupid.”',
    author: 'Jane Austen'
  },
  {
    quote: "“Imperfection is beauty, madness is genius and it's better to be absolutely ridiculous than absolutely boring.”",
    author: 'Marilyn Monroe'
  }
....
]

await page.evaluate(() => { ... }): É aqui que a mágica acontece. O método de avaliação nos permite executar código JavaScript dentro do contexto da página que estamos copiando. É como se você estivesse abrindo o console do desenvolvedor do navegador e executando o código diretamente na página.

const quotes = document.querySelectorAll(".quote");: Aqui, estamos selecionando todos os elementos da página que correspondem à classe .quote. Isso nos dá uma NodeList de elementos de cotação.

const quotesArray = [];: inicializamos um array vazio para armazenar as cotações que extraímos.

for (const quote of quotes) { ... }: Este loop itera sobre cada elemento de cotação. Para cada um extraímos o texto da citação e o autor.

quotesArray.push({ quote: texts, author });: Para cada citação, criamos um objeto contendo o texto da citação e o autor e, em seguida, colocamos esse objeto em quotesArray.

return quotesArray;: Finalmente, retornamos o array de cotações, que é então armazenado em quotesScraper em nosso ambiente Node.js.

Este método de extração de dados é poderoso porque permite que você interaja com a página exatamente como um usuário faria, mas de forma automatizada e programática.

Fechando o navegador

await browser.close();: Depois de extrair os dados, é importante fechar o navegador para liberar recursos. Esta linha garante que a instância do navegador que lançamos seja encerrada corretamente.

Olhando para a Parte 2

Com este script, você copiou com sucesso dados de um site usando o Puppeteer. Mas estamos apenas arranhando a superfície do que é possível. Na Parte 2, exploraremos técnicas mais avançadas, como lidar com conteúdo dinâmico e usar Express.JS para criar funcionalidade de API de dados descartados. Fique ligado enquanto nos aprofundamos no mundo do Puppeteer!