赛普拉斯/GitLab CI/CD 集成 - 赛普拉斯不会在无头模式下启动

Question

在 Cypress 中编写了几个测试并以无头和有头方式在本地尝试它们（两者都工作得很好）之后，在集成过程中插入测试后，我无法让我们的 GitLab 以无头方式启动 Cypress。这似乎是一个问题： [FAILED] Your system is missing the dependency: Xvfb 为什么我需要 Xvfb 在 Cypress 中运行无头测试？我已经坚持了两天了，任何帮助或想法将不胜感激。

.gitlab-ci.yml 中的测试配置：

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

package.json 中的相关行：

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

成功通过npm ci后尝试运行测试时的gitlab输出

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

在本地运行时的控制台输出：

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

解决方案是使用赛普拉斯指南 https://docs.cypress.io/guides/continuous-integration/gitlab-ci#Testing-in-Chrome-and-Firefox-with-Cypress-Docker-Images 提供的 docker 映像

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

您是否尝试过将--headless 选项传递给cypress run 命令？我在问题中没有看到它，但它似乎是基于 SO 上提出的其他一些问题的解决方案，例如这个one。您可以在文档 here 中找到此选项。

另一种解决方案是使用官方赛普拉斯 Docker 映像或在运行赛普拉斯之前安装 Xvfb 包。

Answer 3

我正在使用 cypress 测试 nextJS (React) 应用程序。对我来说，cypress 指南中的 docker 镜像不起作用，因为 nextJS 需要更新版本的 node。如果你去this GitHub 仓库，你可以找到更多有用的 docker 镜像。

最后这对我有用：

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

不要忘记在 package.json 中定义使用的脚本：

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