Testing Lighthouse scores and page performance in GitLab pipelines
This guide explains how to run DebugBear tests in CI using GitLab pipelines.
Before getting started makes sure that:
- You have a DebugBear account and API key
- You know the ID of the page you want to test
- You are able deploy a commit to a test environment, for example
If you are not able to deploy your branch consider using ngrok and the
--ngrokWebPort 4040 option of the DebugBear CLI.
Setting up the DEBUGBEAR_API_KEY environment variable
Under Settings > CI/CD, scroll down to Variables and click Expand.
Set the variable key to
DEBUGBEAR_API_KEY and enter the API key obtained from the Project API tab on the DebugBear website. Then click Add variable.
Running DebugBear in the pipeline
Create a new pipeline or update your
.gitlab-ci.yml file as follows. Replace the page ID and URL to match your project.
- npm install debugbear
This code assumes that your source code already contains an npm package. If that isn't the case you need to run
npm init -y before running
npm install debugbear.
The following options are passed to the DebugBear command-line interface:
- pageId – Tells DebugBear which page in your project to test
- inferBuildInfo – Pick up details like commit hash and message from the CI environment
- waitForResult – Wait until the test is complete before exiting the CLI
- fail – If the test status is
failurethen exit with a non-zero exit code, failing the pipeline
- https://my-branch.example.com/ – override the default test URL with the URL where the current branch is deployed
Once the test is complete DebugBear will print a summary of changes compared to the base branch, or compared to the scheduled tests if no build exists on the branch.
Failing the build if a performance budget is exceeded
By default all tests on DebugBear finish with a
neutral status. Set up performance budgets to get
failure statuses and fail the GitLab pipeline.
The GitLab pipeline will now fail if the budget is exceeded.