Headless Chrome — Practice Note

As inspired from my colleague, he had written great toolkit which using .net core that combined with framework “Selenium” for proxy login to proxy server (Machines usually hidden under proxy network in office environment), That’s really saving our time for daily routine. I happened to read some article relative to topic of headless chrome, so I decide to practice with Node.js framework: Puppeteer for the same purpose:)

Framework Installation

Install Puppeteer simple via below command (assume you have been installed Node.js):

Puppeteer installation

Argument -g: made it installation globally
Installation process will download execution file of chrome [chrome.exe] (This might take more time)

If you want to install puppeteer standalone, please see this reference

Environment variable configuration

Cause we install package in global layer, we need setup environment variable for telling application to locate the source of npm’s module.

NODE_PATH setting

NODE_PATH: C:\Users\{AccountName}\AppData\Roaming\npm\node_modules

Programming use pupeteer API

If everything went fine, that’s begun our first headless chrome application (proxy.login.js).

const targetUrl = 'Url for the proxy server';
const puppeteer = require('puppeteer');
(async() => {
    const browser = await puppeteer.launch({
       executablePath: 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe'
});
const page = await browser.newPage();
page.on('console', consoleObj => console.log(consoleObj.text()));
// go to proxy page and fill-in name and passwordawait page.goto(targetUrl, {waitUntil: 'networkidle2'});
console.log("Start to login.....");
await page.evaluate(() => {
     document.querySelector("input[name='PROXY_SG_USERNAME']").value = 'Your account';
     document.querySelector("input[name='PROXY_SG_PASSWORD']").value = 'Your password';
})
.then(async() => {
    console.log("Start to submit.....");
    // submit
    await Promise.all([
       page.waitForNavigation({ waitUntil: 'networkidle0' }),
       page.click("input[value='Submit'][type=SUBMIT]")
]);
   // print result to see if redirect to google page (means login successfully)
  var res = await page.evaluate(() => {
     return [].slice.call(document.querySelectorAll("title"))
     .map((a) => { return { "Current page title": a.innerHTML}});
  });
  console.log(res);
})
.catch((err) => {
   console.log("Failed to load proxy page: " + err);
});
console.log("Start to close.....");
await browser.close();
})();

Fire target applicatieon

That’s run the application via command line

node proxy.login.js

Run application

The result redirect to error page but we did actually login proxy successfully. We guessed that the proxy server not compatible with Chrome (IE should be okay)

What’s next

Headless chrome was truly powerful and ease of use. With simple CLI that implemented diversity function like screenshot catching, PDF generating, web crawling and web testing…so on. Find yourself and begin have fun on it.

Reference

• https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md
• https://stackoverflow.com/questions/46198527/puppeteer-log-inside-page-evaluate/49101258#49101258
• https://developers.google.com/web/updates/2017/04/headless-chrome