Bitbucket pipeline Your system is missing the dependency: Xvfb - testing

Question

I'm trying to add cypress to the bitbucket pipeline but it tells me that I need to install Xvfb and I don't know how to keep going. This is my bitbucket.pipelines.yml
# Template NodeJS build
# This template allows you to validate your NodeJS code.
# The workflow allows running tests and code linting on the default branch.
image: node:14.15.4
pipelines:
default:
- step:
name: Build
script:
- npm install
- npm run lint
- npm run cypress:run
This is my package.json scripts
"scripts": {
"cypress:open": "cypress open",
"cypress:run": "npx cypress run --record --key xxxxxxxxxxxx"
}
and the test are running fine locally
But in the pipeline I'm getting this error:
+ npm run cypress:run
> wallet-frontend#0.1.0 cypress:run /opt/atlassian/pipelines/agent/build
> npx cypress run --record --key 70004462-62d4-42ce-b359-5bff73d8b001
It looks like this is your first time using Cypress: 6.5.0
[16:30:09] Verifying Cypress can run /root/.cache/Cypress/6.5.0/Cypress [started]
[16:30:09] Verifying Cypress can run /root/.cache/Cypress/6.5.0/Cypress [failed]
Your system is missing the dependency: Xvfb
Install Xvfb and run Cypress again.
Read our documentation on dependencies for more information:
https://on.cypress.io/required-dependencies
If you are using Docker, we provide containers with all required dependencies installed.
----------
Error: spawn Xvfb ENOENT
----------
Platform: linux (Debian - 9.13)
Cypress Version: 6.5.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! wallet-frontend#0.1.0 cypress:run: `npx cypress run --record --key xxxxxxxxx`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the wallet-frontend#0.1.0 cypress:run script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Answer 1

Xvfb is an in-memory display server for a UNIX-like operating system, in your case Linux (Debian - 9.13). This is a system-level dependency that cypress assumes is installed beforehand. In the case of bitbucket env, this is not installed and hence this error. This is primarily used for Display (UI) in case of headed browsers while running cypress.
There are few easy workarounds here:
Installing the dependency manually: I won't suggest this as you might miss out few more dependencies unless you thoroughly look into all the dependencies.
Run headless browsers:: Headless browsers don't use Xvfb, so won't be facing this exact error but as I said in point 1, there can be other issues. Command will become cypress run --headless
Use Cypress provided Docker images (Suggested): I can see that you are using the node:14.15.4 image for this build. Instead of that, use a cypress provided official base images for whatever node version you want to run (Look for different node version in tags). If you look into the Dockerfile, you will see that they have taken an effort to install the dependencies needed to run Cypress inside the docker (You can see Xvfb there).
Also, look for already open issues when you get stuck in cypress-related issues, they have a very active and helpful issues section. I found this same issue in there: https://github.com/cypress-io/cypress/issues/14457

Answer 2

Cypress provides the dependencies for CI.
Linux
Ubuntu/Debian
apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
CentOS
yum install -y xorg-x11-server-Xvfb gtk2-devel gtk3-devel libnotify-devel GConf2 nss libXScrnSaver alsa-lib
reference: https://docs.cypress.io/guides/continuous-integration/introduction#Dependencies