ng-cli-e2e with Cypress ends in timeout on Gitlab

[Linutux]

I'm using ng-cli-e2e in version 14.2.3 with Cypress and it fails with a timeout when running a CI job in Gitlab:

Gitlab CI Runner Logfile:

Running with gitlab-runner 15.3.0 (bbcb5aba)
  on b071ad009b1d G7wiHR6B
Preparing the "docker" executor 00:12
Using Docker executor with image trion/ng-cli-e2e:14.2.3 ...
Pulling docker image trion/ng-cli-e2e:14.2.3 ...
Using docker image sha256:214c55005e4a52b5a7e3b3ab9b1873e8148c8a62fa7622988a3176be4a4a7be8 for trion/ng-cli-e2e:14.2.3 with digest trion/ng-cli-e2e@sha256:3ee85941251bddcddc9902b7bcb849a0b7cc107eca76d474917b82a7f9107fb9 ...
Preparing environment 00:01
Running on runner-g7wihr6b-project-8-concurrent-0 via 37574714b23c...
Getting source from Git repository 00:08
$ rm -f /builds/*/*/.git/shallow.lock
Fetching changes with git depth set to 20...
Reinitialized existing Git repository in /builds/frontend/web/.git/
Checking out 205f85ec as main...
Removing dist/
Removing node_modules/
Skipping Git submodules setup
Downloading artifacts 00:02
Downloading artifacts for build (550)...
Downloading artifacts from coordinator... ok        id=550 responseStatus=200 OK token=29LmYZXn
Executing "step_script" stage of the job script
Using docker image sha256:214c55005e4a52b5a7e3b3ab9b1873e8148c8a62fa7622988a3176be4a4a7be8 for trion/ng-cli-e2e:14.2.3 with digest trion/ng-cli-e2e@sha256:3ee85941251bddcddc9902b7bcb849a0b7cc107eca76d474917b82a7f9107fb9 ...
$ npm ci
added 1232 packages, and audited 1233 packages in 48s
168 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities
$ ng e2e
Passing watch mode to DevServer - watch mode is true
- Generating browser application bundles (phase: setup)...
🌼 daisyUI components 2.28.0  https://github.com/saadeghi/daisyui
  ✔︎ Including:  base, components, themes[1], utilities
  
🌼 daisyUI components 2.28.0  https://github.com/saadeghi/daisyui
  ✔︎ Including:  base, components, themes[1], utilities
  
✔ Browser application bundle generation complete.
Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   2.10 MB |
polyfills.js          | polyfills     | 319.56 kB |
styles.css, styles.js | styles        | 235.69 kB |
main.js               | main          |  64.49 kB |
runtime.js            | runtime       |   6.52 kB |
| Initial Total |   2.71 MB
Build at: 2022-09-21T12:08:25.109Z - Hash: e9f8b6e50da9d093 - Time: 27251ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
✔ Compiled successfully.
It looks like this is your first time using Cypress: 10.8.0
[STARTED] Task without title.
[SUCCESS] Task without title.
Opening Cypress...
[483:0921/120838.039416:ERROR:gpu_memory_buffer_support_x11.cc(44)] dri3 extension not supported.
ERROR: Job failed: execution took longer than 1h0m0s seconds

.gitlab-ci:

build:
 stage: build
 image: trion/ng-cli
 before_script:
  - npm ci
 script:
  - ng build 
  # was: - ng build --prod
 artifacts:
  expire_in: 1 day
  paths:
   - dist/
# tags:
#  - docker

variables:
  CLI_VERSION: 14.2.3

test:karma:
  stage: test
  image: trion/ng-cli-karma:${CLI_VERSION}
  allow_failure: false
  before_script:
   - npm ci
  script:
   - ng test --progress false --watch false
#  tags:
#  - docker

test:e2e:
  stage: test
  image: trion/ng-cli-e2e:${CLI_VERSION}
  allow_failure: false
  before_script:
   - npm ci
  script:
   - ng e2e
#  tags:
#  - docker

test:coverage:
  stage: test
  image: trion/ng-cli-karma
  allow_failure: false
  before_script:
   - npm ci
  script:
   - ng test --code-coverage --progress false --watch false
  #coverage: '/Lines \W+: (\d+\.\d+)%.*/'
  coverage: '/^Statements *: (\d+\.\d+%)/'
  artifacts:
    paths:
      - coverage/
#  tags:
#   - docker

test:nglint:
  stage: test
  image: trion/ng-cli:${CLI_VERSION}
  before_script:
   - npm ci
  script:
   - ng lint
#  tags:
#  - docker  

push-gitlab-docker-registry:
  image: docker:latest
  stage: deploy
  only:
    - main
  script:
    - docker build -t registry.git.mydomain.de/username/project .
    - docker login -u username -p $CI_BUILD_TOKEN registry.git.mydomain.de
    - docker push registry.git.mydomain.de/username/project

push-docker-registry:
  image: docker:latest
  stage: deploy
  only:
    - master
  script:
    - docker build -t username/project .
    - docker login -u username -p $DOCKER_HUB_BUILD_TOKEN
    - docker push username/project

Can you see any reason why it fails?

[everflux]

Could you try to not use the embedded cypress browser but to use chrome?

[Linutux]

Could you try to not use the embedded cypress browser but to use chrome?

I'm new to e2e with Angular. How do I do that?

[jcconnell]

We had a similar issue. Changing the browser from ChromeHeadless to Chrome resolved the issue.

See: https://github.com/trion-development/docker-ng-cli-karma/issues/14

[everflux]

I think this is solved.