Intro Puppeteer – Input dan Keypress

by

Pada modul ini kita akan bahas code sederhana untuk melakukan otomasi searching pada google.com.

Untuk bisa melakukan input, fungsi yang digunakan adalah type. Type adalah fungsi untuk mengirim keypress atau input. untuk detail dokumentasi lihat disini.

Setelah input text diisi, selanjutnya kita lakukan penekanan tombol enter. Fungsi yang digunakan adalah keypress. Untuk detail dokumentasi lihat disini.

TIPS: Untuk mencari API yang akan digunakan, lihat class apa yang digunakan. Contoh, code menggunakan page, oleh karena itu kita dapat mencari API class page.

Code

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: false
    });
    const page = await browser.newPage();
    await page.goto('https://google.com');
    await page.type('input[name=q]', 'skillplus', {delay: 100});
    await page.keyboard.press('Enter');
    await page.waitForNavigation();

    await page.screenshot({path: 'skillpluss.png'});
    //await browser.close();

    debugger;
})();

Pembahasan Code

Pertama load dahulu library yang digunakan yaitu puppeteer.

const puppeteer = require('puppeteer');

Buat object browser dengan setting headless: false.

const browser = await puppeteer.launch({
    headless: false
});

Buat halaman baru dan buka google.com

 const page = await browser.newPage();
 await page.goto('https://google.com');

Ketikan kata ‘skillplus’ pada input text. Lalu tekan tombol enter untuk melakukan searching. Karena halaman akan berubah, kita perlu menggunakan method page.WaitForNavigation() untuk mendapatkan response terakhir.

Pada method type, digunakan selector [name=q]. Hal ini bisa berbeda bila pengelola web google mengadakan perubahan. Option delay: 100 adalah untuk mensimulasikan penulisan oleh manusia.

await page.type('input[name=q]', 'skillplus', {delay: 100});
await page.keyboard.press('Enter');
await page.waitForNavigation();

Kesimpulan dan Latihan

Saat menggunakan puppeteer, kita tetap perlu melakukan inspect element yang akan kita manipulasi.

Untuk mempermudah debugging, biasanya saat development option headless adalah false. Saat digunakan pada tahap production, bisa dimatikan.

Dengan contoh diatas, coba buat code untuk melakukan login ke instagram. Untuk referensi, silakan download program yang sudah selesai disini.

Sharing is caring:

Leave a Comment