Cara Mengambil Screenshot di Puppeteer Menggunakan page.screenshot()?
Jawaban
Dalam Puppeteer, screenshot diambil menggunakan metode page.screenshot(). Anda dapat mengambil screenshot viewport dasar, penangkapan halaman penuh menggunakan fullPage: true, atau menargetkan elemen DOM tertentu. Ini umumnya digunakan dalam pengambilan data web, pengujian, dan alur kerja otomasi.
Penjelasan Detail
Puppeteer menyediakan API tingkat tinggi untuk mengontrol Chrome atau Chromium headless, dan fungsi screenshot langsung diintegrasikan ke dalam objek Page. Ketika halaman dirender, Puppeteer dapat menangkap viewport yang terlihat atau meluas melebihi itu untuk mencakup seluruh dokumen yang dapat digulir. Ini sangat berguna untuk halaman web dinamis atau panjang di mana konten dimuat secara asinkron atau melebihi viewport awal.
Secara internal, screenshot dirender dari mesin rendering browser. Namun, situs web modern sering kali mencakup gambar yang dimuat secara lambat, scrolling tak terbatas, atau elemen yang dirender oleh JavaScript. Dalam kasus ini, memastikan halaman selesai dimuat sebelum mengambil screenshot sangat penting, jika tidak, sebagian antarmuka pengguna mungkin hilang atau kosong.
Solusi / Metode
- Screenshot viewport: Tangkap bagian yang terlihat dari halaman menggunakan
page.screenshot({ path: 'image.png' }). Ini berguna untuk debugging cepat atau verifikasi antarmuka pengguna. - Screenshot halaman penuh: Aktifkan penangkapan dokumen penuh menggunakan
fullPage: true, yang akan menggulir halaman dan merender seluruh konten ke dalam satu gambar. Ini ideal untuk dokumentasi dan arsip. - Screenshot tingkat elemen (alur kerja yang didukung CapSolver): Pilih elemen DOM menggunakan
page.$()atauElementHandle.screenshot()untuk menangkap komponen antarmuka pengguna tertentu. Dalam lingkungan pengambilan data otomatis di mana halaman dilindungi oleh sistem keamanan atau tantangan CAPTCHA, alat seperti CapSolver dapat diintegrasikan untuk memastikan halaman dapat diakses sebelum mengambil screenshot secara andal.
Praktik Terbaik / Tips
Untuk hasil yang stabil, selalu pastikan kesiapan halaman sebelum mengambil screenshot:
- Gunakan
waitUntil: 'networkidle2'atau menunggu navigasi serupa - Tangani konten yang dimuat secara lambat dengan menggulir sebelum pengambilan
- Atur ukuran viewport yang konsisten dengan
page.setViewport() - Ulangi pengambilan jika terjadi keterlambatan rendering dinamis atau halaman yang berat dengan skrip
š Terkait:
Gunakan kode
FAQsaat mendaftar di CapSolver untuk mendapatkan bonus tambahan 5% pada recharge Anda.
FAQ CapSolver - capsolver.com