Sebagian besar situs modern tidak lagi menampilkan seluruh kontennya lewat HTML mentah. Framework seperti React, Vue, dan Angular merender data di sisi browser menggunakan JavaScript. Kalau kamu hanya mengandalkan teknik scraping statis seperti BeautifulSoup, kamu akan pulang dengan tangan kosong — halamannya ada, tapi datanya belum ada. Di sinilah Playwright masuk: ia mengendalikan browser sungguhan (Chromium, Firefox, atau WebKit), menjalankan JavaScript, dan membiarkanmu berinteraksi dengan halaman persis seperti manusia. Tutorial ini akan memandumu dari nol hingga mahir menggunakan Playwright dengan Python.

Apa Itu Playwright dan Kenapa Kamu Membutuhkannya?

Playwright adalah library otomasi browser open-source yang dikembangkan oleh Microsoft. Dibandingkan tools sejenis, Playwright punya beberapa keunggulan: dukungan multi-browser (Chromium, Firefox, WebKit), API sinkron dan asinkron, auto-waiting bawaan, serta kemampuan menangkap request jaringan. Playwright sering dipakai untuk tiga hal: web scraping konten dinamis, end-to-end testing, dan otomasi tugas repetitif. Bahkan kini Playwright menjadi fondasi populer untuk membangun AI agent yang bisa menjelajah web, seperti yang kita bahas di artikel Browser Use.

Langkah 1: Instalasi Playwright

Sebelum mulai, pastikan Python sudah terpasang di komputermu. Kalau belum, kamu bisa mengikuti panduan cara install Python terlebih dahulu. Setelah itu, instal paket Playwright lewat pip, lalu unduh browser yang dibutuhkan.

bash
pip install playwright
playwright install

Perintah playwright install akan mengunduh browser Chromium, Firefox, dan WebKit ke folder cache. Kalau kamu hanya butuh Chromium (yang paling umum), jalankan playwright install chromium agar lebih hemat ruang dan waktu.

Langkah 2: Program Pertama — Buka Halaman dan Screenshot

Mari kita mulai dengan program sederhana: membuka sebuah halaman, membaca judulnya, lalu menyimpan tangkapan layar. Playwright menyediakan dua API — sync dan async. Untuk pemula, API sync jauh lebih mudah dipahami karena alurnya lurus tanpa await.

python
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    # Luncurkan browser Chromium (headless = tanpa jendela)
    browser = p.chromium.launch(headless=True)
    page = browser.new_page()

    page.goto("https://example.com")
    print("Judul halaman:", page.title())

    # Simpan tangkapan layar
    page.screenshot(path="contoh.png")

    browser.close()

Jalankan skrip di atas dengan python nama_file.py. Kamu akan melihat judul halaman tercetak di terminal dan file contoh.png tersimpan di folder kerja. Perhatikan bahwa semua interaksi terjadi di dalam blok with sync_playwright() as p: — ini memastikan browser ditutup dengan bersih setelah selesai.

Langkah 3: Menunggu Elemen yang Dirender JavaScript

Inilah inti dari scraping konten dinamis. Situs seperti quotes.toscrape.com/js/ merender kutipannya lewat JavaScript — kalau kamu mengambil HTML mentahnya langsung, daftar kutipan tidak akan ada. Playwright punya fitur auto-waiting: wait_for_selector() akan menunggu sampai elemen benar-benar muncul di DOM, bukan sekadar halaman dimuat.

python
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page()

    page.goto("https://quotes.toscrape.com/js/")

    # Tunggu sampai elemen .quote dirender oleh JavaScript
    page.wait_for_selector(".quote")

    quotes = page.query_selector_all(".quote")
    print(f"Jumlah kutipan: {len(quotes)}")

    browser.close()

Langkah 4: Scraping Data dari Situs Dinamis

Sekarang kita gabungkan semuanya untuk mengekstrak data. Setelah menunggu elemen muncul, gunakan query_selector_all() untuk mengambil semua kutipan, lalu baca teks di dalamnya dengan inner_text().

python
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page()

    page.goto("https://quotes.toscrape.com/js/")
    page.wait_for_selector(".quote")

    for q in page.query_selector_all(".quote"):
        teks = q.query_selector(".text").inner_text()
        penulis = q.query_selector(".author").inner_text()
        print(f"{penulis}: {teks}")

    browser.close()

Kalau data yang kamu inginkan tidak ada di HTML hasil render melainkan diambil dari API internal, kamu juga bisa menangkap respons JSON-nya secara langsung — teknik ini jauh lebih cepat dan stabil. Kita bahas di bagian bonus nanti.

Selalu hormati robots.txt dan ketentuan layanan situs target. Batasi kecepatan request-mu, jangan membanjiri server, dan gunakan data hanya untuk keperluan yang diizinkan. Scraping yang agresif bisa membuat IP-mu diblokir — atau lebih buruk, melanggar hukum.

Langkah 5: Otomasi Form — Mengisi Input dan Klik Tombol

Selain membaca data, Playwright juga bisa menulis: mengisi form login, mengklik tombol, dan berpindah halaman. Ini berguna untuk testing otomatis atau mengakses konten yang berada di balik halaman login.

python
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    # headless=False agar kita bisa melihat browser bekerja
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()

    page.goto("https://example.com/login")
    page.fill("#username", "hermes")
    page.fill("#password", "rahasia123")
    page.click("button[type=submit]")

    # Tunggu sampai URL berubah ke dashboard
    page.wait_for_url("**/dashboard")
    print("Login berhasil, sekarang di:", page.url)

    browser.close()

Contoh di atas menggunakan headless=False agar kamu bisa melihat browser bekerja secara langsung — sangat membantu saat debugging. wait_for_url() akan menunggu sampai navigasi ke dashboard selesai sebelum lanjut ke baris berikutnya.

Langkah 6: Mode Headless vs Headful

Secara bawaan, headless=True menjalankan browser tanpa jendela — lebih cepat dan cocok untuk produksi atau server. Untuk pengembangan dan debugging, set headless=False agar kamu bisa melihat apa yang terjadi. Kamu juga bisa menambahkan page.pause() untuk membuka inspector interaktif dan menjalankan kode langkah demi langkah.

Bonus: Menangkap Request API dengan Network Interception

Sering kali data yang dirender JavaScript sebenarnya diambil dari API JSON di balik layar. Alih-alih menunggu dan mengurai HTML, kamu bisa menangkap permintaan API itu secara langsung.

python
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page()

    # Cetak semua request jaringan yang dibuat halaman
    page.on("request", lambda req: print("REQUEST:", req.url))

    page.goto("https://quotes.toscrape.com/js/")
    page.wait_for_selector(".quote")

    browser.close()

Dengan page.on("request", ...) kamu bisa melihat semua permintaan jaringan yang dibuat halaman. Cari URL yang mengandung kata seperti /api/ atau berakhiran .json, lalu ambil data dari sana. Teknik ini sering disebut pendekatan yang lebih bersih ketimbang mengurai HTML.

Gabungkan Playwright dengan BeautifulSoup untuk hasil terbaik: gunakan Playwright untuk merender halaman dinamis dan menangkap kontennya, lalu serahkan penguraian HTML yang kompleks kepada BeautifulSoup.

Kesimpulan

Playwright adalah senjata ampuh untuk scraping konten dinamis, testing end-to-end, dan otomasi browser. Kamu sudah belajar cara menginstalnya, menunggu elemen JavaScript, mengekstrak data, mengisi form, hingga menangkap request API. Mulailah dari skrip kecil, lalu kembangkan sesuai kebutuhanmu — dan jangan lupa untuk selalu menghormati aturan situs yang kamu akses. Selamat mencoba!