Ok kali ini saya akan menulis sedikit tentang puppeteer, dan untuk yang baca ini pasti sudah tau apa itu Puppeteer. Jadi gausah basa basi lagi kita langsung aja ke tutorialnya.
Bagi yang baru pakai Puppeteer seperti saya ini pada saat pertama kali mau melakukan web testing dan terdapat iframe di code/web yang kita mau testing pasti sedikit kebingungan ketika mau mengakses selector didalam iframe tersebut.
Saat kita coba intercept webnya “loh ini dapet selectornya, tapi ko selector notfound terus” hmmm pada saat ini saya kebingungan wkwk ko bisa begitu, alhasil saya cari cari di google dan nemuin problemnya, ternyata iframe itu seperti beda page dari halaman aslinya/page utama dari website yang kita pasangi iframe, jadi agar dapet selector yang didalem iframe tersebut kita harus masuk ke page iframe tersebut dan baru kita select selectornya di dalem iframe tersebut.
Sebagai contoh disini saya pake code html sederhana :
index.html
<html><title>Test Frame Pertama</title><body><span>Iframe Pertama</span><br/><iframe src="http://127.0.0.1:5500/framekedua.html" width="680" height="480" allowfullscreen></iframe></body></html>
framekedua.html
<html><title>Test Frame kedua</title><body><span class="framekedua">Ini adalah frame kedua</span></body></html>
Jadi disini sebagai casenya kita mau agar Puppeteer bisa mengakses text `Ini adalah frame kedua` yang berada di file framekedua.html melalui index.html.
Pertama kita buat code sederhana Puppeteernya seperti biasa agar dia bisa mengakses index.html, codenya sebagai berikut :
const puppeteer = require('puppeteer');(async () => {const $options = { waitUntil: 'networkidle2' };const browser = await puppeteer.launch({ headless: false });const page = await browser.newPage();await page.goto('http://127.0.0.1:5500/index.html', $options);})();
Result code diatas adalah sebagai berikut dimana dia bisa mengakses index.html lewat chromium Puppeteernya :
Pertama dari code tersebut kita tambahkan code berikut untuk menunggu selector iframe
await page.waitForSelector("iframe");Lalu setelah ditambahkan dan kita sudah dapet selector iframenya, kita tambahkan lagi code berikut, untuk menghandle selector yang ada didalem iframe
const elementHandle = await page.$('iframe');const frames = await elementHandle.contentFrame();
Dan terakhir kita tambahkan code berikut, untuk menselect selector yang ada didalem iframe
const textFrameKedua = await frames.evaluate(() =>{return document.querySelector('span.framekedua').innerText;})console.log('ini adalah text dari iframe ', textFrameKedua)
Dan hasilnya :
Ok jadi kita sudah berhasil mendapatkan text dari dalam iframe dengan Puppeteer.
Full script :
const puppeteer = require('puppeteer');(async () => {const $options = { waitUntil: 'networkidle2' };const browser = await puppeteer.launch({ headless: false });const page = await browser.newPage();await page.goto('http://127.0.0.1:5500/index.html', $options);await page.waitForSelector("iframe");const elementHandle = await page.$('iframe');const frames = await elementHandle.contentFrame();const textFrameKedua = await frames.evaluate(() =>{return document.querySelector('span.framekedua').innerText;})console.log('ini adalah text dari iframe ', textFrameKedua)})();
Terimakasih banyak yang sudah membaca!!! Semoga berhasil!!
