NodeJs Puppeteer #5 | WaitFor | Menunggu Element Siap| Tutorial Belajar Node JS Web Automation dengan dan Puppeteer

Menunggu Element Siap ~ Tutorial Belajar Node JS Web Automation dengan dan Puppeteer.
Kali ini kita akan belajar bagaimana cara wait for element di halaman website dengan dengan bahasa pemrograman nodejs, dengan menggunakan library puppeteer. Sebelum mengikuti tutorial ini, alangkah baiknya teman teman semuanya mengikuti tutorial kami sebelumnya agar bisa terstruktur dan tidak bingung jika menemukan istilah istlah yang baru dalam puppteer.

Metod yang bisa kita gunakan untuk Wait Element

• Page.waitForSelector() :  Menunggu sampai selector siap
• Page.waitForTimeout() : Menunggu berdasarkan waktu / await new Promise(r => setTimeout(r, waktu tunggu));
• Page.waitForXPath() :  Menunggu sampai selector siap menggunakan xpath
• page.waitForFunction : Menggunakan fungsi didalam sintax nya.
• Page.waitForNavigation() :  Menunggu element tersedia ketika menggunakan method click
• Page.waitForRequest():  Menunggu sampai network melakukan request ke url tertentu selesai di lakukan
• Page.waitForResponse() :  Menunggu sampai network melakukan request ke url tertentu selesai di lakukan dan sudah menerima response dari url yang bersangkutan
• Page.waitForNetworkIdle() : Menunggu sampai network tidak ada request sama sekali
• Page.waitForFrame() : Menunggu sampai Frame terload

 

Contoh Wait For Selector

Menunggu Sampai Element Exist

try {
    await page.waitForSelector("#ta1xxx",{timeout : 20000})
} catch (e) {
    console.log("Timeout")
}

Menunggu sampai element terlihat di halaman

try {
    await page.waitForSelector("#delayedText",{timeout : 2000,visible: true})
} catch (e) {
    console.log("Timeout")
}

Menunggu sampai element tidak terlihat di halaman

try {
    await page.waitForSelector("#deletesuccess",{timeout : 30000,hidden: true})
} catch (e) {
   console.log("Timeout")
}

Contoh Wait For Xpath

Menunggu sampai element terlihat di halaman

try {
    await page.waitForXPath("//*[@id='delayedText']",{timeout : 20000,visible: true})
} catch (e) {
    console.log("Timeout")
}

Menunggu sampai element Tidakterlihat di halaman

try {
    await page.waitForXPath("//*[@id='deletesuccess']",{timeout : 30000,hidden: true})
} catch (e) {
    console.log("Timeout")
}

Contoh Wait For Time Out

await page.waitForTimeout(4000)
await new Promise(r => setTimeout(r, 4000));

Contoh Wait For Function

    await page.waitForFunction("document.getElementById('ta1').value === 'hello'", {});
    await page.waitForFunction("document.getElementById('deletesuccess').style.display === 'none'", {timeout:30000});
    await page.waitForFunction("document.querySelector('#but1').disabled === false", {timeout:30000});
    await page.waitForFunction("document.querySelector('#but2').disabled === true", {timeout:30000});

Contoh Wait For Navigation

await Promise.all([
  page.waitForNavigation({timeout:50000,waitUntil: 'networkidle2'}),
  page.click('.post-title a'),
]);

Option untuk WaitUntil:
– load : pertimbangkan navigasi selesai saat acara pemuatan diaktifkan.
– domcontentloaded – pertimbangkan navigasi selesai saat event DOMContentLoaded diaktifkan.
– networkidle0 – pertimbangkan navigasi selesai ketika tidak ada lebih dari 0 koneksi jaringan selama setidaknya 500 ms.
– networkidle2 – pertimbangkan navigasi selesai jika tidak ada lebih dari 2 koneksi jaringan selama minimal 500 ms.

Contoh Wait For Request

await page.waitForRequest('https://riffasoft.com/wp-includes/images/w-logo-blue-white-bg.png');

const myrequest= await page.waitForRequest(
  request => request.url() === 'https://riffasoft.com/wp-includes/images/w-logo-blue-white-bg.png'
);

Contoh Wait For Response

    await page.goto("https://riffamedia.com/contact-us/")
    await page.waitForResponse(
      'https://riffamedia.com/wp-json/contact-form-7/v1/contact-forms/4602/feedback',
      {timeout : 50000}
    );

    await page.goto("https://riffamedia.com/contact-us/")
    await page.waitForResponse(
      response => response.url() === 'https://riffamedia.com/wp-json/contact-form-7/v1/contact-forms/4602/feedback' && response.status() === 200      
    );

    await page.goto("https://riffamedia.com/contact-us/")
    const [response] = await Promise.all([
      page.waitForResponse(
        'https://riffamedia.com/wp-json/contact-form-7/v1/contact-forms/4602/feedback',
        {timeout : 50000}
      )
    ])
    console.log(await response.json())

    await page.goto("https://riffamedia.com/contact-us/")
    const test = await page.waitForResponse((response) => {
      return response.url()==='https://riffamedia.com/wp-json/contact-form-7/v1/contact-forms/4602/feedback' && response.status() === 200;
    });
    console.log(await test.json())

Contoh Wait For Network idle

await page.waitForNetworkIdle({idleTime : 50000,timeout: 100000})

iddleTime : Jarak waktu antar Network Request
timeout : Keseluruhan waktu proses

Contoh Wait For Frame

    await page.goto("https://ibank.bankmandiri.co.id/retail3/")
    const frame = await page.waitForFrame(async frame => {
      return frame.name() === 'mainFrame';
    },{timeout:1000});

    await page.goto("https://omayo.blogspot.com")
    const frame = await page.waitForFrame(
      async frame => {
        return frame.$("#iframe2");        
      },{timeout : 50000}
    );