Headless Chrome started shipping with Google Chrome from version 59 onwards. It brings all modern web platform features provided by Chromium and the Blink rendering engine to the command line. Today, Headless Chrome is one of the most preferred options for interacting with the browsers through the command line or code for automated testing, web-scraping SPAs, performance tracking and visual analysis.
Later in the post, I also cover how
Heimdall Bot uses Headless Chrome, Puppeteer and Flock API to send our internal Service Performance Monitoring (SPM) Kibana dashboard screenshots every morning judiciously to the dev team.
Working with Headless Chrome is simple. Here are quick and simple examples from their project page:
Print to PDF:
Taking a screenshot:
This would take a screenshot after the page is loaded with a viewport of 1280x800 and save it in a file
screenshot.png in the local directory.
Here are some use-cases for Headless Chrome:
- Generate screenshots and PDFs of pages.
- Crawl an SPA and generate pre-rendered content (i.e. “SSR”).
- Automate form submission, UI testing, keyboard input, etc.
- Create an up-to-date, automated testing environment.
- Capture a timeline trace of your site to help diagnose performance issues.
Headless Chrome provides varied levels of APIs to interact with it programmatically namely Puppeteer and CRI (Chrome Remote Interface) Library.
Puppeteer is a Node library developed by the Chrome team. It provides a high-level API to control headless Chrome and also interact with the DevTools protocol. In short, Puppeteer makes Headless Chrome accessible to millions of developers to build their own applications.
Here is a simple example of taking a screenshot:
Heimdall is our ELK-based Service Performance Monitoring service. Although, for the last few months we have been on top of our dashboards every single day; it would be amazing to have snapshots of those dashboards available on email and Flock which we use as our primary internal collaboration tool. Heimdall Bot simply does this in style.
Here are the moving parts:
1. Node.js Puppeteer script which takes the screenshot
2. CRON job which acts as a glue to publish the screenshot to S3 and sends a message on Flock
Here is how the cron config looks like:
Post Flock message -
Here is how the message looks like:
The complete code is available on our internal Bitbucket project page. It would be interesting to add support for labels in Heimdall Bot so that we can push relevant snapshots to the respective teams.
Headless Chrome has opened up a plethora of possibilities. What’s possible on the browser now is also possible through code.