Belajar Scrapling - PlayWrightFetcher (Dynamic Content)

#Pendahuluan

Di episode 6 kalian belajar mempercepat fetching dengan AsyncFetcher dan asyncio — itu semua berlaku untuk halaman statis yang HTML-nya sudah lengkap sejak pertama kali diunduh. Tapi banyak website modern tidak seperti itu: konten dibangun oleh JavaScript di sisi browser, kadang setelah menunggu beberapa detik, kadang setelah scroll atau klik. HTTP biasa hanya melihat kerangka kosong. Untuk kasus ini, kalian butuh browser sungguhan, dan di episode 7 ini kita akan memakai PlayWrightFetcher.

Selama episode ini kalian akan: mengenal kapan sebuah halaman wajib dirender browser, memahami PlayWrightFetcher dan nama terkininya DynamicFetcher, memakai headless mode dan menunggu network idle, mengintegrasikan selektor Playwright lewat wait_selector, membandingkan browser asli versus headless untuk proteksi ringan-sedang, lalu mengoptimalkan fetching dengan session dan disable_resources. Siapkan browser Chromium kalian karena mulai sekarang kita benar-benar menjalankan browser.

#Kapan Halaman Wajib Dirender Browser

Banyak website memakai framework JavaScript seperti React, Vue, atau Svelte. Halaman yang dikirim server hanyalah HTML kosong dengan placeholder; data sebenarnya dimuat lewat request API lalu dirender di browser. Kalau kalian memakai Fetcher.get pada halaman seperti ini, yang kalian dapat hanya kerangka tanpa konten — selektor seperti .product-card akan mengembalikan list kosong.

Tanda-tanda halaman butuh rendering: konten muncul setelah halaman dimuat atau setelah interaksi, teks hilang saat JavaScript dimatikan, request XHR muncul di DevTools ketika kalian scroll, atau halaman berisi kata-kata seperti "loading". Kalau kalian sudah menjalankan DevTools dan melihat inisialisasi aplikasi JavaScript, itu sinyal untuk memakai browser fetcher. Untuk SPA yang pemindahan antar halamannya terjadi tanpa reload penuh, browser fetcher bahkan hampir wajib.

#Mengenal PlayWrightFetcher

PlayWrightFetcher adalah fetcher Scrapling yang mengendalikan browser Chromium lewat Playwright. Ia membuka halaman, menunggu JavaScript selesai, lalu mengembalikan hasilnya sebagai objek Response — objek yang sama dengan yang biasa kalian seleksi dengan .css dan .xpath.

playwright-fetch-dasar.py

from scrapling import PlayWrightFetcher
 
page = PlayWrightFetcher.fetch(
    "https://example.com/dashboard",
    headless=True,
    network_idle=True,
)
print(page.status)
print(page.css(".widget-value::text").getall())

Sebelum memakai browser fetcher apa pun, pastikan dependensinya terpasang. Scrapling mengunduh binary browser lewat perintah:

pip install "scrapling[fetchers]"
scrapling install

scrapling install{bash} mengunduh browser yang dibutuhkan lengkap dengan dependensinya. Tanpa langkah ini, memanggil PlayWrightFetcher akan gagal karena browser tidak ditemukan.

#Rendering JavaScript dan Network Idle

Konten yang dimuat JavaScript butuh waktu sebelum siap diambil. Menunggu dengan time.sleep yang sembarangan itu rapuh — terlalu cepat hasilnya kosong, terlalu lama membuang waktu. PlayWrightFetcher menyediakan dua alat untuk menunggu secara cerdas.

Opsi network_idle=True membuat fetcher menunggu sampai aktivitas jaringan berhenti selama beberapa saat — indikasi bahwa halaman sudah selesai memuat resource dan request background. Untuk konten yang dimuat lambat atau tidak pasti waktunya, pakai wait_selector untuk menunggu elemen spesifik yang menandakan konten sudah ada.

network-idle.py

from scrapling import PlayWrightFetcher
 
page = PlayWrightFetcher.fetch(
    "https://example.com/feed",
    headless=True,
    network_idle=True,
    wait_selector=".article-item",
    wait_selector_state="attached",
)
judul = page.css("h2.article-title::text").getall()

Argumen wait_selector{python} menerima selector CSS, dan wait_selector_state{python} menentukan kondisi yang ditunggu — attached berarti elemen muncul di DOM, visible berarti benar-benar tampak di layar. Kombinasi network_idle plus wait_selector adalah pola yang paling andal untuk halaman yang kontennya muncul bertahap.

#Integrasi Selektor Playwright

Scrapling tidak menutup kalian dari API Playwright; justru sebaliknya. Setiap fetcher browser menyimpan objek Playwright page yang bisa kalian akses langsung untuk pekerjaan yang butuh otomasi penuh — klik, scroll, isi form, atau eksekusi JavaScript sewenang-wenang.

otomasi-playwright.py

from scrapling import PlayWrightFetcher
 
fetcher = PlayWrightFetcher()
page = fetcher.fetch(
    "https://example.com/katalog",
    headless=True,
    network_idle=True,
)
 
page_page = fetcher.page
page_page.mouse.wheel(delta_x=0, delta_y=3000)
page_page.click("button.load-more")
page_page.wait_for_selector(".product-card")
 
hasil = page_page.content()

Setelah fetching selesai, fetcher.page{python} memberi akses ke halaman Playwright asli. Kalian bisa scroll untuk memicu lazy load, mengklik tombol "load more", lalu membaca ulang kontennya. Hasil .content() bisa disimpan dan diparsing dengan Adaptor seperti biasa. Inilah cara menangani infinite scroll dan load-more button — pola yang mustahil dengan HTTP fetcher.

#Headless vs Real Browser: Stealth Mode Dasar

Secara default, PlayWrightFetcher berjalan dalam mode headless=True — browser tanpa jendela, ringan dan cepat. Tapi browser headless mudah dikenali oleh skrip anti-bot: tidak ada jendela, user agent yang mencurigakan, dan beberapa properti JavaScript yang tidak konsisten. Untuk website dengan proteksi ringan-sedang — misalnya halaman yang memakai deteksi headless sederhana — menyalakan browser asli sering kali cukup.

real-browser.py

from scrapling import PlayWrightFetcher
 
page = PlayWrightFetcher.fetch(
    "https://example.com/proteksi-ringan",
    headless=False,
    network_idle=True,
)
print(page.status)

headless=False{python} memunculkan jendela browser sungguhan — sama seperti kalian membuka Chrome secara manual. Proteksi yang berbasis deteksi headless akan menganggap kalian pengguna biasa. Catatan penting: untuk proteksi keras seperti Cloudflare atau Turnstile, PlayWrightFetcher tidak cukup — StealthyFetcher di episode 8 adalah senjatanya. Gunakan browser asli hanya untuk proteksi ringan-sedang; browser tanpa jendela (headless) tetap pilihan utama untuk kecepatan.

#Session dan Optimasi Fetching

Membuka dan menutup browser untuk setiap request itu mahal. Kalau kalian akan mengambil banyak halaman dari domain yang sama, pakai session agar browser tetap hidup dan cookies serta state login bertahan. Untuk SPA, session juga membuat aplikasi tidak perlu re-render dari awal setiap kali.

dynamic-session.py

from scrapling.fetchers import DynamicSession
 
with DynamicSession(headless=True, disable_resources=True) as session:
    for page_url in ["https://example.com/hal/1", "https://example.com/hal/2"]:
        page = session.fetch(page_url, network_idle=True)
        print(page.css("h1::text").get())
 
page = session.fetch("https://example.com/hal/3", load_dom=False)

Opsi disable_resources=True memblokir gambar, font, dan media yang tidak diperlukan — mempercepat loading secara dramatis karena browser tidak membuang bandwidth untuk aset visual. Argumen load_dom=False{python} menyuruh browser mengambil konten tanpa menunggu DOM selesai penuh, berguna ketika kalian hanya butuh HTML awal yang sudah memuat data. Kombinasi session, disable_resources, dan load_dom adalah resep fetching browser yang ramping dan cepat.

#Penutup

Episode 7 ini menempatkan browser di tangan kalian: PlayWrightFetcher untuk merender JavaScript dan SPA, headless=True untuk kecepatan, network_idle dan wait_selector untuk menunggu konten dinamis, akses langsung ke objek Playwright page untuk klik dan scroll, browser asli (headless=False) untuk proteksi ringan-sedang, serta DynamicSession dengan disable_resources untuk fetching yang efisien.

Inti yang harus dibawa pulang:

• Halaman SPA dan konten JavaScript wajib dirender browser; Fetcher HTTP hanya melihat kerangka HTML.
• PlayWrightFetcher (kini DynamicFetcher) menunggu JavaScript selesai dan mengembalikan objek Response standar.
• Gunakan network_idle dan wait_selector alih-alih sleep untuk menunggu konten dinamis.
• Akses fetcher.page untuk otomasi Playwright penuh: scroll, klik, dan eksekusi JavaScript.
• Proteksi ringan-sedang bisa ditembus browser asli (headless=False); proteksi keras butuh StealthyFetcher.

Di episode 8 kita membahas senjata pamungkas untuk situs yang dilindungi keras: StealthyFetcher — browser automation via Chrome DevTools Protocol yang bisa menembus Cloudflare dan Turnstile out-of-the-box. Sampai jumpa!