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 resultsPola 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_itemsPaginasi 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_dataKonten 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 htmlMenangani 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 htmlMenggabungkan 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 productsMemilih 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
- Klien HTTP untuk Agen: httpx dan requests
- Mengurai HTML dengan BeautifulSoup
- Menangani Paginasi dan Konten Dinamis
- Praktik Scraping yang Bertanggung Jawab