This is an article highlighting how i stumbled onto a use case on expanding upon the KPLC API to build a better reporting tool for consumers.
For more on how I came up with this idea. Check out How I built an Electricity Tracker for fun and (not) profit
Introduction
I discovered there was part of the Self Service Portal doesn’t show the full results on the UI. Being a curious developer i peeped onto the network tab and found out that they are returning more transactional data than what was shown. I decided that it would be a fun try to use the API to get the data directly.
Inspecting the KPLC API
If you Inspect the Network tab on your Devtools as you make a request you’ll discover the Request URL that is https://selfservice.kplc.co.ke/api with your serial number meter as the query param you’ll be able to get a result.
The Request headers include a bearer token which when you check out using Postman you’ll find quite the bit of data included in it.
I wasn’t really aware of the filters on how far back the data is fetched from but it was enough to work with ~6 months. I decided to use Puppeteer to build out the Automation.
Why I chose Puppeteer
Puppeteer is a Node.js library that provides a high level API to control Chromium. It runs on headless mode by default. The KPLC API is currently authenticated using a Bearer token. It would be ideal to use browser automation since we’ll be quering the API directly from the UI like a normal user would do so. Despite this being slower at the time i believed it would be the safest way of consuming the API without it being perceived as abuse.
Starting off
To start off with Puppeteer you’d have to launch the browser in headless mode so that you can navigate to the Bill / Meter Query Page
// Start Puppeteer const browser = await puppeteer.launch({ headless: true }); // Open New Page const page = await browser.newPage(); // Navigate to KPLC Self Service Portal await page.goto(KPLC_URL, { waitUntil: 'load', timeout: 0, });
Navigation
To begin navigation you would need to wait until all the elements have loaded on the page. You can decide to select the any selector id to validate this
await page.waitForSelector('#button-{ID}');
We intend to navigate to the
Bill/Meter Query link.
You can initiate a click on the link using
await page.click('#{LINK_ID}');
Inputting the Meter Data at the Query Page
At the query page you’ll arrive at a form where you can input the data.
Using Puppeteer this will go like
//Select Meter Number Option await page.click('#{RADIO_BUTTON_ID}'); //Type Meter number await page.type('#{TEXT_FIELD_ID}', YOUR_METER_NUMBER); // Submitting the Request by clicking the search button await page.click('#{SEARCH_BUTTON_ID}');
Getting the Response Data from DevTools
You can listen in on the page response data if the url includes the
KPLC_URL to get the json directly.// Listen on network response page.on('response', async (response) => { if ( response .url() .includes(KPLC_URL) ) { const json = await response.json(); // WOOHOO ! GOT THE DATA } });
Data Cleanup
You’ll notice the data could contain some unnecessary/sensitive info (name,servicePointNo) so you can build out your own model of what you intend to get back from your API.
Conclusion
After discovering the above i was able to validate that Puppeteer is a really helpful tool for browser automation and in future plan to use the same for hobby projects rather than E2E Testing for web applications.