Como navegar em sites de pager baseados em JavaScript e coletar links

Compreendendo a paginação baseada em JavaScript e os desafios da API

Sites com paginação baseada em JavaScript podem dificultar a navegação dos visitantes pelo material, especialmente se os controles de paginação não divulgarem nenhum parâmetro de URL. Isso torna impossível modificar ou automatizar a navegação na página usando abordagens convencionais, como alteração de consultas de URL. É possível interagir com esses pagers por meio de diferentes métodos.

Um desses problemas ocorre ao tentar recuperar links ou dados desses tipos de sites. Se você não conseguir navegar manualmente em centenas de páginas, uma abordagem melhor é simular eventos de clique no pager JavaScript. Esta tecnologia automatiza o procedimento de navegação, simplificando enormemente as tarefas de recolha de dados.

Em algumas circunstâncias, a guia "Rede" nas Ferramentas do desenvolvedor do navegador pode exibir pontos de extremidade da API que fornecem informações úteis. No entanto, o envolvimento direto com esses endpoints pode ocasionalmente causar problemas porque eles podem não permitir determinados métodos HTTP, como solicitações GET, que são comumente usadas para recuperar dados.

Este artigo explica como simular eventos de clique no pager JavaScript de um site e como lidar com as limitações da API que restringem o acesso direto aos dados necessários. Também veremos maneiras de contornar os limites de métodos de API específicos para garantir que você colete todas as informações importantes de maneira eficaz.

Comando	Exemplo de uso
document.querySelector()	Este método é usado para selecionar o primeiro elemento que corresponde a um determinado seletor CSS. O script o utiliza para escolher o contêiner de paginação (const pagerContainer = document.querySelector('.pagination')) e controlar os botões do pager.
Array.from()	Converte um objeto semelhante a um array ou iterável em um array adequado. O script converte uma NodeList de links de anúncios em uma matriz para facilitar a manipulação e o mapeamento (Array.from(document.querySelectorAll('.ad-link-selector')).
puppeteer.launch()	Quando usado com o Puppeteer, este comando inicia uma nova instância do navegador headless. Ele suporta ações automatizadas do navegador, como navegação na página e simulação de interações do usuário (const browser = await puppeteer.launch()).
page.evaluate()	In Puppeteer, this method allows you to run JavaScript code in the context of the web page you are controlling. It is used here to extract ad links from the DOM (await page.evaluate(() =>No Puppeteer, este método permite executar código JavaScript no contexto da página da web que você está controlando. É usado aqui para extrair links de anúncios do DOM (await page.evaluate(() => {...})).
page.waitForSelector()	Aguarda que um seletor especificado apareça na página antes de prosseguir, garantindo que todos os elementos dinâmicos sejam carregados. Isso é especialmente importante ao navegar pelo conteúdo paginado, pois novos anúncios aparecem a cada mudança de página (await page.waitForSelector('.ad-link-selector').
axios.post()	Envia uma solicitação HTTP POST para o URL fornecido. A amostra tenta evitar o problema 405 obtendo dados via POST em vez de GET (resposta const = aguardar axios.post()).
console.error()	Usado para gravar mensagens de erro no console. Ele ajuda na depuração, exibindo informações de erro quando determinados itens ou solicitações de API falham (console.error('Botão de página não encontrado!').
$()	Uma abreviação para selecionar elementos no Puppeteer, comparável ao document.querySelector(). Este script usa o botão "Próxima página" para gerar um evento de clique de paginação (const nextButton = await page.$('.pagination-next').
click()	Essa abordagem replica um clique em um elemento HTML. Nos scripts, é utilizado para navegar no pager programaticamente clicando no botão da página apropriado.

Dominando a paginação baseada em JavaScript e a navegação por API

O primeiro script introduzido usa JavaScript puro para explorar dinamicamente uma página com paginação baseada em JavaScript. A idéia básica por trás desse método é imitar um usuário pressionando os botões do pager, escolhendo e ativando eventos de clique nos elementos HTML apropriados. Ao identificar o contêiner de paginação usando o comando, podemos acessar os vários botões da página e automatizar a navegação. Essa abordagem é ideal para casos em que alterar manualmente o URL não é uma opção e você precisa de uma interface front-end rápida para interagir com o mecanismo de paginação.

No segundo script, usamos o Puppeteer, um pacote Node.js para controlar um navegador headless. Esse script não apenas simula o pressionamento de botões do pager, mas também automatiza todo o processo de percorrer inúmeras páginas, reunindo todos os links de anúncios em cada iteração. O Puppeteer permite que você copie conteúdo carregado dinamicamente interagindo diretamente com elementos DOM, da mesma forma que um usuário real faria. Um dos principais componentes aqui é , que permite que o código JavaScript seja executado no contexto da página. Isso é perfeito para coletar dados como links de anúncios em páginas paginadas.

Ambos os scripts exigem tratamento de erros para garantir que o processo automatizado funcione bem, mesmo se partes específicas estiverem faltando ou se a API se comportar de forma inesperada. Por exemplo, registra quaisquer erros encontrados durante a execução, como quando um botão direcionado não é encontrado na página. Além disso, o Titereiro O comando garante que os componentes dinâmicos, como links de anúncios, sejam totalmente carregados antes que o script tente interagir. Isso o torna extremamente útil ao trabalhar com sites que dependem significativamente de JavaScript para renderizar conteúdo, pois evita problemas causados ​​por carregamentos de páginas ausentes ou incompletos.

O script finalizado usa Axios, um cliente HTTP Node.js baseado em promessas, no backend. Aqui, tentamos buscar dados diretamente do endpoint da API, que, de acordo com o erro HTTP 405, não aceita consultas. Para evitar isso, o script envia um solicitação, que pode ser aprovada pelo servidor. Este método é mais adequado para usuários que desejam extrair dados sem precisar navegar pelo front end, mas envolve entender a estrutura e o comportamento da API do servidor. O tratamento de erros garante que quaisquer falhas de solicitação de API sejam relatadas, facilitando a solução de problemas de recuperação de dados no servidor.

// Select the pagination container
const pagerContainer = document.querySelector('.pagination');

// Function to trigger a click event on a pager button
function clickPageButton(pageNumber) {
  const buttons = pagerContainer.querySelectorAll('button');
  const targetButton = [...buttons].find(btn => btn.textContent === String(pageNumber));
  if (targetButton) {
    targetButton.click();
  } else {
    console.error('Page button not found!');
  }
}

// Example usage: clicking the 2nd page button
clickPageButton(2);

const puppeteer = require('puppeteer');

// Function to scrape all ad links from a paginated website
async function scrapeAds() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.supralift.com/uk/itemsearch/results');

  let ads = [];
  let hasNextPage = true;

  while (hasNextPage) {
    // Scrape the ad links from the current page
    const links = await page.evaluate(() => {
      return Array.from(document.querySelectorAll('.ad-link-selector')).map(a => a.href);
    });
    ads.push(...links);

    // Try to click the next page button
    const nextButton = await page.$('.pagination-next');
    if (nextButton) {
      await nextButton.click();
      await page.waitForSelector('.ad-link-selector');
    } else {
      hasNextPage = false;
    }
  }

  await browser.close();
  return ads;
}

// Call the scraping function and log results
scrapeAds().then(ads => console.log(ads));

const axios = require('axios');

// Function to fetch data from the API using POST instead of GET
async function fetchData() {
  try {
    const response = await axios.post('https://www.supralift.com/api/search/item/summary', {
      headers: {
        'Content-Type': 'application/json'
      },
      data: { /* Add necessary POST body if applicable */ }
    });

    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data:', error.response ? error.response.data : error.message);
  }
}

// Invoke the fetchData function
fetchData();

Otimizando Paginação JavaScript para Web Scraping e Coleta de Dados

Ao explorar sites com sistema de paginação baseado em JavaScript, é fundamental investigar vários métodos para extrair dados rapidamente. Uma opção às vezes ignorada é interceptar solicitações de rede emitidas pelo mecanismo de paginação. Ao revisar cuidadosamente as consultas realizadas nas Ferramentas de Desenvolvedor do navegador, principalmente na guia “Rede”, você pode determinar os endpoints utilizados para buscar dados para cada página. Sistemas baseados em JavaScript podem usar ou solicitações para carregar dados dinamicamente sem alterar o URL, em oposição à paginação tradicional que requer alteração dos parâmetros do URL.

Para extrair links ou dados de tais sites, intercepte as solicitações e recupere os dados que elas retornam. O Puppeteer e outras ferramentas permitem monitorar o tráfego de rede e coletar dados úteis. Quando esta estratégia não é viável devido a restrições do lado do servidor, a compreensão do comportamento da API torna-se crítica. Algumas APIs, como , pode proibir métodos específicos como e só permitir consultas. Adaptar suas consultas para corresponder ao método pretendido da API é uma solução alternativa eficaz para essas limitações.

Finalmente, ao extrair dados paginados, é fundamental permitir pausas adequadas entre as solicitações. Muitos sites utilizam algoritmos de limitação de taxa para evitar abusos, e o envio de muitas solicitações em rápida sucessão pode resultar na colocação temporária do seu endereço IP na lista negra. Para evitar a detecção e garantir uma extração de dados bem-sucedida, inclua um atraso aleatório entre as consultas ou limite o número de solicitações simultâneas. Usando ferramentas como em Node.js e o tratamento adequado de taxas é uma abordagem maravilhosa para conseguir isso.

1. O que é paginação baseada em JavaScript?
2. A paginação baseada em JavaScript é uma forma pela qual os botões de paginação usam JavaScript para carregar dinamicamente material novo, frequentemente sem alterar o URL.
3. Como posso extrair dados de um site paginado em JavaScript?
4. Você pode usar ferramentas como ou para automatizar cliques em botões de paginação ou capturar solicitações de rede durante a paginação.
5. Por que a API está retornando um erro 405 Método não permitido?
6. Isso ocorre porque a API oferece suporte apenas a determinados métodos HTTP. Por exemplo, pode bloquear solicitações enquanto permite pedidos.
7. Posso modificar o URL para navegar nas páginas?
8. Em paginações baseadas em JavaScript, frequentemente não é possível alterar o URL diretamente. Para navegar, você precisará acionar eventos JavaScript ou usar endpoints de API.
9. Quais ferramentas posso usar para extrair dados paginados?
10. Programas populares de raspagem incluem para automação do navegador e para solicitações HTTP. Ambos lidam com conteúdo paginado de forma eficiente.

Trabalhar com paginação baseada em JavaScript requer uma combinação de soluções front-end e back-end. Quer você use o Puppeteer para automatizar as atividades do navegador ou o Axios para interagir diretamente com os endpoints da API, a raspagem eficiente requer design e execução cuidadosos.

Compreender como um site carrega e processa dados permite escrever scripts eficientes para extrair as informações necessárias. Para evitar perigos frequentes, como o erro 405, tome cuidado para monitorar o tráfego de rede, gerenciar limites de taxa e usar os métodos HTTP adequados.