Apa itu puppeteer dan cara menggunakannya dalam web scraping | Panduan Lengkap 2026

Pengambilan data web telah menjadi keterampilan penting bagi siapa pun yang terlibat dalam ekstraksi data dari web. Baik Anda seorang pengembang, ilmuwan data, atau penggemar yang ingin mengumpulkan informasi dari situs web, Puppeteer adalah salah satu alat paling kuat yang tersedia. Panduan lengkap ini akan membahas apa itu Puppeteer dan cara menggunakannya secara efektif dalam pengambilan data web.

Pengenalan Puppeteer

Puppeteer adalah pustaka Node yang menyediakan API tingkat tinggi untuk mengontrol Chrome atau Chromium melalui Protokol DevTools. Puppeteer dikembangkan oleh tim Google Chrome dan menawarkan kemampuan kepada pengembang untuk melakukan berbagai tugas browser seperti menghasilkan screenshot, mengambil data dari situs web, dan yang paling penting, pengambilan data web. Puppeteer sangat populer karena kemampuan penjelajahan tanpa antarmuka grafis, yang berarti dapat berjalan tanpa antarmuka grafis, membuatnya ideal untuk tugas otomatis.

Tukarkan Kode Bonus CapSolver

Meningkatkan anggaran otomatisasi Anda secara instan!
Gunakan kode bonus CAPN saat menambahkan dana ke akun CapSolver untuk mendapatkan bonus tambahan 5% pada setiap pengisian ulang — tanpa batas.
Tukarkan sekarang di CapSolver Dashboard
.

Mengapa Menggunakan Puppeteer untuk Pengambilan Data Web?

Axios dan Cheerio adalah pilihan yang baik untuk pengambilan data JavaScript, tetapi memiliki keterbatasan: menangani konten dinamis dan menghindari mekanisme anti-pengambilan data.

Sebagai browser tanpa antarmuka grafis, Puppeteer unggul dalam mengambil konten dinamis. Hal ini memuat halaman target secara penuh, menjalankan JavaScript, dan bahkan dapat memicu permintaan XHR untuk mengambil data tambahan. Ini adalah sesuatu yang tidak dapat dicapai oleh pengambil data statis, terutama dengan Aplikasi Halaman Tunggal (SPAs) di mana HTML awal tidak memiliki data yang signifikan.

Apa lagi yang bisa dilakukan Puppeteer? Itu dapat merender gambar, mengambil screenshot, dan memiliki ekstensi untuk menyelesaikan berbagai captcha seperti reCAPTCHA, captcha, captcha. Misalnya, Anda dapat memprogram skrip Anda untuk menelusuri halaman, mengambil screenshot pada interval tertentu, dan menganalisis gambar tersebut untuk memperoleh wawasan kompetitif. Kemungkinannya hampir tak terbatas!

Penggunaan Sederhana Puppeteer

Kami sebelumnya menyelesaikan bagian pertama ScrapingClub menggunakan Selenium dan Python. Sekarang, mari kita gunakan Puppeteer untuk menyelesaikan bagian kedua

Sebelum memulai, pastikan Puppeteer terinstal di mesin lokal Anda. Jika tidak, Anda dapat menginstalnya menggunakan perintah berikut:

npm i puppeteer # Mengunduh Chrome yang kompatibel selama instalasi.
npm i puppeteer-core # Alternatifnya, instal sebagai pustaka, tanpa mengunduh Chrome.

Mengakses Halaman Web

const puppeteer = require('puppeteer');

(async function() {
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();
    await page.goto('https://scrapingclub.com/exercise/detail_json/');

    // Berhenti selama 5 detik
    await new Promise(r => setTimeout(r, 5000));
    await browser.close();
})();

Metode puppeteer.launch digunakan untuk menjalankan instance Puppeteer baru dan dapat menerima objek konfigurasi dengan berbagai opsi. Opsi yang paling umum adalah headless, yang menentukan apakah browser berjalan dalam mode headless. Jika Anda tidak menentukan parameter ini, itu akan default ke true. Opsi konfigurasi lain yang umum adalah sebagai berikut:

Mengatur Ukuran Jendela

Untuk mencapai pengalaman penjelajahan terbaik, kita perlu menyesuaikan dua parameter: ukuran viewport dan ukuran jendela browser. Kode berikut:

const puppeteer = require('puppeteer');

(async function() {
    const browser = await puppeteer.launch({
        headless: false,
        args: ['--window-size=1920,1080']
    });
    const page = await browser.newPage();
    await page.setViewport({width: 1920, height: 1080});
    await page.goto('https://scrapingclub.com/exercise/detail_json/');

    // Berhenti selama 5 detik
    await new Promise(r => setTimeout(r, 5000));
    await browser.close();
})();

Menarik Data

Dalam Puppeteer, terdapat berbagai metode untuk menarik data.

1. Menggunakan Metode evaluate

   Metode evaluate mengeksekusi kode JavaScript dalam konteks browser untuk menarik data yang diperlukan.

   javascript Copy

   const puppeteer = require('puppeteer');
   
   (async function () {
       const browser = await puppeteer.launch({
           headless: false,
           args: ['--window-size=1920,1080']
       });
       const page = await browser.newPage();
       await page.setViewport({width: 1920, height: 1080});
       await page.goto('https://scrapingclub.com/exercise/detail_json/');
   
       const data = await page.evaluate(() => {
           const image = document.querySelector('.card-img-top').src;
           const title = document.querySelector('.card-title').innerText;
           const price = document.querySelector('.card-price').innerText;
           const description = document.querySelector('.card-description').innerText;
           return {image, title, price, description};
       });
   
       console.log('Nama produk:', data.title);
       console.log('Harga produk:', data.price);
       console.log('Gambar produk:', data.image);
       console.log('Deskripsi produk:', data.description);
   
       // Berhenti selama 5 detik
       await new Promise(r => setTimeout(r, 5000));
       await browser.close();
   })();

2. Menggunakan Metode $eval

   Metode $eval memilih satu elemen dan menarik isinya.

   javascript Copy

   const puppeteer = require('puppeteer');
   
   (async function () {
       const browser = await puppeteer.launch({
           headless: false,
           args: ['--window-size=1920,1080']
       });
       const page = await browser.newPage();
       await page.setViewport({width: 1920, height: 1080});
       await page.goto('https://scrapingclub.com/exercise/detail_json/');
   
       const title = await page.$eval('.card-title', el => el.innerText);
       const price = await page.$eval('.card-price', el => el.innerText);
       const image = await page.$eval('.card-img-top', el => el.src);
       const description = await page.$eval('.card-description', el => el.innerText);
   
       console.log('Nama produk:', title);
       console.log('Harga produk:', price);
       console.log('Gambar produk:', image);
       console.log('Deskripsi produk:', description);
   
       // Berhenti selama 5 detik
       await new Promise(r => setTimeout(r, 5000));
       await browser.close();
   })();

3. Menggunakan Metode $$eval

   Metode $$eval memilih beberapa elemen sekaligus dan menarik isinya.

   javascript Copy

   const puppeteer = require('puppeteer');
   
   (async function () {
       const browser = await puppeteer.launch({
           headless: false,
           args: ['--window-size=1920,1080']
       });
       const page = await browser.newPage();
       await page.setViewport({width: 1920, height: 1080});
       await page.goto('https://scrapingclub.com/exercise/detail_json/');
   
       const data = await page.$$eval('.my-8.w-full.rounded.border > *', elements => {
           const image = elements[0].querySelector('img').src;
           const title = elements[1].querySelector('.card-title').innerText;
           const price = elements[1].querySelector('.card-price').innerText;
           const description = elements[1].querySelector('.card-description').innerText;
           return {image, title, price, description};
       });
   
       console.log('Nama produk:', data.title);
       console.log('Harga produk:', data.price);
       console.log('Gambar produk:', data.image);
       console.log('Deskripsi produk:', data.description);
   
       // Berhenti selama 5 detik
       await new Promise(r => setTimeout(r, 5000));
       await browser.close();
   })();

4. Menggunakan Metode page.$ dan evaluate

   Metode page.$ memilih elemen, dan metode evaluate mengeksekusi kode JavaScript dalam konteks browser untuk menarik data.

   javascript Copy

   const puppeteer = require('puppeteer');
   
   (async function () {
       const browser = await puppeteer.launch({
           headless: false,
           args: ['--window-size=1920,1080']
       });
       const page = await browser.newPage();
       await page.setViewport({width: 1920, height: 1080});
       await page.goto('https://scrapingclub.com/exercise/detail_json/');
   
       const imageElement = await page.$('.card-img-top');
       const titleElement = await page.$('.card-title');
       const priceElement = await page.$('.card-price');
       const descriptionElement = await page.$('.card-description');
       const image = await page.evaluate(el => el.src, imageElement);
       const title = await page.evaluate(el => el.innerText, titleElement);
       const price = await page.evaluate(el => el.innerText, priceElement);
       const description = await page.evaluate(el => el.innerText, descriptionElement);
   
       console.log('Nama produk:', title);
       console.log('Harga produk:', price);
       console.log('Gambar produk:', image);
       console.log('Deskripsi produk:', description);
   
       // Berhenti selama 5 detik
       await new Promise(r => setTimeout(r, 5000));
       await browser.close();
   })();

Mengatasi Perlindungan Anti-Pengambilan Data

Menyelesaikan latihan ScrapingClub relatif sederhana. Namun, dalam skenario pengambilan data dunia nyata, mendapatkan data tidak selalu begitu mudah. Beberapa situs web menggunakan teknologi anti-pengambilan data yang mungkin mendeteksi skrip Anda sebagai bot dan memblokirnya. Situasi yang paling umum melibatkan tantangan CAPTCHA seperti captcha, captcha, recaptcha, captcha, dan captcha.

Untuk menyelesaikan tantangan CAPTCHA ini, diperlukan pengalaman luas dalam machine learning, reverse engineering, dan tindakan pencegahan fingerprint browser, yang memakan waktu yang signifikan.

Untungnya, Anda tidak perlu lagi menangani semua pekerjaan ini sendirian. CapSolver menyediakan solusi komprehensif yang membantu Anda menyelesaikan semua tantangan dengan mudah. CapSolver menawarkan ekstensi browser yang memungkinkan Anda menyelesaikan tantangan CAPTCHA secara otomatis saat menggunakan Puppeteer untuk pengambilan data. Selain itu, menyediakan metode API untuk menyelesaikan CAPTCHA dan mendapatkan token. Semua ini dapat dilakukan dalam beberapa detik. Lihat dokumen ini dokumen untuk mengetahui bagaimana menyelesaikan berbagai tantangan CAPTCHA yang Anda temui!

Kesimpulan

Pengambilan data web adalah keterampilan yang tak ternilai harganya bagi siapa pun yang terlibat dalam ekstraksi data web, dan Puppeteer, sebagai alat dengan API yang canggih dan fitur kuat, adalah salah satu pilihan terbaik untuk mencapai tujuan ini. Kemampuannya dalam menangani konten dinamis dan menyelesaikan mekanisme anti-pengambilan data membuatnya menonjol dari alat pengambilan data lainnya.

Dalam panduan ini, kita menjelajahi apa itu Puppeteer, keunggulannya dalam pengambilan data web, dan cara mengatur serta menggunakannya secara efektif. Kita menunjukkan dengan contoh bagaimana mengakses halaman web, menyetel ukuran viewport, dan menarik data menggunakan berbagai metode. Selain itu, kita membahas tantangan yang ditimbulkan oleh teknologi anti-capture dan bagaimana CapSolver menyediakan solusi kuat untuk tantangan CAPTCHA.

FAQ

1. Apa yang utamanya digunakan Puppeteer dalam pengambilan data web?

Puppeteer digunakan untuk mengontrol browser Chrome/Chromium sebenarnya, memungkinkannya memuat JavaScript dinamis, merender halaman SPA, berinteraksi dengan elemen, dan menarik data yang tidak dapat diakses oleh penejelajah HTTP biasa.

2. Apakah Puppeteer dapat menangani tantangan CAPTCHA di situs web?

Puppeteer sendiri tidak dapat melewati CAPTCHA, tetapi ketika dikombinasikan dengan ekstensi browser CapSolver atau API, itu dapat secara otomatis menyelesaikan tantangan reCAPTCHA, hCaptcha, FunCAPTCHA, dan verifikasi lainnya selama tugas pengambilan data.

3. Apakah Puppeteer perlu dijalankan dengan jendela browser yang terlihat?

Tidak. Puppeteer mendukung mode headless, di mana Chrome berjalan tanpa GUI. Mode ini lebih cepat dan ideal untuk otomatisasi. Anda juga dapat menjalankannya dalam mode non-headless untuk debugging atau pemantauan visual.