loading...
Cover image for Check balance on Danamon Online with Puppeteer

Check balance on Danamon Online with Puppeteer

sonyarianto profile image Sony AK Updated on ・2 min read

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.

Discussion

pic
Editor guide