Lighthouse CI setup with Jenkins

Lighthouse is an open-source automated tool that audits for performance, accessibility, SEO, best practices, PWA and much more for the web application under test.

Lighthouse CI (LHCI) is a layer of commands that enables us to run, assert, save and fetch LHCI results.

In this article, I will go over the necessary basics first and then provide necessary information to configure in Jenkins.

INSTALLATION

docker pull hemanthsridhar/lhci:1.0.0

This is a custom docker image whose base image is Ubuntu. It has Node, LHCI and chrome browser installed.

IMPORTANT : If you do not want to use the above image, feel free to create an image of your own using this tutorial. This tutorial provides a comprehensive overview on how to create a custom docker image and upload to Bintray.

LHCI CONFIG FILE

In this file we can define our assertions, LHCI server configuration, chrome flags etc. The extension of this file will be .json.

We will be creating this on the fly in our Jenkins job inside our docker container.

RUNNING LIGHTHOUSE CLI

The LIGHTHOUSE CLI will run inside the docker container created. The overall result will be stored in a folder called .lighthouseci.

JENKINS SHELLSCRIPT CONFIGURATION

PUBLISHING REPORTS IN JENKINS

We will use HTML Publisher plugin to publish our lighthouse reports.

In the last step of our shellscript configuration we have copied the results folder from the container to the host machine.

IMPORTANT : The results will still not appear. We will get a message which says ‘Please enable Javascript to view lighthouse results’.

In order to ensure our report appears in the dashboard, we need relax Jenkins Content Security Policy.

System.setProperty("hudson.model.DirectoryBrowserSupport.CSP","sandbox allow-scripts; default-src 'unsafe-inline'; img-src * data:")

FURTHER READING

More on LHCI Configuration available in https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/configuration.md

More on LHCI Assertions available in https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/assertions.md

Configuring LHCI server is available in https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/getting-started.md#the-lighthouse-ci-server