Another real case to learn Puppeteer. What I learn here is to use Puppeteer, find selector, doing click, switch between iframes, get data from a table structure and all are automated.
Danamon Online is one of internet banking service in Indonesia.
We need to install puppeteer
and dotenv
(or maybe you already installed).
npm i puppeteer
npm i dotenv
Let's create these two files.
File .env
DANAMON_USER=
DANAMON_PASSWORD=
Fill with the credential of Danamon Online.
File danamononline.js
const puppeteer = require('puppeteer');
require('dotenv').config();
if (
!process.env.DANAMON_USER &&
!process.env.DANAMON_PASSWORD
) {
return console.log("Please edit the .env file with your Danamon Online credential!!!");
}
(async () => {
// set some options (set headless to false so we can see
// this automated browsing experience)
let launchOptions = { headless: false };
// let's go to the Danamon Online internet banking website
const browser = await puppeteer.launch(launchOptions);
const page = await browser.newPage();
await page.setViewport({width: 1366, height: 768});
await page.goto('https://www.danamonline.com');
// do the login, this is happen inside an iframe
var frame = page.frames()[1];
await frame.waitForSelector('#txtAccessCode');
await frame.type('#txtAccessCode', process.env.DANAMON_USER);
await frame.waitFor(1000);
await frame.type('#txtPin', process.env.DANAMON_PASSWORD);
await frame.waitFor(1000);
await frame.waitForSelector('#cmdLogin');
await frame.click('#cmdLogin');
await frame.waitFor(3000);
// get account name, inside an iframe on the right side
frame = page.frames()[1];
const accountName = await frame.evaluate(() => document.querySelectorAll('label[id="_ctl0_lblUsername"]')[0].textContent.trim() );
// doing click on the left side menu, this is inside an iframe
await frame.evaluate(() => document.querySelectorAll('a[headerindex="0h"]')[0].click());
await frame.waitFor(1000);
// doing click (again) on the left side menu, this will trigger
// summary balance info page on right iframe,
// this is inside an iframe
await frame.evaluate(() => document.querySelectorAll('div[contentindex="0c"]')[0].querySelectorAll('a')[0].click());
await frame.waitFor(5000);
// get balance info on the balance page, this is inside an iframe on the right side
frame = page.frames()[1];
const accountNumber = await frame.evaluate(() => document.querySelectorAll('.custom1 tr')[1].querySelectorAll('td')[0].innerHTML.substring(document.querySelectorAll('.custom1 tr')[1].querySelectorAll('td')[0].innerHTML.indexOf('<br>') + 4));
const currency = await frame.evaluate(() => document.querySelectorAll('.custom1 tr')[1].querySelectorAll('td')[1].textContent);
const actualBalance = await frame.evaluate(() => document.querySelectorAll('.custom1 tr')[1].querySelectorAll('td')[2].textContent);
const availableBalance = await frame.evaluate(() => document.querySelectorAll('.custom1 tr')[1].querySelectorAll('td')[3].textContent);
const balanceInfo = { 'account_no': accountNumber,
'account_name': accountName,
'currency': currency,
'actual_balance': actualBalance,
'available_balance': availableBalance }
// display Danamon Online balance (plus account number, account type and currency type)
console.log(balanceInfo);
await browser.close();
})();
Run it with
node danamononline.js
Source code also available at GitHub https://github.com/sonyarianto/danamon-online-check-balance-with-puppeteer
Thank you and I hope you enjoy it. Any feedback are welcome.
Top comments (0)