Check balance on Danamon Online with Puppeteer
Tags: javascript, puppeteer, node, automation
Published: 2019-11-27 15:09:40

---
title: Check balance on Danamon Online with Puppeteer
published: true
description: Check balance of Danamon Online internet banking service using Puppeteer
tags: javascript, puppeteer, node, automation
cover_image: https://thepracticaldev.s3.amazonaws.com/i/zzd98hfi6n05e5v7h7u4.jpg
---

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`
```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.