Bitbucket custom pipe to send lighthouse report to slack

Lighthouse and CI

So the story started when our lead developer

Slim Jaâbiri

introduce me to the lighthouse and he asked me to implement it into our CI but since we are using bitbucket pipeline, I did not really find any official image to use especially when it comes to sending the report to our slack channel, I tried two workarounds

First Workaround

It was about just implementing lighthouse API and the developer can just check the pipeline result but at some point, it was really boring and not really intuitive, since the developer needs to check every time the pipe and I was planning to write a second part about just sending the file via slack API, you can check my article about it here

Second Workaround

It was about just mirroring our bitbucket pipeline to GitHub and write GitHub actions using their awesome images marketplace, I was not as really satisfied; it is a kind of “dirty hack ”

So when I was searching I find this awesome article that shows how to run a lighthouse nodejs script then it parses the report and sends it to slack. So I was like wait 😅 I can use it to build a custom pipe like you can see here in https://support.atlassian.com/bitbucket-cloud/docs/write-a-pipe-for-bitbucket-pipelines/

Adapt code to the existing website

The code takes as variables

• Slack webhook
• URLs to test

but wait! 😤 our website’s first page was a login so I add it puppeteer to fake it and test the rest of the URLs ( all you need is to log in once then just keep going) and now as variables I have

• slack webhook
• URLs to test
• Username
• Password
• First page ( since it is our gate to the website )

Fake login with puppeteer

The last thing to modify with the code was adding URLs as variable environment and since we can have a lot I put this variable as an array and parse it then loop it so we can test all the URLs like this

Multiple URL Testing Lighthouse

The URLS env variable was like this in the variables of custom pipe

URLS = https://example.com/iam,https://example.com/your, https://example.com/father

all I have to do after that is keep going with the bitbucket custom pipes tutorial and make the Dockerfile

Dockerfile for custom pipe (Bitbucket)

Third line: we install chromium since both lighthouse and puppeteer need to launch a chrome instance to test the website

Important: flags for launching chrome in Dockerfile needs to be like this or you will have a lot of errors and you will be lost

Chrome options and flag

I complete the pipe.yml that we can call the config file of the custom pipe where we will put our variables, information about the author ….

All I need to do after is just to write my pipeline and call the custom pipe

script:
- pipe: docker://USER/IMAGE:tag
  variables:
    SLACK_WEBHOOK: $SLACK_WEBHOOK
    pass: $pass
    user: $user
    FIRST_PAGE: "https://exmaple.com/login"
    URLS: https://example.com/iam,https://example.com/your, https://example.com/father

Don’t forget to create your slack application.

I am working into contributing this pipe to the official bitbucket images marketplace so stay tuned

For any help DM me.

Peace from Tunisia 🐧