Web Scrapping Menggunakan Puppeteer

web scrapping berarti mengekstraksi data dari situs web. Ini dapat dilakukan secara manual dan otomatis menggunakan bot atau perayap web.

Puppeteer adalah pustaka simpul yang menyediakan API tingkat tinggi untuk mengontrol Chrome atau Chromium melalui protokol DevTools. Puppeteer berjalan tanpa kepala secara default, tetapi dapat dikonfigurasi untuk menjalankan Chrome atau Chromium penuh (tanpa kepala). Sebagian besar dari apa yang dapat Anda lakukan secara manual di browser Anda dapat dilakukan dengan menggunakan Puppeteer. Contohnya termasuk tangkapan layar halaman dan pembuatan PDF, pengiriman formulir otomatis, pengujian UI, dan scrapping halaman web.

Headless vs Non-Headless mode

Headless digunakan saat Anda ingin menjalankan pengujian browser berbasis UI tanpa menampilkan UI browser. Puppeteer berjalan Headless secara default. Untuk menjalankan mode non-headless, yaitu untuk menampilkan UI browser saat menjalankan Puppeteer, setel headless ke false.

{headless: false}

Gunakan Puppeteer untuk melakukan hal berikut:

Buka google.com
Cari kata kunci
Buka hasil pencarian pertama
Ambil tangkapan layar dari setiap halaman halaman

Ayo mulai…

Pertama, Puppeteer adalah library dari node, jadi Anda perlu menginstal node di PC Anda.

Instal Puppeteer

npm install puppeteer

Import puppeteer

const puppeteer = require('puppeteer');

Buat dan luncurkan instance baru Chromium.

// run in a non-headless mode
const browser = await puppeteer.launch({     headless: false,
// slows down Puppeteer operations
slowMo: 100,
// open dev tools
 devtools: true});

Buat halaman baru

const page = await browser.newPage();

Atur viewport untuk halaman


await page.setViewport({ width: 1199, height: 900 });

pergi ke www.google.com :

const link = 'https://www.google.com';
	await page.goto(link);

Klik di field input pencarian, ketik kata kunci yang ingin Anda cari, dan tekan Enter pada keyboard Anda.

Jika Anda menginstal ekstensi Chrome dari Puppeteer Recorder, Anda dapat dengan mudah mendapatkan pemilih HTML daripada mendapatkannya secara manual.

// wait for input field selector to render
await page.waitForSelector('div form div:nth-child(2) input');await page.click('div form div:nth-child(2) input');
// type JavaScript in the search box
await page.keyboard.type('JavaScript');
// press enter on your keyboard
await page.keyboard.press('Enter');
 
await page.waitFor(3000);

Dapatkan URL hasil pencarian pertama

await page.waitForSelector('
#main > div #center_col #search > div > div > div
');
// get href from the selectorconst getHref = (page, selector) =>
page.evaluate(
selector => document.querySelector(selector).getAttribute('href')
,selector
);
const url = await getHref(
page,
`#main > div #center_col #search > div > div > div a`
);

Buka URL hasil pencarian pertama dan tunggu dokumen HTML pertama dimuat dan diuraikan sepenuhnya.

await page.goto(url, { waitUntil: 'domcontentloaded' });

Ambil tangkapan layar dari halaman penuh dan simpan di direktori Anda saat ini

await page.screenshot({fullPage: true,path: 'new_image.png'});

Konsol mencatat URL dan lokasi tangkapan layar

const screenshotPath = process.cwd() + '/new_image.png';
console.log('URL of the page:', url);
console.log('Location of the screenshot:', screenshotPath);

Tutup halaman dan browser

await page.close();
await browser.close();

Ini kode lengkapnya

const puppeteer = require('puppeteer');

(async event => {
  const key_words = 'JavaScript';
  const link = 'https://www.google.com';

  const browser = await puppeteer.launch({ headless: true, slowMo: 100, devtools: true });

  try {
    const page = await browser.newPage();

    await page.setViewport({ width: 1199, height: 900 });

    await page.goto(link);

    await page.waitForSelector('div form div:nth-child(2) input');
    await page.click('div form div:nth-child(2) input');
    await page.keyboard.type(key_words);
    await page.keyboard.press('Enter');

    await page.waitFor(3000);

    await page.waitForSelector(
      '#main > div #center_col #search > div > div > div'
    );
    const url = await getHref(
      page,
      `#main > div #center_col #search > div > div > div a`
    );

    await page.goto(url, { waitUntil: 'domcontentloaded' });

    await page.screenshot({
      fullPage: true,
      path: 'new_image.png'
    });
    const screenshotPath = process.cwd() + '/new_image.png';

    console.log('URL of the page:', url);
    console.log('Location of the screenshot:', screenshotPath);

    await page.close();
    await browser.close();
  } catch (error) {
    console.log(error);
    await browser.close();
  }
})();

const getHref = (page, selector) =>
  page.evaluate(
    selector => document.querySelector(selector).getAttribute('href'),
    selector
  );

Untuk informasi lebih lanjut tentang puppeteer, lihat dokumentasi puppeteer resmi https://github.com/puppeteer/puppeteer.

Web Scrapping Menggunakan Puppeteer

Headless vs Non-Headless mode

Artikel Laravel Lainnya :