web-dev-qa-db-ja.com

操り人形師-もうできなくなるまでスクロールダウン

下にスクロールすると、新しいコンテンツが作成される状況にあります。新しいコンテンツには特定のクラス名があります。

すべての要素が読み込まれるまでスクロールダウンし続けるにはどうすればよいですか？言い換えれば、下にスクロールし続けても新しいものは何もロードされない段階に到達したいのです。

私はコードを使用して下にスクロールし、

await page.waitForSelector('.class_name');

このアプローチの問題は、すべての要素が読み込まれた後、コードが下にスクロールし続け、新しい要素が作成されず、最終的にタイムアウトエラーが発生することです。

編集：これはコードです

await page.evaluate( () => {
                window.scrollBy(0, window.innerHeight);
            });
await page.waitForSelector('.class_name');
javascriptnode.jspuppeteer
17
user1584421

これを試してください：

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: false
    });
    const page = await browser.newPage();
    await page.goto('https://www.yoursite.com');
    await page.setViewport({
        width: 1200,
        height: 800
    });

    await autoScroll(page);

    await page.screenshot({
        path: 'yoursite.png',
        fullPage: true
    });

    await browser.close();
})();

async function autoScroll(page){
    await page.evaluate(async () => {
        await new Promise((resolve, reject) => {
            var totalHeight = 0;
            var distance = 100;
            var timer = setInterval(() => {
                var scrollHeight = document.body.scrollHeight;
                window.scrollBy(0, distance);
                totalHeight += distance;

                if(totalHeight >= scrollHeight){
                    clearInterval(timer);
                    resolve();
                }
            }, 100);
        });
    });
}

ソース： https://github.com/chenxiaochun/blog/issues/38

32
Cory

ページの一番下までスクロールするには、次の2つの方法があります。

  1. scrollIntoView （下部にさらにコンテンツを作成できるページの部分にスクロールする）およびセレクター（つまり、document.querySelectorAll('.class_name').lengthを使用して、さらにコンテンツが生成されたかどうかを確認します）を使用します
  2. scrollBy （ページを段階的にスクロールダウンする）と setTimeout または setInterval （ページの最下部にあるかどうかを段階的に確認する）を使用します

ブラウザーで実行できるプレーンなJavaScriptでscrollIntoViewとセレクター（.class_nameがスクロールしてより多くのコンテンツを得るセレクターであると仮定）を使用した実装を次に示します。

方法1：scrollIntoViewとセレクターを使用する

const delay = 3000;
const wait = (ms) => new Promise(res => setTimeout(res, ms));
const count = async () => document.querySelectorAll('.class_name').length;
const scrollDown = async () => {
  document.querySelector('.class_name:last-child')
    .scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'end' });
}

let preCount = 0;
let postCount = 0;
do {
  preCount = await count();
  await scrollDown();
  await wait(delay);
  postCount = await count();
} while (postCount > preCount);
await wait(delay);

このメソッドでは、スクロールの前（preCount）とスクロール後（postCount）の.class_nameセレクターの数を比較して、ページの下部にいるかどうかを確認しています。

if (postCount > precount) {
  // NOT bottom of page
} else {
  // bottom of page
}

そして、ブラウザコンソールで実行できるプレーンなJavaScriptでsetTimeoutまたはsetIntervalをscrollByとともに使用する2つの可能な実装を次に示します。

方法2a：setByTimeoutをscrollByとともに使用する

const distance = 100;
const delay = 100;
while (document.scrollingElement.scrollTop + window.innerHeight < document.scrollingElement.scrollHeight) {
  document.scrollingElement.scrollBy(0, distance);
  await new Promise(resolve => { setTimeout(resolve, delay); });
}

方法2b：scrollByでsetIntervalを使用する

const distance = 100;
const delay = 100;
const timer = setInterval(() => {
  document.scrollingElement.scrollBy(0, distance);
  if (document.scrollingElement.scrollTop + window.innerHeight >= document.scrollingElement.scrollHeight) {
    clearInterval(timer);
  }
}, delay);

このメソッドでは、document.scrollingElement.scrollTop + window.innerHeightとdocument.scrollingElement.scrollHeightを比較して、ページの下部にいるかどうかを確認しています。

if (document.scrollingElement.scrollTop + window.innerHeight < document.scrollingElement.scrollHeight) {
  // NOT bottom of page
} else {
  // bottom of page
}

上記のJavaScriptコードのいずれかがページを一番下までスクロールすると、ページが機能していることがわかり、Puppeteerを使用してこれを自動化できます。

ページの下部までスクロールダウンし、ブラウザを閉じる前に数秒待機するサンプルのPuppeteer Node.jsスクリプトを次に示します。

操り人形法1：セレクターでscrollIntoViewを使用（.class_name）

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: null,
    args: ['--window-size=800,600']
  });
  const page = await browser.newPage();
  await page.goto('https://example.com');

  const delay = 3000;
  let preCount = 0;
  let postCount = 0;
  do {
    preCount = await getCount(page);
    await scrollDown(page);
    await page.waitFor(delay);
    postCount = await getCount(page);
  } while (postCount > preCount);
  await page.waitFor(delay);

  await browser.close();
})();

async function getCount(page) {
  return await page.$$eval('.class_name', a => a.length);
}

async function scrollDown(page) {
  await page.$eval('.class_name:last-child', e => {
    e.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'end' });
  });
}

操り人形師の方法2a：scrollByでsetTimeoutを使用する

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: null,
    args: ['--window-size=800,600']
  });
  const page = await browser.newPage();
  await page.goto('https://example.com');

  await scrollToBottom(page);
  await page.waitFor(3000);

  await browser.close();
})();

async function scrollToBottom(page) {
  const distance = 100; // should be less than or equal to window.innerHeight
  const delay = 100;
  while (await page.evaluate(() => document.scrollingElement.scrollTop + window.innerHeight < document.scrollingElement.scrollHeight)) {
    await page.evaluate((y) => { document.scrollingElement.scrollBy(0, y); }, distance);
    await page.waitFor(delay);
  }
}

操り人形の方法2b：scrollByでsetIntervalを使用

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: null,
    args: ['--window-size=800,600']
  });
  const page = await browser.newPage();
  await page.goto('https://example.com');

  await page.evaluate(scrollToBottom);
  await page.waitFor(3000);

  await browser.close();
})();

async function scrollToBottom() {
  await new Promise(resolve => {
    const distance = 100; // should be less than or equal to window.innerHeight
    const delay = 100;
    const timer = setInterval(() => {
      document.scrollingElement.scrollBy(0, distance);
      if (document.scrollingElement.scrollTop + window.innerHeight >= document.scrollingElement.scrollHeight) {
        clearInterval(timer);
        resolve();
      }
    }, delay);
  });
}
3
kimbaudi