Cypress/GitLab CI/CD integration - Cypress won't start in headless mode

Question

After writing several tests in Cypress and trying them out locally in both headless and headed way (both work great) I can't get our GitLab to start up Cypress in headless way after inserting the test in the integration process. This seems to be an issue: [FAILED] Your system is missing the dependency: Xvfb Why would I need Xvfb for running headless test in Cypress? I'm stuck on this for two days now, any help or idea would be greatly appreciated.

test config in .gitlab-ci.yml:

test:
  image: node:latest
  stage: test
  script:
    - npm ci
    - npm start &
    - npm test

relevant lines from package.json:

"start": "ng serve --proxy-config proxy.conf.json --port 4222 -o"
"test": "cypress run --spec cypress/integration/test_zber/test.spec.js"

gitlab output when trying to run the test after successfully going through npm ci

$ npm start &
$ npm test
> sdcl@0.1.30 start
> ng serve --proxy-config proxy.conf.json --port 4222 -o
> sdcl@0.1.30 test
> cypress run --spec cypress/integration/test_zber/test.spec.js
It looks like this is your first time using Cypress: 8.6.0
[STARTED] Task without title.
[FAILED] Your system is missing the dependency: Xvfb
[FAILED] 
[FAILED] Install Xvfb and run Cypress again.
[FAILED] 
[FAILED] Read our documentation on dependencies for more information:
[FAILED] 
[FAILED] https://on.cypress.io/required-dependencies
[FAILED] 
[FAILED] If you are using Docker, we provide containers with all required dependencies installed.
[FAILED] 
[FAILED] ----------
[FAILED] 
[FAILED] Error: spawn Xvfb ENOENT
[FAILED] 
[FAILED] ----------
[FAILED] 
[FAILED] Platform: linux (Debian - 10.11)
[FAILED] Cypress Version: 8.6.0
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 - 10.11)
Cypress Version: 8.6.0
Warning: Entry point 'ng2-ace-editor' contains deep imports into '/builds/D7tLJUkz/0/uvz/evz/sdc/sdcl-fe/node_modules/brace/theme/monokai'. This is probably not a problem, but may cause the compilation of entry points to be out of order.

console output when running this locally:

PS C:\projectlocation> npm test

> sdcl@0.1.30 test C:\projectlocation
> cypress run --spec cypress/integration/test_zber/test.spec.js


[10644:1014/090627.480:ERROR:display_layout.cc(559)] PlacementList must be sorted by first 8 bits of display_id

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:    8.6.0                                                                              │
  │ Browser:    Electron 93 (headless)                                                             │
  │ Specs:      1 found (test_zber/test.spec.js)                                                   │
  │ Searched:   cypress\integration\test_zber\test.spec.js                                         │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  test_zber/test.spec.js                                                          (1 of 1)


  simple_statement_test
    √ test1 (3090ms)
    √ test2 (4969ms)
    √ test3 (882ms)
    √ test4 (2489ms)
    √ test5 (503ms)


  5 passing (14s)


  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        5                                                                                │
  │ Passing:      5                                                                                │
  │ Failing:      0                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     13 seconds                                                                       │
  │ Spec Ran:     test_zber/test.spec.js                                                           │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


  (Video)

  -  Started processing:  Compressing to 32 CRF
  -  Finished processing: C:\projectlocation\cypress\videos\test_zber\test.     (1 second)
                          spec.js.mp4


====================================================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped  
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ √  test_zber/test.spec.js                   00:13        5        5        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    √  All specs passed!                        00:13        5        5        -        -        -  

Answer 1

I was using cypress to test a nextJS (React) application. For me the docker image in the cypress guide did not work, because nextJS requires a newer version of node. If you go to this GitHub repository you can find many more usefull docker images.

In the end this worked form me:

In .gitlab-ci.yml :

image: cypress/browsers:node14.16.0-chrome89-ff86

stages:
  - test

test:
  stage: test
  script:
    # install dependencies
    - npm ci
    # start the server in the background
    - npm run start:ci &
    # run Cypress tests
    - npm run test:ci

Do not forget to define the used scripts in package.json :

{
  "scripts": {
    "start:ci": "next dev",
    "test:ci": "cypress run"
  },
}

Answer 2

Solution was to use docker image provided by Cypress guide at https://docs.cypress.io/guides/continuous-integration/gitlab-ci#Testing-in-Chrome-and-Firefox-with-Cypress-Docker-Images

Config in .gitlab.ci.yml

test:
  image: cypress/browsers:node12.14.1-chrome85-ff81
  stage: test
  script:
    # install dependencies
    - npm ci
    # start the server in the background
    - npm start &
    # run Cypress tests
    - npx cypress run --browser chrome

Answer 3

Have you tried passing the --headless option to cypress run command? I don't see it in the question, but it does seem as a solution based on some other questions asked here on SO, e.g. this one. You can find this option in documentation here.

Another solution could be to use an official Cypress Docker image or installing the Xvfb package before running Cypress.