Scarnox · Blog

Cara scraping situs web yang dirender JavaScript

Banyak situs modern mengirim dokumen HTML yang hampir kosong dan membangun kontennya di browser dengan JavaScript. Jika scraper Anda mengambil halaman dan tidak menemukan produk, harga, maupun teks artikel, kontennya memang ada, tetapi datangnya belakangan. Panduan ini menunjukkan cara mengenali jenis halaman yang Anda hadapi, cara menemukan jalur yang lebih cepat daripada browser jika ada, dan cara scraping halaman yang dirender dengan Playwright di Python. Di akhir, ada catatan tentang apa yang harus dilakukan ketika halaman yang dirender menampilkan captcha.

Langkah 1: periksa apakah kontennya ada di HTML

Buka halaman dengan view-source: di browser Anda, atau ambil dengan request HTTP biasa, lalu cari potongan teks yang bisa Anda lihat di layar. Ada tiga hasil yang umum:

Teksnya ada. Halaman dirender di server. Klien HTTP biasa dan parser HTML sudah cukup, dan Anda sebaiknya menggunakannya, karena lebih cepat dan lebih sederhana.
Teksnya tidak ada, tetapi ada blob JSON. Banyak situs menyematkan state-nya di tag skrip, seperti __NEXT_DATA__. Parse JSON tersebut secara langsung.
Teksnya tidak ada dan tidak ada blob. Halaman memuat kontennya dengan request lanjutan. Lihat tab Network di DevTools, difilter ke Fetch/XHR, selama halaman dimuat.

Langkah 2: panggil endpoint JSON jika ada

Ketika halaman mengambil datanya dari sebuah endpoint, memanggil endpoint itu secara langsung biasanya pilihan terbaik. Endpoint itu lebih kecil, lebih cepat, dan lebih stabil daripada halaman yang dirender. Salin URL request, periksa header apa yang dibutuhkan situs, lalu coba dari skrip. Lakukan ini hanya jika ketentuan situs mengizinkannya, dan hormati batas laju atau autentikasi yang diharapkan situs. Endpoint yang tidak didokumentasikan bisa berubah tanpa pemberitahuan, jadi tulis parser Anda agar gagal dengan keras ketika bentuk respons berubah.

Langkah 3: render halaman ketika memang harus

Jika kontennya benar-benar membutuhkan browser, jalankan browser headless. Playwright adalah pilihan yang baik untuk Python. Contoh di bawah ini membuka daftar produk, menunggu kontennya muncul, dan membaca teks dari setiap kartu:

from playwright.sync_api import sync_playwright

URL = "https://example.com/products"  # halaman yang boleh Anda scrape

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page()
    page.goto(URL, wait_until="domcontentloaded", timeout=60_000)
    # Tunggu elemen yang membuktikan data sudah tiba.
    page.wait_for_selector(".product-card", timeout=30_000)
    titles = page.locator(".product-card h2").all_inner_texts()
    browser.close()

for title in titles:
    print(title)

Menunggu selector tertentu jauh lebih andal daripada sleep yang tetap. Jeda tetap terlalu pendek pada hari yang lambat, atau membuang waktu pada hari yang cepat. Pilih elemen yang hanya muncul setelah data dimuat.

Langkah 4: tangani infinite scroll dan paginasi

Beberapa halaman memuat lebih banyak item ketika Anda scroll. Scroll ke bagian bawah, tunggu jumlah item bertambah, dan berhenti ketika jumlahnya tidak lagi bertambah. Halaman dengan paginasi bernomor lebih sederhana: temukan tautan halaman berikutnya, ikuti, dan berhenti di halaman terakhir. Selalu tetapkan jumlah maksimum halaman atau scroll, agar bug tidak membuat crawler Anda berjalan selamanya.

def scroll_until_done(page, selector: str, max_rounds: int = 20) -> int:
    previous = -1
    for _ in range(max_rounds):
        count = page.locator(selector).count()
        if count == previous:
            break
        previous = count
        page.mouse.wheel(0, 4000)
        page.wait_for_timeout(1500)  # beri waktu batch berikutnya untuk dimuat
    return previous

Langkah 5: jaga browser tetap hemat

Merender halaman itu mahal. Blokir gambar, font, dan media yang tidak Anda butuhkan, dan gunakan ulang satu browser untuk banyak halaman alih-alih meluncurkan browser baru setiap kali. Tutup halaman dan konteks ketika selesai, agar memori tidak terus naik sepanjang run yang panjang.

def block_heavy_assets(route):
    if route.request.resource_type in ("image", "font", "media"):
        route.abort()
    else:
        route.continue_()

page.route("**/*", block_heavy_assets)

Langkah 6: ketika halaman yang dirender menampilkan captcha

Kadang halaman yang dirender menampilkan captcha sebelum ia menampilkan konten apa pun. Jika captcha itu adalah PopularCaptcha, jenis captcha yang aktif di Scarnox, Anda membaca sitekey dari halaman, meminta token, dan meletakkan token di field form yang diharapkan situs. Panduan Python PopularCaptcha menjelaskan langkah tersebut. Widget lain belum aktif, jadi periksa jenis captcha yang dijelaskan sebelum Anda merencanakan sesuatu berdasarkan widget itu.

Berhati-hatilah dengan browsernya sendiri. Browser headless yang jelas terlihat otomatis bisa memicu lebih banyak pemeriksaan, bukan lebih sedikit. Baca deteksi browser headless untuk sinyal yang perlu diperhatikan, dan utamakan pemuatan halaman yang lebih lambat dan lebih sedikit.

Scraping secara bertanggung jawab

Periksa robots.txt dan ketentuan situs sebelum Anda merender halaman atau memanggil endpoint-nya.
Jaga batas laju tetap rendah, dan cache hasil agar Anda mengambil setiap halaman sekali saja.
Jangan scrape data pribadi tanpa dasar hukum yang sah.
Jika situs membatasi akses, berhenti. Jangan mencoba melewati pembatasan tersebut.

Langkah selanjutnya

Mulai dengan kredit uji coba gratis, tanpa kartu: buat akun dan uji alur PopularCaptcha di halaman milik Anda sendiri. Untuk tarif terbaru, lihat halaman harga.