DEV Community

Cover image for Check balance on KlikBCA with Puppeteer
Sony AK
Sony AK

Posted on • Edited on

1

Check balance on KlikBCA with Puppeteer

Just a 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.

Oh yea, KlikBCA 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
Enter fullscreen mode Exit fullscreen mode

Let's create these two files.

File .env

KLIKBCA_USER=
KLIKBCA_PASSWORD=
Enter fullscreen mode Exit fullscreen mode

File klikbca.js

const puppeteer = require('puppeteer');
require('dotenv').config();

if (
  !process.env.KLIKBCA_USER &&
  !process.env.KLIKBCA_PASSWORD
) {
  return console.log("Please edit the .env file with your KlikBCA 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 BCA 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://ibank.klikbca.com');

    // do the login
    await page.type('#user_id', process.env.KLIKBCA_USER);
    await page.waitFor(1000);
    await page.type('#pswd', process.env.KLIKBCA_PASSWORD);
    await page.waitFor(1000);
    await page.waitForSelector('input[value="LOGIN"]');
    await page.click('input[value="LOGIN"]');
    await page.waitFor(5000);

    // get the account name, this is inside an iframe
    var frame = page.frames().find(fr => fr.name() === 'atm');
    var accountName = await frame.evaluate(() => document.querySelectorAll('center')[0].textContent);
    accountName = accountName.substring(0, accountName.indexOf(',')).trim();
    await frame.waitFor(3000);

    // doing click on left menu, account information, 
    // this menu is inside an iframe
    frame = page.frames().find(fr => fr.name() === 'menu');
    await frame.waitForSelector('a[href="account_information_menu.htm"]');
    await frame.click('a[href="account_information_menu.htm"]');
    await frame.waitFor(3000);

    // doing click again on left menu, balance inquiry, 
    // this menu is still inside an iframe  
    await frame.evaluate(() => document.querySelectorAll('table')[2].querySelectorAll('tr')[0].querySelectorAll('td')[1].querySelector('a').click());
    await frame.waitFor(3000);

    // now go to iframe that display the balance (on the right side)
    // and scrape the balance data there
    frame = page.frames().find(fr => fr.name() === 'atm');
    const balanceInfo = await frame.evaluate((accountName) => {
        return {'account_no': document.querySelectorAll('table')[2].querySelectorAll('tr')[1].querySelectorAll('td')[0].textContent.trim(),
            'account_name': accountName,
            'account_type': document.querySelectorAll('table')[2].querySelectorAll('tr')[1].querySelectorAll('td')[1].textContent.trim(),
            'currency': document.querySelectorAll('table')[2].querySelectorAll('tr')[1].querySelectorAll('td')[2].textContent.trim(),
            'balance': document.querySelectorAll('table')[2].querySelectorAll('tr')[1].querySelectorAll('td')[3].textContent.trim()}
    }, accountName);
    await frame.waitFor(1000);

    // display BCA balance (plus account number, account type and currency type)
    console.log(balanceInfo);

    // do logout so everybody happy and respect the service
    // logout link is inside in iframe
    frame = page.frames().find(fr => fr.name() === 'header');
    await frame.evaluate(() => document.querySelectorAll('a')[0].click());
    await frame.waitFor(1000);

    // close the browser
    await browser.close();
})();
Enter fullscreen mode Exit fullscreen mode

Run it with

node klikbca.js
Enter fullscreen mode Exit fullscreen mode

Source code also available at GitHub at at https://github.com/sonyarianto/klikbca-check-balance-with-puppeteer

Thank you and I hope you enjoy it. Any feedback are welcome.

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay