0Pricing
AI Agents · Pelajaran

Menangani Paginasi dan Konten Dinamis

Ikuti tautan halaman berikutnya dan gunakan Playwright untuk halaman yang dirender JavaScript.

Menangani Paginasi dan Konten Dinamis adalah pelajaran AI Agents gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar AI Agents, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus AI Agents mencakup 4 pelajaran total.

Masalah Paginasi

Sebagian besar situs web nyata tidak menyajikan semua datanya dalam satu halaman. Hasil dibagi ke beberapa halaman untuk mengurangi beban. Agen harus mendeteksi dan mengikuti paginasi untuk mengumpulkan kumpulan data yang lengkap.

Ada dua pola paginasi yang umum: tautan halaman berikutnya dan pola URL nomor halaman.

Mendeteksi Tautan Halaman Berikutnya

Banyak situs memiliki tombol atau tautan panah “Berikutnya”. Temukan tag anchor dengan rel='next' atau dengan teks seperti “Berikutnya”, ekstrak href-nya, lalu ikuti tautan tersebut dalam perulangan hingga tidak ada lagi.

from bs4 import BeautifulSoup
import httpx

def scrape_all_pages(start_url: str) -> list:
    results = []
    url = start_url

    while url:
        response = httpx.get(url, timeout=10.0)
        soup = BeautifulSoup(response.text, 'html.parser')

        # Collect data from this page
        for item in soup.select('.result-item'):
            results.append(item.text.strip())

        # Find the next page link
        next_link = soup.find('a', rel='next') or soup.find('a', string='Next')
        url = next_link.get('href') if next_link else None

    return results

Pola URL Nomor Halaman

Banyak API dan situs menggunakan pola URL yang dapat diprediksi: /results?page=1, /results?page=2, dan seterusnya. Agen dapat mengiterasi URL ini secara langsung tanpa mengurai DOM untuk mencari tautan berikutnya.

import httpx

def scrape_paginated_api(base_url: str, max_pages: int = 10) -> list:
    all_items = []

    for page in range(1, max_pages + 1):
        response = httpx.get(
            base_url,
            params={'page': page, 'per_page': 50},
            timeout=10.0
        )
        response.raise_for_status()
        data = response.json()

        items = data.get('results', [])
        if not items:
            break  # No more data

        all_items.extend(items)
        print(f'Page {page}: fetched {len(items)} items')

    return all_items

Paginasi Berbasis Kursor

API modern (GitHub, Slack, Twitter) menggunakan paginasi berbasis kursor. Setiap respons menyertakan token kursor untuk halaman berikutnya. Kirim kursor tersebut dalam permintaan berikutnya hingga token itu tidak ada atau bernilai null.

import httpx

def fetch_with_cursor(url: str, headers: dict) -> list:
    all_data = []
    cursor = None

    while True:
        params = {'cursor': cursor} if cursor else {}
        response = httpx.get(url, headers=headers, params=params, timeout=10.0)
        response.raise_for_status()
        data = response.json()

        all_data.extend(data.get('items', []))

        cursor = data.get('next_cursor')  # None when done
        if not cursor:
            break

    return all_data

Konten Statis vs. Dinamis

Beberapa halaman memuat konten melalui JavaScript setelah HTML awal dikirimkan. Klien HTTP biasa hanya menerima kerangka kosong—data sebenarnya disisipkan oleh JS di peramban.

Untuk halaman seperti ini, alat seperti Playwright menjalankan mesin peramban sungguhan dan menunggu JavaScript selesai dijalankan sebelum mengekstrak konten.

Memasang dan Mengimpor Playwright

Pasang Playwright dengan pip install playwright, lalu jalankan playwright install chromium untuk mengunduh peramban. Gunakan async_playwright() untuk alur kerja agen asinkron.

# Installation (run in terminal):
# pip install playwright
# playwright install chromium

from playwright.async_api import async_playwright
import asyncio

async def fetch_dynamic(url: str) -> str:
    async with async_playwright() as p:
        browser = await p.chromium.launch(headless=True)
        page = await browser.new_page()
        await page.goto(url)
        html = await page.content()  # Full rendered HTML
        await browser.close()
    return html

# html = asyncio.run(fetch_dynamic('https://example.com'))

Menunggu Konten Dinamis Dimuat

Halaman JavaScript sering memuat data secara asinkron. Minta Playwright menunggu hingga elemen tertentu muncul sebelum mengekstrak konten, sehingga data yang Anda perlukan benar-benar tersedia di DOM.

from playwright.async_api import async_playwright

async def scrape_dynamic_table(url: str) -> list:
    async with async_playwright() as p:
        browser = await p.chromium.launch(headless=True)
        page = await browser.new_page()
        await page.goto(url)

        # Wait for the table to appear in the DOM
        await page.wait_for_selector('table.results', timeout=10000)

        html = await page.content()
        await browser.close()

    from bs4 import BeautifulSoup
    soup = BeautifulSoup(html, 'html.parser')
    return [td.text for td in soup.select('table.results td')]

Mengeklik dan Berinteraksi dengan Halaman

Playwright dapat menyimulasikan interaksi pengguna: mengeklik, mengisi formulir, menggulir, dan memasukkan input melalui papan ketik. Dengan demikian, agen dapat menavigasi alur login, menu tarik-turun, atau halaman dengan pengguliran tanpa akhir.

from playwright.async_api import async_playwright

async def click_load_more(url: str) -> str:
    async with async_playwright() as p:
        browser = await p.chromium.launch(headless=True)
        page = await browser.new_page()
        await page.goto(url)

        # Click the 'Load More' button
        load_more = page.locator('button:text("Load More")')
        if await load_more.count() > 0:
            await load_more.click()
            await page.wait_for_timeout(2000)  # wait 2s for content

        html = await page.content()
        await browser.close()
    return html

Menangani Pengguliran Tanpa Akhir

Beberapa situs memuat lebih banyak konten saat Anda menggulir ke bawah. Playwright dapat menyimulasikan pengguliran untuk memicu pemuatan tersebut. Gulir berulang kali dan periksa setiap kali apakah ada konten baru yang muncul.

from playwright.async_api import async_playwright

async def scrape_infinite_scroll(url: str, scroll_count: int = 5) -> str:
    async with async_playwright() as p:
        browser = await p.chromium.launch(headless=True)
        page = await browser.new_page()
        await page.goto(url)

        for _ in range(scroll_count):
            await page.evaluate('window.scrollTo(0, document.body.scrollHeight)')
            await page.wait_for_timeout(1500)  # wait for new content

        html = await page.content()
        await browser.close()
    return html

Menggabungkan Playwright dengan BeautifulSoup

Setelah Playwright merender halaman dan mengembalikan HTML lengkap, masukkan HTML tersebut ke BeautifulSoup untuk ekstraksi yang mudah. Dengan demikian, Anda menggabungkan keunggulan kedua pustaka tersebut.

from playwright.async_api import async_playwright
from bs4 import BeautifulSoup

async def extract_js_rendered_data(url: str) -> list:
    async with async_playwright() as p:
        browser = await p.chromium.launch(headless=True)
        page = await browser.new_page()
        await page.goto(url)
        await page.wait_for_selector('.product-card')
        html = await page.content()
        await browser.close()

    soup = BeautifulSoup(html, 'html.parser')
    products = []
    for card in soup.select('.product-card'):
        products.append({
            'name': card.select_one('.name').text.strip(),
            'price': card.select_one('.price').text.strip()
        })
    return products

Memilih Alat yang Tepat

Tidak semua halaman memerlukan Playwright. Gunakan pendekatan paling sederhana yang berhasil:

  • HTML statis: httpx + BeautifulSoup (cepat, tanpa beban tambahan dari peramban)
  • API JSON dengan paginasi: httpx dengan parameter halaman/kursor
  • Konten yang dirender JS: Playwright asinkron (lebih lambat, tetapi lebih canggih)

Selalu mulai dengan pendekatan statis dan gunakan Playwright hanya jika diperlukan.

Pemeriksaan Pemahaman: Paginasi dan Konten Dinamis

Uji pemahaman Anda tentang paginasi dan penanganan konten dinamis.

Ringkasan: Paginasi dan Konten Dinamis

Agen Anda sekarang dapat menangani seluruh ragam konten web:

  • Mengikuti tautan halaman berikutnya atau mengiterasi parameter halaman pada URL
  • Menggunakan token kursor untuk paginasi API modern
  • Menggunakan async_playwright() untuk halaman yang dirender JavaScript
  • Menunggu elemen dengan page.wait_for_selector()
  • Menggabungkan Playwright dengan BeautifulSoup untuk ekstraksi yang mudah

Selalu mulai dengan pendekatan paling sederhana dan beralih ke Playwright hanya jika pendekatan statis tidak memadai.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menangani Paginasi dan Konten Dinamis” gratis?

Ya — teks lengkap “Menangani Paginasi dan Konten Dinamis” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus AI Agents, upgrade ke CoddyKit PRO. Kursus AI Agents mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menangani Paginasi dan Konten Dinamis”?

Ikuti tautan halaman berikutnya dan gunakan Playwright untuk halaman yang dirender JavaScript. Kamu berlatih AI Agents dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai AI Agents?

Tidak diperlukan pengalaman sebelumnya. AI Agents di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Menangani Paginasi dan Konten Dinamis” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran AI Agents ini?

Ya. Setiap pelajaran AI Agents menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Klien HTTP untuk Agen: httpx dan requests
  2. Mengurai HTML dengan BeautifulSoup
  3. Menangani Paginasi dan Konten Dinamis
  4. Praktik Scraping yang Bertanggung Jawab
← Kembali ke AI Agents