Perkenalan Web Scraping Dengan Puppeteer - CRUDPRO
Home  ›  Others

Perkenalan Web Scraping Dengan Puppeteer

Written By Saturday, January 14, 2023
Perkenalan Web Scraping Dengan Puppeteer

Web Scraping memiliki arti mengekstraksi data dari website. Itu dapat dilaksanakan dengan manual dan dapat automatis memakai bot atau situs crawler.

Puppeteer Adalah pustaka Node yang sediakan API tingkat tinggi untuk mengatur Chrome atau Chromium lewat Prosedur DevTools. Puppeteer jalan tanpa kepala secara standar tapi bisa dikonfigurasi untuk jalankan Chrome atau Chromium penuh (tanpa kepala). Mayoritas hal yang bisa Anda kerjakan dengan manual dengan browser Anda bisa dilaksanakan dengan memakai Puppeteer. Misalnya terhitung, hasilkan tangkapan monitor dan PDF halaman, membuat otomatis pengangkutan formulir, pengetesan UI, mengurangi halaman situs, dan lain-lain.

Headless vs Non-Headless mode

Headless adalah saat Anda menjalankan pengujian browser berbasis UI tanpa menampilkan UI browser. Puppeteer headless mode berjalan secara default. Untuk menjalankan mode non-headless yaitu untuk menampilkan UI browser saat menjalankan Puppeteer, atur headless menjadi false.

{headless: false}

Kami akan memakai Puppeteer untuk lakukan hal berikut;

  • Membuka google.com
  • Mencari keyword
  • Membuka hasil penelusuran pertama
  • Mengambil tangkapan monitor satu halaman penuh dari halaman itu

Mari kita mulai…

Pertama, karena Puppeteer adalah pustaka Node, Anda perlu menginstal Node di PC Anda.

Instal Puppeteer

npm install puppeteer

Puppeteer impor

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

Buat halaman baru

const page = await browser.newPage();

Atur viewport halaman

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

Buka www.google.com

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

Click dalam kolom input penelusuran, tulis keyword yang ingin kita mencari dan pencet enter pada keyboard kita.

Anda bisa memasang perpanjangan Chrome alat rekam Puppeteer untuk memperoleh pemilih HTML secara mudah bukannya memperolehnya lewat cara 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 boxawait page.keyboard.type('JavaScript');// press enter on your keyboardawait page.keyboard.press('Enter');
 
await page.waitFor(3000);

Dapatkan URL dari 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`

Dapatkan URL dari 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`);

Membuka URL hasil penelusuran pertama dan nantikan sampai document HTML awalnya termuat dan dirinci seutuhnya.

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

Mengambil Screenshot satu halaman penuh dan taruh ke directory sekarang ini

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

Konsol mencatat URL dan lokasi Screenshot

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 adalah 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
  );