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
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
Have you tried passing the
--headless
option tocypress 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.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 :
Do not forget to define the used scripts in package.json :