skip to Main Content

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
> [email protected] start
> ng serve --proxy-config proxy.conf.json --port 4222 -o
> [email protected] 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

> [email protected] 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:   cypressintegrationtest_zbertest.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:projectlocationcypressvideostest_zbertest.     (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        -        -        -  

3

Answers


  1. Chosen as BEST ANSWER

    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
    

  2. 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.

    Login or Signup to reply.
  3. 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"
      },
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search