O melhor guia de raspagem e automação da Web para 2023

Suciu Dan em Abr 21 2023

A raspagem da Web e a automatização andam de mãos dadas no mundo digital atual. Desde sítios Web de comparação de preços a empresas orientadas para os dados, a capacidade de extrair e processar dados da Web tornou-se parte integrante de muitos empreendimentos em linha.

Entre no Playwright: uma ferramenta que lhe permite automatizar facilmente as tarefas de recolha de dados e de teste da Web. O Playwright permite-lhe controlar um browser sem cabeça, dando-lhe a capacidade de extrair dados e interagir com sítios Web de uma forma rápida e eficiente.

Neste artigo, exploraremos os recursos do Playwright para automação e raspagem. Mostrarei como instalar e configurar o Playwright, fornecerei exemplos de código para tarefas comuns e discutirei técnicas avançadas, como o tratamento de formulários de login, a obtenção de capturas de tela e muito mais.

O que é o Playwright?

O Playwright é uma biblioteca Node.js multiplataforma de código aberto desenvolvida pela Microsoft que permite automatizar tarefas num navegador Web. Foi concebida para ser fiável e fácil de utilizar, com suporte para funcionalidades modernas da Web, como CSS3 e JavaScript.

O Playwright pode ser utilizado para tarefas como o teste de aplicações Web, a automatização de tarefas baseadas na Web e a recolha de dados da Web. Foi construído sobre a popular biblioteca de testes Web Puppeteer e tem como objetivo fornecer uma API mais fácil de utilizar e de manter.

O Playwright suporta vários navegadores, incluindo Chromium, Firefox e WebKit. Isto significa que pode utilizá-lo para automatizar tarefas e recolher dados em diferentes navegadores. O Playwright permite-lhe alternar facilmente entre navegadores e tirar partido das suas caraterísticas únicas.

Começar a trabalhar

Para instalar e configurar o Playwright numa máquina local, é necessário ter o Node.js e o npm (o gestor de pacotes para o Node.js) instalados. Se ainda não os tiver, pode descarregá-los e instalá-los a partir do site oficial do Node.js.

Depois de ter o Node.js e o npm instalados, pode instalar o Playwright utilizando os seguintes passos:

Abrir um terminal ou uma linha de comandos
Crie uma pasta chamada `playwright` onde o código do nosso projeto irá residir
Aceder à pasta recentemente criada
Execute o comando `npm init` para inicializar o projeto (e criar o arquivo package.json)
Instale a dependência necessária usando o comando `npm install playwright`

Raspagem básica com o Playwright

Crie um ficheiro chamado `index.js` e cole o seguinte código:

const { chromium } = require('playwright');

(async () => {

    // Launch a Chromium browser

    const browser = await chromium.launch();

    // Create a new page in the browser

    const page = await browser.newPage();

    // Navigate to a website

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

    // Get the page content

    const content = await page.content();

    // Display the content

    console.log(content);

    // Close the browser

    await browser.close();

})();

Este código irá iniciar um navegador Chromium sem cabeça, criar uma nova página, navegar para a página inicial do CoinMarketCap, obter o conteúdo da página, registar o conteúdo e, em seguida, fechar o navegador.

Pode utilizar um código semelhante para iniciar os outros navegadores suportados (Firefox e WebKit) requerendo o módulo apropriado e substituindo "chromium" por "firefox" ou "webkit".

Procura de elementos para extração de dados

Agora que temos uma base para o nosso scraper, vamos extrair alguns dados do site de destino. Neste exemplo, vamos obter o nome e o preço das primeiras 10 moedas apresentadas na página.

Para ver a árvore DOM da página inicial do CoinMarketCap, abra o sítio Web num browser, clique com o botão direito do rato no nome de uma moeda e selecione "Inspecionar". Isto abrirá as Ferramentas de desenvolvimento e apresentará a árvore DOM.

Selecionar os selectores certos é uma arte em si. Neste caso, o elemento da tabela que queremos selecionar é o contexto. Esta tabela tem uma classe chamada "cmc-table" que será útil para os nossos objectivos.

Para encontrar o seletor para o nome da moeda, precisamos descer na árvore DOM. O elemento que estamos procurando está localizado dentro do elemento `.cmc-table tbody tr td:nth-child(3) a .name-area p`.

Como regra geral, é importante ser o mais preciso possível ao selecionar os elementos, uma vez que isso minimizará o número de erros que têm de ser tratados.

Utilizando a mesma técnica, podemos encontrar o seletor para o preço que é `.cmc-table tbody tr td:nth-child(3) a span`. Para recapitular, aqui está nossa lista de seletores:

Nome: `.cmc-table tbody tr td:nth-child(3) a .name-area p`
Preço: `.cmc-table tbody tr td:nth-child(4) a span`

Extração de dados

Utilizando os selectores que identificámos anteriormente, vamos extrair os dados da página Web e armazená-los numa lista. A função utilitária $$eval devolve um conjunto de elementos que correspondem a um seletor, avaliado no contexto do DOM da página.

Vamos substituir a linha console.log(content); por esta:

// Extract the currencies data

const currencies = await page.$$eval('.cmc-table tbody tr:nth-child(-n+10)', trs => {

    const data = []

    trs.forEach(tr => {

        data.push({

            name: tr.querySelector('td:nth-child(3) a .name-area p').innerHTML,

            price: tr.querySelector('td:nth-child(4) a span').innerHTML,

        })

    })

    return data

})

// Display the results

console.log(currencies)

Este código utiliza a função $$eval para selecionar os primeiros 10 elementos tr na tabela .cmc. Em seguida, itera sobre estes elementos, seleciona as células de dados da tabela utilizando os selectores que identificámos anteriormente e extrai o seu conteúdo de texto. Os dados são devolvidos como uma matriz de objectos.

Pode ler mais sobre a função $$eval na documentação oficial.

O código completo tem o seguinte aspeto:

const { chromium } = require('playwright');

(async () => {

    // Launch a Chromium browser

    const browser = await chromium.launch();

    // Create a new page in the browser

    const page = await browser.newPage();

    // Navigate to a website

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

    // Extract the currencies data

    const currencies = await page.$$eval('.cmc-table tbody tr:nth-child(-n+10)', trs => {

   	 const data = []

   	 trs.forEach(tr => {

   		 data.push({

   			 name: tr.querySelector('td:nth-child(3) a .name-area p').innerHTML,

   			 price: tr.querySelector('td:nth-child(4) a span').innerHTML,

   		 })

   	 })

   	 return data

    })

    // Display the results

    console.log(currencies)

    // Close the browser

    await browser.close();

})();

Tratamento de conteúdo dinâmico

Só recolhemos as primeiras 10 moedas porque é esse o número de moedas que o CoinMarketCap carrega no carregamento inicial da página. Para recolher mais, precisamos de fazer uma ação humana que é percorrer a página. Felizmente, o Playwright é adequado para essa tarefa.

Vamos começar por refactorizar a função $$eval que utilizámos anteriormente e implementar a paginação. Chamaremos a esta nova função extractData:

const extractData = async (page, currentPage, perPage = 10) => {

}

Estendemos o seletor :nth-child selecionando os elementos por etapas (elementos de 0 a 10, de 11 a 21, de 22 a 32, etc.). Definimos o seletor inicial (primeiros 10 elementos):

let selector = `:nth-child(-n+${currentPage * perPage})`;

Por último, mas não menos importante, adicionámos suporte para as páginas seguintes. O código tem o seguinte aspeto:

if(currentPage > 1) {

    selector = `:nth-child(n+${(currentPage - 1) + perPage}):nth-child(-n+${(currentPage * perPage) + 1})`;

}

A função final terá o seguinte aspeto:

const extractData = async (page, currentPage, perPage = 10) => {

    let selector = `:nth-child(-n+${currentPage * perPage})`;

    if(currentPage > 1) {

   	 selector = `:nth-child(n+${(currentPage - 1) + perPage}):nth-child(-n+${(currentPage * perPage) + 1})`;

    }

    return await page.$$eval(`.cmc-table tbody tr${selector}`, trs => {

   	 const data = [];

   	 trs.forEach(tr => {

   		 data.push({

   			 name: tr.querySelector('td:nth-child(3) a .name-area p').innerHTML,

   			 price: tr.querySelector('td:nth-child(4) a span').innerHTML,

   		 });

   	 });

   	 return data;

    });

};

Agora é altura de voltar ao nosso código do raspador, implementar o scroll e alargar a extração de dados. Fazemos todo o trabalho depois desta linha:

aguardar página.goto('https://coinmarketcap.com');

Redefinimos a variável moedas:

// Extract the currencies data

let currencies = await extractData(page, 1, 10);

Utilizando a função evaluate, deslocamos a página para 1,5x da janela de visualização. Isto fará com que os próximos elementos da tabela sejam carregados:

// Scroll the page to a little more than the viewport height

await page.evaluate(() => {

    window.scrollTo(0, window.innerHeight * 1.5);

});

O segundo de espera dará à interface do utilizador algum espaço para preencher a tabela com os dados recuperados da API:

// Wait for the new elements to load

await page.waitForTimeout(1000);

Finalmente, vamos extrair os dados da segunda página e registar os resultados:

// Extract the next 10 elements

currencies = [...currencies, ...await extractData(page, 2, 10)]

// Display the results

console.log(currencies)

O código completo do raspador deve ter o seguinte aspeto:

const { chromium } = require('playwright');

const extractData = async (page, currentPage, perPage = 10) => {

    let selector = `:nth-child(-n+${currentPage * perPage})`;

    if(currentPage > 1) {

   	 selector = `:nth-child(n+${(currentPage - 1) + perPage}):nth-child(-n+${(currentPage * perPage) + 1})`;

    }

    return await page.$$eval(`.cmc-table tbody tr${selector}`, trs => {

   	 const data = [];

   	 trs.forEach(tr => {

   		 data.push({

   			 name: tr.querySelector('td:nth-child(3) a .name-area p').innerHTML,

   			 price: tr.querySelector('td:nth-child(4) a span').innerHTML,

   		 });

   	 })

   	 return data;

    })

};

(async () => {

    // Launch a Chromium browser

    const browser = await chromium.launch();

    // Create a new page in the browser

    const page = await browser.newPage();

    // Navigate to a website

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

    // Extract the currencies data

    let currencies = await extractData(page, 1, 10)

    // Scroll the page to a little more than the viewport height

    await page.evaluate(() => {

   	 window.scrollTo(0, window.innerHeight * 1.5);

    });

    // Wait for the new elements to load

    await page.waitForTimeout(1000);

    // Extract the next 10 elements

    currencies = [...currencies, ...await extractData(page, 2, 10)];

    // Display the results

    console.log(currencies);

    // Close the browser

    await browser.close();

})();

Recapitulando, o scraper abre a página inicial do CoinMarketCap, extrai os dados das primeiras 10 moedas, percorre a página, extrai os dados das 10 moedas seguintes e apresenta os resultados.

Deverá obter resultados semelhantes a estes:

[

  { name: 'Bitcoin', price: '$16,742.58' },

  { name: 'Ethereum', price: '$1,244.45' },

  { name: 'Tether', price: '$0.9997' },

  { name: 'USD Coin', price: '$1.00' },

  { name: 'BNB', price: '$255.78' },

  { name: 'XRP', price: '$0.335' },

  { name: 'Binance USD', price: '$1.00' },

  { name: 'Dogecoin', price: '$0.07066' },

  { name: 'Cardano', price: '$0.2692' },

  { name: 'Polygon', price: '$0.7762' },

  { name: 'Dai', price: '$0.9994' },

  { name: 'Litecoin', price: '$73.80' },

  { name: 'Polkadot', price: '$4.59' },

  { name: 'Solana', price: '$12.95' },

  { name: 'TRON', price: '$0.0505' },

  { name: 'Shiba Inu', price: '$0.000008234' },

  { name: 'Uniswap', price: '$5.29' },

  { name: 'Avalanche', price: '$11.43' },

  { name: 'UNUS SED LEO', price: '$3.47' },

  { name: 'Wrapped Bitcoin', price: '$16,725.03' },

  { name: 'Cosmos', price: '$9.97' }

]

Técnicas avançadas

Agora que já abordámos os aspectos básicos da recolha de dados da Web com o Playwright, tais como a criação de um raspador, a procura de selectores, a extração de dados e a implementação do scrolling infinito, está na altura de nos aprofundarmos em algumas das funcionalidades mais avançadas que o Playwright tem para oferecer.

Estas incluem fazer capturas de ecrã, preencher formulários, utilizar XPaths em vez de selectores de classe e utilizar proxies para contornar bloqueios de IP.

Tirar uma captura de ecrã

Uma das vantagens de tirar capturas de ecrã durante a recolha de dados da Web é que permite ver o aspeto de um sítio ou aplicação Web em diferentes navegadores e resoluções.

Isto pode ser particularmente útil para os programadores, que podem utilizar as capturas de ecrã para depurar problemas de disposição e testar o aspeto das suas aplicações Web em diferentes plataformas.

Para tirar uma captura de ecrã de página inteira, pode utilizar o método screenshot do objeto Page. Eis um exemplo:

const screenshot = await page.screenshot();

Este código tira uma captura de tela de toda a página e a retorna como um Buffer. A função `screenshot` aceita propriedades. Podemos definir o caminho onde queremos que o screenshot seja salvo e se o screenshot deve conter apenas a viewport ou a página inteira.

Este é o código completo:

const { chromium } = require('playwright');

(async () => {

    const browser = await chromium.launch();

    const page = await browser.newPage();

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

    // Take a full page screenshot and save the file

    await page.screenshot({

   	 path: "screenshot.png",

   	 fullPage: false

    });

    await browser.close();

})();

Você pode armazenar esse código em um arquivo chamado `screenshot.js` e executar o código com o comando `node screenshot.js`. Após a execução, um arquivo `screenshot.png` será criado na pasta do seu projeto.

Podemos fazer uma captura de ecrã de uma área da página utilizando a propriedade `clip`. Precisamos definir quatro propriedades:

x: a deslocação horizontal a partir do canto superior esquerdo
y: a deslocação vertical a partir do canto superior esquerdo
largura: a largura da área
altura: a altura da área

A função de captura de ecrã com a propriedade clip definida terá o seguinte aspeto:

// Take a screenshot of a part of the page

await page.screenshot({

    path: "screenshot.png",

    fullPage: false,

    clip: {

        x: 50,

        y: 50,

        width: 320,

        height: 160

    }

});

Preenchimento de formulários

Uma das vantagens da utilização do Playwright é que permite aceder a páginas protegidas. Ao emular acções humanas, como clicar em botões, percorrer a página e preencher formulários, o Playwright pode contornar os requisitos de início de sessão e aceder a conteúdos restritos.

Vamos utilizar o Playwright para aceder à nossa conta Reddit (se não tiver uma conta Reddit, crie uma agora mesmo!).

Vá para a página de início de sessão e utilize as técnicas que aprendemos na secção "Encontrar elementos para extração de dados" para extrair as classes para as entradas de nome de utilizador e palavra-passe.

Os selectores devem ter o seguinte aspeto:

Entrada de nome de utilizador: `#loginUsername`
Entrada de palavra-passe: `#loginPassword`
Botão Enviar: `button[type="submit"]`

Vamos utilizar estes selectores no código. Crie um ficheiro `login.js` e cole este código:

const { chromium } = require('playwright');

(async () => {

    const browser = await chromium.launch();

    const page = await browser.newPage();

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

    // Fill up the form

    await page.fill('#loginUsername', "YOUR_REDDIT_USERNAME");

    await page.fill('#loginPassword', "YOUR_REDDIT_PASSWORD");

    // Click the submit button

    await page.click('button[type="submit"]');

    // Wait for the new page to load

    await page.waitForNavigation()

    // Take a screenshot of the new page

    await page.screenshot({

   	 path: "reddit.png",

   	 fullPage: false

    });

    // Close the browser

    await browser.close();

})();

Para executar o código e tirar uma captura de ecrã da página protegida, basta introduzir node login.js no terminal. Após alguns segundos, uma captura de ecrã chamada reddit.png aparecerá no seu diretório de projeto.

Infelizmente, não posso partilhar a captura de ecrã resultante com vocês, porque a maior parte da minha conta Reddit não é segura para o trabalho.

Pode ler mais sobre a autenticação com o Playwright na documentação oficial.

Utilização do XPath para extração de dados

O XPath pode ser uma escolha mais estável para a raspagem da Web porque é menos provável que mude do que os nomes de classe. Websites como o Reddit e o Google actualizam frequentemente os seus nomes de classe, o que pode causar problemas aos scrapers que dependem deles.

Em contrapartida, as expressões XPath baseiam-se na estrutura do documento HTML e têm menos probabilidades de se alterarem. Isto significa que pode utilizar o XPath para identificar elementos de uma forma mais fiável e estável, mesmo em sítios Web que actualizam frequentemente os seus nomes de classe.

Como resultado, a utilização do XPath pode ajudá-lo a construir um raspador Web mais robusto e resiliente que é menos propenso a quebrar quando o sítio Web é atualizado.

Neste artigo, vamos apenas arranhar a superfície do que é possível fazer com o XPath. Para obter um guia mais abrangente, consulte este artigo.

Vamos voltar ao Reddit, abrir um subreddit e abrir as Developer Tools. Vou usar o subreddit /r/webscraping, mas você pode escolher qualquer subreddit que quiser.

Se examinar a árvore DOM, pode reparar que as classes para os elementos parecem ser geradas aleatoriamente. A utilização destas classes diminuiria a fiabilidade do raspador e exigiria uma manutenção contínua.

Clique com o botão direito do mouse na tag `h3`, vá até Copiar e selecione `Copiar XPath`. O resultado deve ser parecido com este:

//*[@id="t3_104ocrd"]/div[3]/div[2]/div[1]/a/div/h3

Antes de usarmos essa regra, vamos remover a parte @id para que o caminho cubra todos os posts e não apenas o primeiro.

É hora de colocá-lo para funcionar. Crie o arquivo `xpath.js` e cole este código:

const { chromium } = require('playwright');

(async () => {

    const browser = await chromium.launch();

    const page = await browser.newPage();

    await page.goto('https://reddit.com/r/webscraping');

    const titles = await page.$$eval("//*/div[3]/div[2]/div[1]/a/div/h3", element => {

   	 const data = []

   	 element.forEach(el => {

   		 data.push(el.innerHTML)

   	 })

   	 return data

    })

    console.log(titles)

    // Close the browser

    await browser.close();

})();

Para executar o código, use o comando `node xpath.js`. Isso retornará uma lista de títulos do subreddit que você selecionou. Por exemplo, a minha lista tem este aspeto:

[

 'A Year of Writing about Web Scraping in Review',

 'Linkedin Comments Scraper - Script para extrair comentários (incluindo nome, foto de perfil, designação, e-mail (se presente) e comentário) de um post do LinkedIn a partir do URL do post.',

 'Best Proxy Lists?',

 'Sorry if this is the wrong sub, but is it possible to extract an email from an old youtube account?',

 'Looking for people with datasets for sale!',

 "Os nomes das classes do reddit mudam periodicamente (aqueles com letras e números aleatórios e não só)",

 'Extrair vídeos de vários sítios web',

 'Alguém me quer escrever um programa que possa automatizar a geração de um pdf de uma assinatura de revista?',

 'Scraping a Dynamic Webpage with rSelenium',

 'Existe uma forma de converter os URLs do LinkedIn Sales Navigator num URL público do LinkedIn?',

 'Gurufocus / Implementou a nova proteção cloudflare?',

 'Scraper para recolher dados APY de frontends Web3'

]

Pode ler mais sobre XPath na documentação oficial do Playwright. Pode encontrá-la aqui.

O dramaturgo contra os outros

O Playwright, o Puppeteer e o Selenium WebDriver são ferramentas que podem ser utilizadas para a recolha e automatização da Web.

O Playwright, desenvolvido pela Microsoft, é uma ferramenta mais recente que pretende ser uma solução "completa" para a automatização da Web. Suporta vários navegadores (Chromium, Firefox e WebKit) e várias linguagens de programação (JavaScript, TypeScript, Python e C#).

O Puppeteer é uma ferramenta desenvolvida pela Google para recolha de dados e automatização da Web, com base no protocolo Chrome DevTools. É utilizada principalmente com JavaScript e tem muitas funcionalidades, incluindo a captura de ecrãs, a criação de PDFs e a interação com o DOM.

O Selenium WebDriver é uma ferramenta para automação e teste da Web que suporta várias linguagens de programação e navegadores. Está orientada para os testes e pode exigir mais configuração do que outras ferramentas.

Comparação do desempenho

O desempenho é uma consideração importante ao escolher uma ferramenta de raspagem da Web. Nesta secção, iremos comparar o desempenho do Playwright, do Puppeteer e do Selenium WebDriver para ver qual é a ferramenta mais rápida e mais eficiente.

Durante nossos testes, descobrimos que o Playwright e o Puppeteer tinham tempos de resposta quase idênticos quando se tratava de raspagem da Web e tarefas de automação. No entanto, o Selenium WebDriver foi significativamente mais lento no arranque em comparação com as outras duas ferramentas.

Conclusão

A raspagem da Web permite-lhe extrair e processar dados de sítios Web, fornecendo um manancial de informações e oportunidades para empresas e indivíduos. Algumas das vantagens da recolha de dados da Web incluem:

Poupança de custos: A raspagem da Web pode ser uma forma económica de recolher dados, uma vez que permite evitar a necessidade de adquirir bases de dados ou API dispendiosas.
Eficiência de tempo: A recolha de grandes quantidades de dados pode ser efectuada muito mais rapidamente do que a recolha manual.
Dados actualizados: A raspagem da Web pode ajudá-lo a manter os seus dados actualizados, permitindo-lhe raspar e atualizar regularmente as suas fontes de dados.

O Playwright é uma ferramenta poderosa para a recolha de dados da Web, oferecendo uma variedade de caraterísticas que o tornam uma escolha de topo para muitos utilizadores. Algumas vantagens da utilização do Playwright incluem:

Compatibilidade com o Chromium: O Playwright é construído sobre o Chromium, o projeto de browser de código aberto que alimenta o Google Chrome, dando-lhe acesso às mais recentes funcionalidades da plataforma Web e a uma vasta gama de compatibilidade com websites.
Suporte a vários navegadores: O Playwright permite-lhe automatizar tarefas em vários navegadores, incluindo Chrome, Firefox e Safari.
Facilidade de utilização: O Playwright tem uma API simples e intuitiva, o que facilita o início das tarefas de recolha de dados da Web e de automatização.
Versatilidade: O Playwright pode ser utilizado para uma vasta gama de tarefas, incluindo a recolha de dados da Web, testes e automatização.

De um modo geral, os benefícios da recolha de dados da Web e as vantagens da utilização do Playwright fazem dele uma ferramenta essencial para quem pretende extrair e processar dados da Web.

Se procura uma solução mais fácil para as suas necessidades de recolha de dados da Web, considere a utilização do WebScrapingAPI. O nosso serviço permite-lhe extrair dados de qualquer sítio Web sem ter de lidar com as complexidades da configuração e manutenção de um Web scraper.

Com a WebScrapingAPI, basta enviar um pedido HTTP para a nossa API com o URL do sítio Web que pretende extrair, e nós devolvemos-lhe os dados no formato que preferir (JSON, HTML, PNG).

A nossa API trata de todo o trabalho pesado por si, incluindo contornar CAPTCHAs, lidar com bloqueios de IP e lidar com conteúdos dinâmicos.

Por isso, porquê perder tempo e recursos a criar e manter o seu próprio Web scraper quando pode utilizar o WebScrapingAPI e obter os dados de que necessita com apenas alguns simples pedidos de API? Experimente-nos e veja como podemos ajudar a simplificar as suas necessidades de Web scraping.