Skip to main content
Cypress应用

在Bitbucket Pipelines中运行Cypress

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

基础设置​

详细文档请参考 Bitbucket Pipelines文档。

Bitbucket大多数构建都在Docker容器中运行，如Docker镜像选项所述。

如果您使用Bitbucket Cloud文档"默认构建环境"中列出的当前可用的默认Bitbucket/Atlassian Linux镜像 使用Docker镜像作为构建环境，则必须额外安装Cypress Linux先决条件。

为了简化设置，请使用Cypress Docker镜像，如下一节所述。

使用Cypress Docker镜像进行测试​

Cypress团队维护官方 Docker镜像用于在 本地和CI中运行Cypress，部分镜像包含Chrome、Firefox和Edge。例如，这允许我们通过向cypress run传递--browser firefox属性在Firefox中运行测试。

阅读Cypress Docker变体以决定哪种镜像最适合您的项目。

bitbucket-pipelines.yml
image: cypress/browsers:22.15.0

pipelines:
  default:
    - step:
        script:
          # 安装依赖
          - npm ci
          # 在后台启动服务器
          - npm run start &
          # 在Firefox中运行Cypress测试
          - npx cypress run --browser firefox

这个bitbucket-pipelines.yml的工作原理：

  • 当_推送_到此仓库时，此作业将使用Cypress Docker镜像配置并启动Bitbucket Pipelines。它将运行配置文件中pipelines部分定义的管道。
  • 代码从Bitbucket仓库检出。
  • 最后，我们的脚本将：
    • 安装npm依赖
    • 启动项目Web服务器（npm start）
    • 在Bitbucket仓库中使用Firefox运行Cypress测试

缓存依赖项和构建产物​

根据 缓存文档， Bitbucket提供了跨多种工作流缓存依赖项和构建产物的选项。

要缓存node_modules和npm缓存跨构建，添加了cache属性和配置如下。

作业的产物可以通过向artifacts属性提供路径来定义。

bitbucket-pipelines.yml
image: cypress/browsers:22.15.0

pipelines:
  default:
    - step:
        caches:
          - node
        script:
          # 安装依赖
          - npm ci
          # 在后台启动服务器
          - npm run start &
          # 在Firefox中运行Cypress测试
          - npx cypress run --browser firefox
        artifacts:
          # 将生成的图片和视频存储为产物
          - cypress/screenshots/**
          - cypress/videos/**

使用 定义 块我们可以为npm和Cypress定义额外的缓存。

bitbucket-pipelines.yml
definitions:
  caches:
    npm: $HOME/.npm
    cypress: $HOME/.cache/Cypress

并行化​

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

在深入并行化设置示例之前，了解我们将声明的两种不同类型的作业很重要：

  • 安装作业：安装并缓存依赖项的作业，这些依赖项将在Bitbucket Pipelines工作流的后续作业中使用。
  • 工作作业：处理Cypress测试执行的作业，依赖于_安装作业_。

安装作业​

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

首先，我们使用 YAML锚点， &e2e将管道分解为可重用的配置块。这将由工作作业使用。

info

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

bitbucket-pipelines.yml
image: cypress/base:22.15.0

## 并行运行E2E测试的作业定义
e2e: &e2e
  name: E2E测试
  caches:
    - node
    - cypress
  script:
    - npm run start &
    - npm run e2e:record -- --parallel --group UI-Chrome --ci-build-id $BITBUCKET_BUILD_NUMBER
  artifacts:
    # 将生成的图片和视频存储为产物
    - cypress/screenshots/**
    - cypress/videos/**

工作作业​

接下来，pipelines下的工作作业将并行运行带有Chrome的Cypress测试。

我们可以在管道定义中使用e2e YAML锚点 使用parallel属性执行并行作业。这将允许我们同时运行多个Cypress实例。

bitbucket-pipelines.yml
## 并行运行E2E测试的作业定义
## ...

pipelines:
  default:
    - step:
        name: 安装依赖
        caches:
          - npm
          - cypress
          - node
        script:
          - npm ci
    - parallel:
      # 并行运行N个步骤
      - step:
          <<: *e2e
      - step:
          <<: *e2e
      - step:
          <<: *e2e
definitions:
  caches:
    npm: $HOME/.npm
    cypress: $HOME/.cache/Cypress

完整的bitbucket-pipelines.yml如下：

bitbucket-pipelines.yml
image: cypress/base:22.15.0

## 并行运行E2E测试的作业定义
e2e: &e2e
  name: E2E测试
  caches:
    - node
    - cypress
  script:
    - npm run start &
    - npm run e2e:record -- --parallel --group UI-Chrome --ci-build-id $BITBUCKET_BUILD_NUMBER
  artifacts:
    # 将生成的图片和视频存储为产物
    - cypress/screenshots/**
    - cypress/videos/**

pipelines:
  default:
    - step:
        name: 安装依赖
        caches:
          - npm
          - cypress
          - node
        script:
          - npm ci
    - parallel:
        # 并行运行N个步骤
        - step:
            <<: *e2e
        - step:
            <<: *e2e
        - step:
            <<: *e2e
definitions:
  caches:
    npm: $HOME/.npm
    cypress: $HOME/.cache/Cypress

在Bitbucket Pipelines中使用Cypress Cloud​

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

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

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

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

目录