正文 

当前位置： 首页 > 源码 >

Vue Cypress 和 Gitlab CI/CD

     2023-02-19     53

关键词：

【中文标题】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

【讨论】：

无法使用 Gitlab CI 运行 Cypress 测试

】无法使用GitlabCI运行Cypress测试【英文标题】：UnabletorunCypressTestwithGitlabCI【发布时间】：2020-12-0422:29:39【问题描述】：我正在将CypressTest与GitlabCI集成。但是当我运行管道时，我想出了这些问题。请找到下面的屏幕截图，并帮助... 查看详情

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

】cypress录制视频在gitlab-ci中不起作用【英文标题】：cypressrecordvideodidnotworkingitlab-ci【发布时间】：2021-09-0709:44:39【问题描述】：自从将我们的测试从bitbucket迁移到gitlab后，在管道中的运行过程中不再录制视频。有没有人遇到过... 查看详情

什么是特殊的 gitlab-ci-token 用户？

】什么是特殊的gitlab-ci-token用户？【英文标题】：Whatisthespecialgitlab-ci-tokenuser?【发布时间】：2016-09-2421:13:56【问题描述】：gitlab容器注册表(https://gitlab.com/help/container_registry/README.md)的文档提供了一个配置示例，其中包含以下说明... 查看详情

动态创建环境并并行运行 Cypress

】动态创建环境并并行运行Cypress【英文标题】：DynamiccreateenvironmentandrunCypressparallel【发布时间】：2022-01-0120:21:06【问题描述】：我们正在使用Cypress在GitLab中运行我们的end-2-end-tests。在我们运行测试之前，我们创建一个动态环境... 查看详情

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

...CI/CD集成-赛普拉斯不会在无头模式下启动【英文标题】：Cypress/GitLabCI/CDintegration-Cypresswon\'tstartinheadlessmode【发布时间】：2021-12-0214:22:25【问题描述】：在Cypress中编写了几个测试并以无头和有头方式在本地尝试它们（两者都工作... 查看详情

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

】如何在cypress组件测试期间包装vue组件？【英文标题】：HowcanIwrapavuecomponentduringcypresscomponenttesting?【发布时间】：2021-11-0121:33:09【问题描述】：我正在使用componenttestinginCypressonVue。我的项目组件使用vuetifyplugin。目前，已测试的... 查看详情

cypress初探(代码片段)

cypress是啥，cypress的初衷是创造一个友好的体验，用于web端的e2e测试。换一句话说就是，书写测试用例，然后ui自动化测试，详情请查看官网项目搭建使用vite来搭建一个vue的项目，在里面使用cypress来进行e2e... 查看详情

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

】CypressVue组件测试运行程序-测试按钮单击已发出事件【英文标题】：CypressVueComponentTestRunner-testingabuttonclickhasemittedanevent【发布时间】：2022-01-0916:03:25【问题描述】：我无法确定如何对Vue组件进行简单测试（使用Cypress组件测试运... 查看详情

如何在本地运行 Vue.js 应用程序并使用 npm 脚本按顺序运行 Cypress 测试

】如何在本地运行Vue.js应用程序并使用npm脚本按顺序运行Cypress测试【英文标题】：HowtorunVue.jsapplocally&runCypresstestsagainstitsequentiallyusingnpmscript【发布时间】：2022-01-1721:37:26【问题描述】：我正在尝试在本地运行Vue.js应用程序(loc... 查看详情

带有 python 测试的 Vue Cypress 代码覆盖率报告

】带有python测试的VueCypress代码覆盖率报告【英文标题】：VueCypresscodecoveragereportwithpythontests【发布时间】：2021-07-2316:10:34【问题描述】：我使用Selenium进行Python测试来测试我的Vue网页。我想获得这些测试的代码覆盖率结果。我已... 查看详情

我们如何整合 Owasp ZAP 和 Cypress？

】我们如何整合OwaspZAP和Cypress？【英文标题】：HowcanweintegrateOwaspZAP&Cypress?【发布时间】：2020-09-2115:27:58【问题描述】：有什么方法可以将OwaspZap安全测试工具与Cypress集成？【问题讨论】：启动Zap，然后为Cypress配置代理。查看... 查看详情

配置 Cypress、cypress-react-unit-test 和 React

】配置Cypress、cypress-react-unit-test和React【英文标题】：ConfiguringCypress,cypress-react-unit-test,andReact【发布时间】：2019-09-0802:23:19【问题描述】：我想使用cypress-react-unit-test包独立测试我们的React组件。几天后，我无法让它与现有的ReactW... 查看详情

cypress系列-cypress编写和组织测试用例篇之.skip()和.only()的详细使用

如果想从头学起Cypress，可以看下面的系列文章哦https://www.cnblogs.com/poloyy/category/1768839.html 前言在做自动化测试中，跳过执行某些测试用例，或只运行某些指定的测试用例，这种情况是很常见的Cypress中也提供了这种功能 跳... 查看详情

cypress系列-cypress编写和组织测试用例篇之mocha的介绍

如果想从头学起Cypress，可以看下面的系列文章哦https://www.cnblogs.com/poloyy/category/1768839.html 前言Cypress底层依赖于很多优秀的开源测试框架，其中就有MochaMocha是一个适用于Node.js和浏览器的测试框架，它使得异步测试变得简单&nbs... 查看详情

cypress系列（12）-cypress编写和组织测试用例篇之断言(代码片段)

如果想从头学起Cypress，可以看下面的系列文章哦https://www.cnblogs.com/poloyy/category/1768839.html 前言断言是测试用例的必要组成部分没有断言，咱们就不知道测试用例的有效性，到底通过没通过Cypress的断言基于Chai断言库，并且增... 查看详情

Cypress 组件测试、ReactJS 和 TailwindCSS

】Cypress组件测试、ReactJS和TailwindCSS【英文标题】：CypressComponentTesting,ReactJS,andTailwindCSS【发布时间】：2021-10-1722:14:36【问题描述】：有谁知道如何从测试文件中加载TailwindCSS？我尝试使用我在VueJS上使用的相同方法，导入css文件，... 查看详情

Cypress：使用 module.exports 导出和导入类

】Cypress：使用module.exports导出和导入类【英文标题】：Cypress:exportandimportclasseswithmodule.exports【发布时间】：2021-05-1900:50:54【问题描述】：您好，如何使用模块导出将类导出和导入到测试中？这就是我使用module.exports导出的方式modu... 查看详情

cypress系列-cypress编写和组织测试用例篇之钩子函数hook

如果想从头学起Cypress，可以看下面的系列文章哦https://www.cnblogs.com/poloyy/category/1768839.html Hook就是常说的钩子函数，在 pytest框架里面也有hook这个概念；接下来就让我们来看看Mocha提供的Hook函数叭！ Mocha提供的Hook函数&n... 查看详情