Playwright実践編:無限スクロール

プログラミング

概要

Webページでスクロールすると下方向へどんどん伸びてゆくような場合のWebスクレイピングの仕方を説明します。
スクロールで最下行へ到達するとデータを読み込んでさらにページが伸びていくようなWebページの場合です。

このようなWebページは、回数制限を設けてスクロールをエミュレートすることでデータを取得します。

テスト用Webページ

このデモWebページは、最下行までスクロールするとデータを追加作成し、2000アイテムまでページが伸びていきます。

Infinite Scroll

以下、テスト用Webページのhtmlコードです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Infinite Scroll</title>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const contentContainer = document.getElementById("content");
            let count = 0;

            const loadMoreContent = () => {
                if (count >= 2000) return; // 最大50項目まで
                for (let i = 0; i < 80; i++) {
                    const div = document.createElement("div");
                    div.textContent = `Item ${++count}`;
                    contentContainer.appendChild(div);
                }
            };

            window.addEventListener("scroll", () => {
                if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
                    loadMoreContent();
                }
            });

            loadMoreContent();
        });
    </script>
</head>
<body>
    <h1>無限スクロールの例</h1>
    <div id="content"></div>
</body>
</html>

 

データを取得するためにスクロールする

PlaywrightでWebページをスクロールして、データが表示されてから取得します。
膨大なデータになる場合もあるので回数制限を設けてそれ以上は取得しないようにします。

コード例

from playwright.sync_api import sync_playwright

def scrape_infinite_scroll():
    url = "https://task.x0.com/playwright-test241227-01.html"
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)
        page = browser.new_page()
        page.goto(url)

        # スクロールを繰り返す
        for _ in range(10):  # 10回スクロールする例
            page.evaluate("window.scrollTo(0, document.body.scrollHeight)")
            page.wait_for_timeout(1000)  # 読み込み待ち

        items = page.query_selector_all("#content div")
        for item in items:
            print(item.inner_text())

        browser.close()

scrape_infinite_scroll()

 

デモWebページ

 

page.evaluate("window.scrollTo(0, document.body.scrollHeight)")

このコードで最下行までスクロールします。

windows.scrollTo(x,y)

xは横方向、yは縦方向のスクロール量です。

document.body.scrollHeight

この値は、ページ全体の高さを表します。
ですので、最下行までスクロールすることになります。

まとめ

無限スクロールであるWebページのスクレイピング方法を説明しました。
Playwrightで回数制限を設けてスクロールさせてからデータを取得しました。

テスト用のWebページを公開していますのでぜひ試してみてください。

Commnts