Generate reports with Headless Google Chrome and Puppeteer
We will use Puppeteer to create a very simple application, that launches a Chrome headless browser session from the command line, reads an HTML report from the console, and closes the browser. This example is useful as many automation frameworks will output “All tests completed! after a successful test run, so we use this a as trigger command to close the browser.
History and Xvfb
I recently wrote a blog post around running tests without supervision using the npm package npm-headless-chromium, which uses Xvfb (blog post can be found here). As the new Chrome browser (Chrome 59 and newer) ships with headless browser capabilities, Xvfb is no longer needed, and test automation can be greatly simplified. I started out using “chrome-remote-interface” and “chrome-launcher” but then I discovered Puppeteer which makes this job even easier. Puppeteer automatically installs a headless Chromium browser and introduces an easy-to-use API for most basic operations. We will in this example use Puppeteer to create a very simple application, that launches a headless browser session from the command line, reads an HTML report from the console, and closes the browser.
In order to install NodeJS follow the instructions here or simply use your favorite package handler
On CentOS (all commands hereafter assumes you are sudo-user)
yum install epel-release
yum install nodejs
Verify that you are running the latest NodeJS version by typing
Puppeteer example code
Start by downloading the example code here or simply clone the repository
git clone https://github.com/ljunggren/bz-puppeteer.git
To install all dependencies simply go to the bz-puppeteer directory and run
This should automatically download a supported Chrome version that works with Puppeteer. It all worked seamlessly on MacOS and Ubuntu, but I noticed some problems of getting a supported Chromium browser in CentOS. Hopefully this will be fixed on the Google side.
The sample code in
is very straightforward. It takes a URL and a result file as parameters and waits for the output string “All tests completed!”, where it pipes the html content that was written to the console to the result file. It also takes a screenshot at the start to verify that the intended page is rendered. It’s a rather silly example, but I built it this way as many test platforms output “All tests completed!” in the console when finished.
The test file
To emulate this behavior I created a simple test file
This file simply outputs some garbage, then some reporting info, followed by “All tests completed!”.
Go ahead and deploy this on any server of your choice to try it out. On refresh, you should see the output change both in the browser window and console accordingly.
Tying it together
Now you should be able to simply execute the headless Chrome and get the test report in the result file. Try running
node run-test.js http://your-server/console-output-for-headless.html result
The Chrome should launch in headless mode and wait for the “All tests completed!” and automatically pipe out the result into result.html.
The run-test.js should be easily modified to create much more sophisticated test conditions and behaviors, but I was hoping it could be used as boilerplate code.
Email me at firstname.lastname@example.org if you find an easier way of doing this, or have any other suggestions.
Having this setup, we can easily drive complicated test scenarios using the Boozang platform via a cronjob or from a CI server like Jenkins. To see how this is done, continue reading on Unsupervised testing using Boozang and Puppeteer.