Web Scraping z Google Drive (Część 2)

Scrapuję z: https://drive.google.com/file/d/0B4R7VqKkZoPgaXdod1pyMlNpVTQ/view

Po użyciu kodu @Haskell -a i biblioteki Puppeteer w Node.js udało się pobrać IMG Data-URL's i zapisać je w tablicy. Problem tylko w tym, że zapisują się w niej tylko 3 takie linki a nie wszystkie 304 które przecież też mają tę samą klasę. Jakiś pomysł dlaczego tak jest?

const puppeteer = require("puppeteer");

(async () => {
    const browser = await puppeteer.launch({ args: ["--no-sandbox"] });
    const page = await browser.newPage();
    await page.goto("https://drive.google.com/file/d/0B4R7VqKkZoPgaXdod1pyMlNpVTQ/view");
    

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

        const getBase64Image = img => {
            const canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;

            const ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);

            return canvas.toDataURL("image/png");
        };

        const elements = document.getElementsByClassName('ndfHFb-c4YZDc-cYSp0e-DARUcf-RJLb9c');
        const urls = Array.from(elements).map(img => getBase64Image(img));

        return urls;
    });

    await browser.close();
    console.log(data.length);

    return data;
})();

( Nie polecam konsolować "data" bo te linki są w uj długie xD )

Otwórz sobie konsolę podczas przeglądania tego dokumentu i przekonasz się, że po otwarciu istnieją tylko 3 tagi img z tą klasą. Dopiero podczas przewijania dokumentu strona po stronie pojawiają się kolejne tagi img. Jest to wynik optymalizacji, tj. nie ma sensu wczytywać 300 obrazków, jeżeli widać tylko jeden.

Jeżeli odpalasz ten kod w konsoli przeglądarki to wystarczy, że po otworzeniu dokumentu zaczniesz go przewijać strona po stronie w dół. Po tym zabiegu kod zwróci znacznie więcej elementów niż 3.