Blog Details

NodeJs Puppeteer #6| 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

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

Menunggu sampai element terlihat di halaman

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

Menunggu sampai element tidak terlihat di halaman

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

Contoh Wait For Xpath

Menunggu sampai element terlihat di halaman

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

Menunggu sampai element Tidakterlihat di halaman

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

Contoh Wait For Time Out

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

Contoh Wait For Function

1
2
3
4
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

1
2
3
4
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

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

Contoh Wait For Response

1
2
3
4
5
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}
);
1
2
3
4
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     
);
1
2
3
4
5
6
7
8
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())
1
2
3
4
5
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

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

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

Contoh Wait For Frame

1
2
3
4
await page.goto("https://ibank.bankmandiri.co.id/retail3/")
const frame = await page.waitForFrame(async frame => {
  return frame.name() === 'mainFrame';
},{timeout:1000});
1
2
3
4
5
6
await page.goto("https://omayo.blogspot.com")
const frame = await page.waitForFrame(
  async frame => {
    return frame.$("#iframe2");       
  },{timeout : 50000}
);
 

Pages

Categories

Recent Posts

Convert text to pdf dengan python

Belajar Kivy ~ KIVY Language

PYQT5 – QTextEdit