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.

 

Node setup

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

node --version

We will use the Javascript function “await” so make sure you are running a recent version of NodeJS (7.6+).

 

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

npm install

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

run-test.js

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

testfiles/console-output-for-headless.html

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.

 

Feedback

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 mats.ljunggren@boozang.com if you find an easier way of doing this, or have any other suggestions.

 

Continue reading

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.

Write a Comment

  • Do you mind if I quote a few of your articles
    as long as I provide credit and sources back to your blog?
    My website is in the exact same area of interest as yours and my visitors would really benefit from
    a lot of the information you provide here.
    Please let me know if this okay with you.
    Thanks a lot!

  • Write a Reply or Comment

    Your email address will not be published. Required fields are marked *


    Create Your Account Now!

    For FREE. No credit card required.

    Sign Up