Integrate LightHouse into Bitbucket pipeline Part 1

Update 11 April 2021: You can see a better implemantation here

Today, i will show you some fun to tease your code xD and see how much it is a flop or top, so let the party start💃 🍻

What is lighthouse ?

I am so lazy to rewrite internet definition so here you go in short points

Lighthouse is an open-source
Google product
Audit web application ( performance, accessibility, SEO ..)

That is what you can get as result if you run lighthouse to audit you web application

What a bad performance, i know, i am such a noob 😅 .

Since we will test a code that required a login to the website first, we need to use a tool that will allow a fake login and of course it is puppeteer 🎉 to automate the login, here is a link for more details https://developers.google.com/web/tools/puppeteer

Here is our script to login into google account since our project use Google sign-in

as we can see, we navigate to our first page on localhost then we click on our button with corresponded selector and since we will have logically google sign-in page we write our mail and our password specified by their ids and we simulate the enter button on keyboard and that is all, we are signed in 🎉, the page.screenshot is to take some screenshot and follow the process ; for me i use it as a kind of debugger to see what is going on my headless browser.

now let’s first of all install lighthouse CLI (use npm or yarn as you prefer)

npm install -g @lhci/cli

so no we need to add a file named lighthouserc.js and copy/paste this

I will explain the most important things here so

line 7 : specify the command that launch your server

line 8 : specify the login script or any other script that you may need

line 9 : It is about how many time you want to run the test

line 12 to 17 : There are three presets available to provide a good starting point. Presets can be extended with manual assertions.

• lighthouse:all - Asserts that every audit received a perfect score. This is extremely difficult to do. Only use as a base on very high quality, greenfield projects and lower the thresholds as needed.
• lighthouse:recommended - Asserts that every audit outside performance received a perfect score, that no resources were flagged for performance opportunities, and warns when metric values drop below a score of 90. This is a more realistic base that disables hard failures for flaky audits.
• lighthouse:no-pwa - lighthouse:recommended but without any of the PWA audits enabled. source “Lighthouse documentation”

for the assertions part, you will specify which metric you want to see in your report and the minimum score that suits you

Then, the upload part is to choose where to upload the result to a local file or a public storage of lighthouse or even to your private storage .

There is a lot of configuration but this is a basic one but they have an awesome documentation here https://github.com/GoogleChrome/lighthouse-ci/tree/master/docs

Now you can just run

lhci autorun

and you will have the result as in the first picture or just a console log like this

So i think the pipeline will not be that complicated to write but we will add some spices which is commenting on every PR with Bitbucket API ..see you in Part2

Peace from Tunisia ✌️

Excuse my English 😝