Jak se pohybovat na webových stránkách Pager založených na JavaScriptu a sbírat odkazy

Porozumění stránkování založenému na JavaScriptu a výzvám API

Webové stránky se stránkováním založeným na JavaScriptu mohou návštěvníkům ztížit procházení materiálem, zejména pokud ovládací prvky stránkování neuvádějí žádné parametry adresy URL. To znemožňuje upravovat nebo automatizovat navigaci na stránce pomocí konvenčních přístupů, jako je změna URL dotazů. S takovými pagery je možné pracovat různými způsoby.

Jeden takový problém nastává při pokusu o načtení odkazů nebo dat z těchto typů webových stránek. Pokud nejste schopni ručně procházet stovky stránek, je lepším přístupem simulovat události kliknutí na pageru JavaScript. Tato technologie automatizuje postup navigace a výrazně zjednodušuje povinnosti shromažďovat data.

Za určitých okolností se na kartě „Síť“ v nástrojích pro vývojáře prohlížeče mohou zobrazit koncové body rozhraní API, které poskytují užitečné informace. Přímá komunikace s těmito koncovými body však může občas způsobit problémy, protože nemusí umožňovat určité metody HTTP, jako jsou požadavky GET, které se běžně používají k načítání dat.

Tento článek vysvětluje, jak simulovat události kliknutí na JavaScript pageru webu a jak se vypořádat s omezeními API, která omezují přímý přístup k požadovaným datům. Podíváme se také na způsoby, jak obejít limity konkrétních metod API, abychom zajistili efektivní shromažďování všech důležitých informací.

Zvládnutí stránkování založeného na JavaScriptu a navigace API

První představený skript používá čistý JavaScript k dynamickému prozkoumání stránky pomocí stránkování založeného na JavaScriptu. Základní myšlenkou této metody je napodobit uživatele, který stiskne tlačítka pageru, výběrem a aktivací událostí kliknutí na příslušné prvky HTML. Identifikací stránkovacího kontejneru pomocí document.querySelector() můžeme přistupovat k různým tlačítkům stránky a automatizovat navigaci. Tento přístup je ideální pro případy, kdy ruční změna adresy URL není možná a pro zapojení do mechanismu stránkování potřebujete rychlé rozhraní front-end.

Ve druhém skriptu jsme použili Puppeteer, balíček Node.js pro ovládání bezhlavého prohlížeče. Tento skript nejen simuluje stisknutí tlačítka pageru, ale také automatizuje celý proces cestování po mnoha stránkách a shromažďuje všechny reklamní odkazy při každé iteraci. Puppeteer vám umožňuje škrábat dynamicky načtený obsah přímou interakcí s prvky DOM, podobně jako by to udělal skutečný uživatel. Jedna z hlavních složek zde je page.evaluate(), který umožňuje spuštění kódu JavaScript v kontextu stránky. To je ideální pro shromažďování dat, jako jsou reklamní odkazy na stránkovaných stránkách.

Oba skripty vyžadují zpracování chyb, aby bylo zajištěno, že automatizovaný proces funguje dobře, i když chybí konkrétní části nebo se rozhraní API chová neočekávaně. Například, console.error() zaznamenává všechny chyby zjištěné během provádění, například když na stránce není nalezeno cílené tlačítko. Navíc Puppeteer's page.waitForSelector() zajišťuje, že dynamické komponenty, jako jsou reklamní odkazy, jsou plně načteny předtím, než se skript pokusí o interakci. Díky tomu je mimořádně praktický při práci s weby, které při vykreslování obsahu výrazně spoléhají na JavaScript, protože se vyhnete problémům způsobeným chybějícím nebo neúplným načtením stránek.

Hotový skript používá na backendu Axios, HTTP klienta Node.js založeného na slibech. Zde se pokoušíme načíst data přímo z koncového bodu API, který podle chyby HTTP 405 nepřijímá ZÍSKAT dotazy. Aby se tomu zabránilo, skript odešle a ZVEŘEJNIT požadavek, který může být schválen serverem. Tato metoda je vhodnější pro uživatele, kteří chtějí extrahovat data, aniž by museli procházet frontend, ale vyžaduje pochopení struktury a chování API serveru. Zpracování chyb zaručuje, že budou hlášena jakákoli selhání požadavků API, což usnadňuje odstraňování potíží s načítáním dat na straně serveru.

// 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();

Optimalizace stránkování JavaScriptu pro škrábání webu a shromažďování dat

Při prozkoumávání webových stránek se stránkovacím systémem založeným na JavaScriptu je důležité prozkoumat několik metod rychlého extrahování dat. Jednou z někdy ignorovaných možností je zachytit síťové požadavky vydávané mechanismem stránkování. Pečlivým přezkoumáním dotazů provedených v nástrojích pro vývojáře prohlížeče, zejména na kartě „Síť“, můžete určit koncové body používané k načítání dat pro každou stránku. Systémy založené na JavaScriptu mohou používat AJAX nebo vynést požadavky na dynamické načítání dat bez změny adresy URL, na rozdíl od tradičního stránkování, které vyžaduje změnu parametrů adresy URL.

Chcete-li z takových webových stránek extrahovat odkazy nebo data, zachyťte požadavky a získejte data, která vracejí. Puppeteer a další nástroje vám umožní sledovat síťový provoz a shromažďovat užitečná data. Když tato strategie není proveditelná kvůli omezením na straně serveru, pochopení chování API se stává kritickým. Některá API, jako např Supralift, může zakázat konkrétní metody jako ZÍSKAT a pouze povolit ZVEŘEJNIT dotazy. Přizpůsobení vašich dotazů tak, aby odpovídaly zamýšlené metodě API, je efektivním řešením těchto omezení.

A konečně, při odstraňování stránkovaných dat je důležité povolit vhodné pauzy mezi požadavky. Mnoho webových stránek používá algoritmy omezující rychlost, aby se zabránilo zneužití, a odesílání příliš mnoha žádostí v rychlém sledu může způsobit, že vaše IP adresa bude dočasně uvedena na černou listinu. Chcete-li se vyhnout detekci a zajistit úspěšnou extrakci dat, zahrňte náhodné zpoždění mezi dotazy nebo omezte počet souběžných požadavků. Pomocí nástrojů jako axios v Node.js a správné zpracování sazeb je skvělý přístup, jak toho dosáhnout.