Google Lighthouse integration with Jenkins

 As part of Early Performance Testing, we decided to gather client side performance Metrics as well . Also the requirement to include this part of Jenkins CI/CD Process. 

I started installing Google lighthouse locally in node. When I ran against www.google.com, it ran like a charm. but the the real problem is to collect the stats for a page sitting beyond authentication. When started reading about that , google gave 2 options. 

1. Passing authentication cookie / header as extra headers while invoking the url

2. Using chrome in debug mode ( Manually we need to login) 

After discussion with architect, we took option 1 as strategical solution and option 2 as a Tactical solution. Our Jenkins running in windows machine and not able to launch chrome in debug mode via command prompt. 

Running Lighthouse locally : 

Here comes the issue to launch the chrome in debug mode and pass the remote debugging port to lighthouse commandline to run the test on pages behind authentication. As of now manual intervention is required to launch the browser and login to the application under test. But future need to automate this part using Sikuli or some other way. To launch chrome in debug mode, I installed chrome-debug in Npm and the same available in node modules

Then open a command prompt and go to the Node_Modules directory and run the chrome-debug. Once it opened chrome, it will output the port number in the command prompt itself.

Now run the lighthouse with remote port 60844

To run lighthouse with this open chrome session, open a command prompt and run the below command 

lighthouse  https://xyz.com/#/case --disable-storage-reset --port 60844 --output-path=./report.json --output json

Now the same chrome session will be highlighted in windows explorer and a new tab with the provided url will be opened. Once the report generation over, the newly opened tab will be closed automatically. 

The generated sample report will be like below:

Now lets see how to run this from Jenkins:

Jenkins Integration with LightHouse:

To integrate Lighthouse with Jenkins, Install NPM and lighthouse with flag -g in the jenkins server. 

npm install -g lighthouse

Then have chrome-debug files in Node_modules directory as in image 1. 

Install LighthouseReport plugin to Jenkins from plugin manager. Then restart Jenkins and come back to our freestyle Project. 

Go to Build section and choose Execute Windows batch command and enter the below lines of code.

Then choose lighthouse report and only enter /report.json. 

Now save the changes . Jenkins configuration is ready. 

In the jenkins server, open a chrome-debug session and update the port number in Jenkins build code. then click on build now. 

In the console you can able to view below log.

Once the run completed you can see the lighthouse Report on the left hand side , once you click on this the generated report will be loaded. A sample report below:

Todo: 

1. Configuring lighthouse-batch to run with more number of url's at a time
2. Automating browser login via sikuli
3. Moving all these to docker
4. Passing authenticated header