Skip to main content
Cypress应用

在GitLab CI中运行Cypress

info
您将学习到​
  • 如何设置GitLab CI/CD来运行Cypress测试
  • 如何缓存依赖项和构建产物
  • 如何使用GitLab CI/CD并行化Cypress测试
  • 如何在GitLab CI/CD中使用Cypress Cloud

GitLab通过其托管的 CI/CD服务， 为开发者提供了"一个内置在GitLab中的工具，用于通过持续方法论进行软件开发"。

详细文档可在 GitLab CI/CD文档中找到。

基础设置​

以下示例是使用 GitLab CI/CD 在Electron浏览器中运行Cypress测试的基本CI设置和任务。此GitLab CI配置位于.gitlab-ci.yml中。

stages:
  - test

test:
  image: node:latest
  stage: test
  script:
    # 安装依赖
    - npm ci
    # 在后台启动服务器
    - npm start &
    # 运行Cypress测试
    - npm run e2e

此配置的工作原理：

  • 当代码推送到此仓库时，此任务将配置并启动GitLab托管的Linux实例，用于运行在test任务部分中声明的stages脚本。
  • 代码从GitLab仓库中检出。
  • 最后，我们的脚本将：
    • 安装npm依赖
    • 启动项目Web服务器（npm start）
    • 在GitLab仓库中使用Electron运行Cypress测试。

使用Cypress Docker镜像测试​

Cypress团队维护了官方的 Docker镜像， 用于在本地和CI中运行Cypress测试，这些镜像内置了Google Chrome、Mozilla Firefox和Microsoft Edge。 例如，这允许我们通过向cypress run传递--browser firefox属性来在Firefox中运行测试。

stages:
  - test

test:
  image: cypress/browsers:22.15.0
  stage: test
  script:
    # 安装依赖
    - npm ci
    # 在后台启动服务器
    - npm start &
    # 运行Cypress测试
    - npx cypress run --browser firefox

缓存依赖项和构建产物​

可以通过cache配置实现依赖项和构建产物的缓存。 缓存文档包含了跨多种工作流缓存依赖项和构建产物的所有选项。 任务的产物可以通过提供路径和可选的过期时间来定义。

stages:
  - test

cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - node_modules/
    - .npm/

test:
  image: cypress/browsers:22.15.0
  stage: test
  script:
    # 安装依赖
    - npm ci
    # 在后台启动服务器
    - npm start &
    # 运行Cypress测试
    - npx cypress run --browser firefox
  artifacts:
    when: always
    paths:
      - cypress/videos/**/*.mp4
      - cypress/screenshots/**/*.png
    expire_in: 1 day

并行化​

Cypress Cloud提供了 并行化和分组测试运行的能力， 以及Cypress测试的额外洞察和分析。

在任务配置中添加 parallel属性将允许我们同时运行多个Cypress实例， 如本节稍后将看到的那样。

在深入并行化设置示例之前，重要的是理解我们将声明的两种不同类型的任务：

  • 安装任务：安装并缓存后续任务将在GitLab CI工作流中使用的依赖项的任务。
  • 工作器任务：处理Cypress测试执行并依赖于_安装任务_的任务。

安装任务​

将安装与测试运行分离在运行并行任务时是必要的。它允许通过缓存辅助重用各种构建步骤。

首先，我们将定义build阶段以及cache和与缓存相关的变量。

然后我们定义将被工作器任务使用的install步骤，并将其分配给build阶段。

stages:
  - build

## 为"cache"任务设置中的文件夹设置环境变量
## 用于npm模块和Cypress二进制文件
variables:
  npm_config_cache: '$CI_PROJECT_DIR/.npm'
  CYPRESS_CACHE_FOLDER: '$CI_PROJECT_DIR/cache/Cypress'

cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - cache/Cypress
    - node_modules
    - build

## 安装npm依赖和Cypress
install:
  image: cypress/browsers:22.15.0
  stage: build
  script:
    - npm ci

工作器任务​

接下来，我们添加一个test阶段，并定义一个名为ui-chrome-tests的工作器任务， 该任务将在test阶段并行运行带有Chrome的Cypress测试。

在任务配置中添加 parallel属性将允许我们同时运行多个Cypress实例。

info

以下配置使用--parallel和--record标志到 cypress run需要设置将测试结果记录到 Cypress Cloud。

stages:
  - build
  - test

## 为"cache"任务设置中的文件夹设置环境变量
## 用于npm模块和Cypress二进制文件
variables:
  npm_config_cache: '$CI_PROJECT_DIR/.npm'
  CYPRESS_CACHE_FOLDER: '$CI_PROJECT_DIR/cache/Cypress'

cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - .cache/*
    - cache/Cypress
    - node_modules
    - build

## 安装npm依赖和Cypress
install:
  image: cypress/browsers:22.15.0
  stage: build
  script:
    - npm ci

ui-chrome-tests:
  image: cypress/browsers:22.15.0
  stage: test
  parallel: 5
  script:
    # 安装依赖
    - npm ci
    # 在后台启动服务器
    - npm start &
    # 并行运行Cypress测试
    - npx cypress run --record --parallel --browser chrome --group UI-Chrome

在GitLab CI/CD中使用Cypress Cloud​

在上一节定义的GitLab CI配置中，我们利用了 Cypress Cloud的三个有用功能：

  1. 使用--record标志将测试结果记录到Cypress Cloud

  2. 通过--parallel标志实现测试并行运行，并借助智能负载均衡跨CI机器优化测试规范执行

  3. 通过标签分组将多个cypress run调用组织合并为Cypress Cloud中的单一报告。如上例所示，我们使用--group UI-Chrome标志将所有Chrome浏览器的UI测试组织到Cypress Cloud报告中标记为"UI-Chrome"的组内。

目录