Vue Cypress 和 Gitlab CI/CD

Posted

技术标签:

【中文标题】Vue Cypress 和 Gitlab CI/CD【英文标题】:Vue Cypress and Gitlab CI/CD 【发布时间】:2020-07-03 09:01:03 【问题描述】:

我目前正在尝试使用他们的 CI/CD 平台在 Gitlab 上运行我的 E2E 测试。

我目前的问题是我的开发服务器和 cypress 不能同时运行,以便 E2E 测试可以运行。

这是我当前的.gitlab-ci.yml 文件:

image: node

variables:
  npm_config_cache: "$CI_PROJECT_DIR/.npm"
  CYPRESS_CACHE_FOLDER: "$CI_PROJECT_DIR/cache/Cypress"

cache:
  key: $CI_COMMIT_REF_SLUG
  paths:
    - .npm
    - cache/Cypress
    - node_modules

stages:
  - setup
  - test

setup:
  stage: setup
  image: cypress/base:10
  script:
    - npm ci
    # check Cypress binary path and cached versions
    # useful to make sure we are not carrying around old versions
    - npx cypress cache path
    - npx cypress cache list

cypress:
  stage: test
  image: cypress/base:10
  script:
    # I need to start a dev server here in the background
    - cypress run --record --key <my_key> --parallel
  artifacts:
    when: always
    paths:
      - cypress/videos/**/*.mp4
      - cypress/screenshots/**/*.png
    expire_in: 7 day

【问题讨论】:

【参考方案1】:

在Cypress's official GitHub page 中,有一个example .gitlab-ci.yml 代表running Cypress in continuous integration。 它使用命令npm run start:ci &amp; 在后台运行开发服务器。 因此,您的 .gitlab-ci.yml 可能如下所示:

⋮
cypress:
  image: cypress/base:10
  stage: test
  script:
    - npm run start:ci &      # start the server in the background
    - cypress run --record --key <my_key> --parallel
⋮

【讨论】:

【参考方案2】:

或使用此实用程序启动服务器,等待 URL 响应,然后运行测试并关闭服务器 https://github.com/bahmutov/start-server-and-test

【讨论】:

以上是关于Vue Cypress 和 Gitlab CI/CD的主要内容,如果未能解决你的问题,请参考以下文章

无法使用 Gitlab CI 运行 Cypress 测试

cypress 录制视频在 gitlab-ci 中不起作用

GitLab CI/CD 的使用

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

如何在 cypress 组件测试期间包装 vue 组件?

Cypress Vue 组件测试运行程序 - 测试按钮单击已发出事件