How to use lighthouse in continuous integration system (example travis ci)

How to use lighthouse in continuous integration system (example travis ci)

Light house is a tool provided by Google to measure the load speed, PWA and SEO scores for the website.

Before we look into using lighthouse with a sample continuous integration system, let look into running lighthouse on a webpage and obtain the scores.

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');
const fs = require('fs');

function launchChromeAndRunLighthouse(url, opts, config = null) {
  return chromeLauncher.launch({chromeFlags: opts.chromeFlags}).then(chrome => {
    opts.port = chrome.port;
    return lighthouse(url, opts, config).then(results => {
      return chrome.kill().then(() => results.lhr)
    });
  });
}

const opts = {
  chromeFlags: ['--show-paint-rects', '--headless'],
  onlyCategories: ['performance']
};

// Usage:
launchChromeAndRunLighthouse('https://techdoma.in', opts).then(results => {
  // Use results!
  fs.writeFileSync('result', JSON.stringify(results))
});

Let us go through the file of lighthouse.js

We first import the npm package of lighthouse. This is the core package, and it runs the scan on the specified website. It accepts the url of the package that we want to run the scan on, then the options flag, like what kind of scan we need to run. Lighthouse api returns the promise, after which kill the chrome instance.

return lighthouse(url, opts, config).then(results => {
      return chrome.kill().then(() => results.lhr)
    });

Here we pass the following options to the lighthouse

const opts = {
  chromeFlags: ['--show-paint-rects', '--headless'],
  onlyCategories: ['performance']
};

We are launching the chrome with headless mode and show-paint-rects mode. There are many such flags available. You can see the chrome flags and their meaning here.

In order to run the lighthouse, we require chrome instance. So we use the package chrome-launcher. This package is used to launch the chrome instance. It does not install chrome, but provides options to launch and control chrome browser from the node script. More details about the chrome-launcher can be found here.

When running with continous integration system, like travis ci, we are going to use lighthouse programmatically. You might face issue with launching the chrome instance inside the CI system, as there are many types of CI systems available, and not all have chrome installed. In those cases, you need to install the chrome in the CI, before launching the chrome instance. Also, many CI systems do not support graphical mode, so you will need to run chrome with headless flag, and also use some other flags to prevent chrome from crashing. You will find more solutions related to this issue by googling the issue and the CI system.

For this blog, we are going to run the above code in travis ci.

lighthouse.js

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');
const fs = require('fs');
let EXITCONDITION = false;
function launchChromeAndRunLighthouse(url, opts, config = null) {
  return chromeLauncher.launch({chromeFlags: opts.chromeFlags}).then(chrome => {
    opts.port = chrome.port;
    return lighthouse(url, opts, config).then(results => {
      return chrome.kill().then(() => results.lhr)
    });
  });
}

const opts = {
  chromeFlags: ['--show-paint-rects', '--headless'],
  onlyCategories: ['performance']
};

const validMetrics = {
  'first-contentful-paint': 0.75
}

// Usage:
launchChromeAndRunLighthouse('https://techdoma.in', opts).then(results => {
  // Use results!
  const keys = Object.keys(validMetrics);
  keys.forEach(key => {
    const audit = results.audits[key];
    if(validMetrics[key] > audit.score){
      console.log('Failed');
      process.exit(1);
    }
  });
  EXITCONDITION = true;
  console.log('Success');
  process.exit(0);
  
  // fs.writeFileSync('result', JSON.stringify(results))
});

function wait () {
  if (!EXITCONDITION)
       setTimeout(wait, 1000);
};
wait();

In the above script, we check for one value out of the result, and if it is more than 0.75, we pass the process or else we fail the process.

Following is the .travis.yml file

language: node_js
addons:
  chrome: stable
language: node_js
node_js: 
  - 10
install: 
  - npm install
script: 
  - node lighthouse.js

Running the above script will install the dependencies and run the script file lighthouse.js.

Success Build ( first-contentful-paint = 0.75)

Failure Build ( first-contentful-paint = 0.65)

%d bloggers like this: