Skip to main content
Cypress应用

在AWS CodeBuild中运行Cypress

info
您将学习到​
  • 如何在AWS CodeBuild中设置Cypress测试
  • 如何缓存依赖项和构建产物
  • 如何在AWS CodeBuild中并行运行Cypress测试
  • 如何将Cypress Cloud与AWS CodeBuild结合使用

基础设置​

以下示例展示了使用AWS CodeBuild在Electron浏览器中运行Cypress测试的基础CI设置和任务。此AWS CodeBuild配置位于buildspec.yml中。

详细文档请参阅AWS CodeBuild文档。

buildspec.yml
version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: latest
    commands:
      # 设置COMMIT_INFO变量以便在录制时将Git信息发送到Cypress Cloud
      # https://docs.cypress.io/app/continuous-integration/overview#Git-information
      - export COMMIT_INFO_BRANCH="$(git rev-parse HEAD | xargs git name-rev |
        cut -d' ' -f2 | sed 's/remotes\/origin\///g')"
      - export COMMIT_INFO_MESSAGE="$(git log -1 --pretty=%B)"
      - export COMMIT_INFO_EMAIL="$(git log -1 --pretty=%ae)"
      - export COMMIT_INFO_AUTHOR="$(git log -1 --pretty=%an)"
      - export COMMIT_INFO_SHA="$(git log -1 --pretty=%H)"
      - export COMMIT_INFO_REMOTE="$(git config --get remote.origin.url)"
      - npm ci
  pre_build:
    commands:
      - npm run cy:verify
      - npm run cy:info
  build:
    commands:
      - npm run start:ci &
      - npx cypress run --record

此buildspec的工作原理：

  • 当代码推送到此仓库时，此任务将启动一个AWS托管的Amazon Linux实例，并安装Node.js以运行配置中commands部分声明的pre_build和build命令。
  • AWS CodeBuild将从我们的GitHub仓库检出代码。
  • 最后，我们的buildspec.yml配置将：
    • 安装npm依赖项
    • 启动项目Web服务器（npm start:ci）
    • 在Electron中运行GitHub仓库中的Cypress测试。
tip
尝试一下

要亲自尝试上述示例，请分叉Cypress Kitchen Sink示例项目，并将上述AWS CodeBuild配置放入buildspec.yml。

使用Cypress Docker镜像测试​

从版本0.2开始，CodeBuild不提供为单个构建配置指定自定义镜像的方法。一种解决方法是使用AWS CodeBuild批量构建列表策略。

启用批量构建​

根据AWS CodeBuild批量构建文档，AWS CodeBuild为批量构建列表策略中的每个可能配置组合创建单独的构建。因此，必须创建或更新AWS CodeBuild项目以运行批量配置。

按照以下步骤为现有的AWS CodeBuild项目启用批量配置：

  • 导航到AWS CodeBuild控制台
  • 选择项目
  • 点击"编辑" --> "批量配置"
  • 创建"新服务角色"并输入角色名称
  • 保留其他选项为可选
  • 点击"更新批量配置"
  • 开始构建

Cypress Amazon公共ECR​

AWS CodeBuild提供了一种构建列表策略，用于为单个作业定义指定不同的作业配置。

构建列表策略提供了一种方法来指定托管在Docker Hub或Amazon Elastic Container Registry (ECR)上的镜像。

用于在本地和CI中运行Cypress的Docker镜像发布到Amazon ECR公共画廊：

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

buildspec.yml
version: 0.2

## AWS CodeBuild批量配置
## https://docs.aws.amazon.com/codebuild/latest/userguide/batch-build-buildspec.html

## 定义使用Cypress Amazon ECR公共画廊中的
## "cypress/browsers:22.15.0"镜像运行的构建
batch:
  fast-fail: false
  build-list:
    - identifier: cypress-e2e-tests
      env:
        image: public.ecr.aws/cypress-io/cypress/browsers:22.15.0

phases:
  install:
    runtime-versions:
      nodejs: latest
    commands:
      # 设置COMMIT_INFO变量以便在录制时将Git信息发送到Cypress Cloud
      # https://docs.cypress.io/app/continuous-integration/overview#Git-information
      - export COMMIT_INFO_BRANCH="$(git rev-parse HEAD | xargs git name-rev |
        cut -d' ' -f2 | sed 's/remotes\/origin\///g')"
      - export COMMIT_INFO_MESSAGE="$(git log -1 --pretty=%B)"
      - export COMMIT_INFO_EMAIL="$(git log -1 --pretty=%ae)"
      - export COMMIT_INFO_AUTHOR="$(git log -1 --pretty=%an)"
      - export COMMIT_INFO_SHA="$(git log -1 --pretty=%H)"
      - export COMMIT_INFO_REMOTE="$(git config --get remote.origin.url)"
      - npm ci
  pre_build:
    commands:
      - npm run cy:verify
      - npm run cy:info
  build:
    commands:
      - npm run start:ci &
      - npx cypress run --record --browser firefox

缓存依赖项和构建产物​

直接使用AWS CodeBuild进行缓存可能具有挑战性。AWS CodeBuild中的构建缓存文档详细介绍了本地或Amazon S3缓存。

根据文档，"本地缓存在构建主机上本地存储缓存，仅对该构建主机可用"。这在并行测试运行期间不会有用。

"Amazon S3缓存在Amazon S3桶中存储缓存，可在多个构建主机之间共享"。虽然这听起来很有用，但实际上上传缓存的依赖项可能需要一些时间。此外，每个工作器都会尝试将其依赖项缓存保存到Amazon S3，这会显著增加构建时间。

超出本指南范围，但AWS CodePipeline可能有助于缓存初始源代码、依赖项和构建输出，以便在使用AWS CodePipeline输入和输出产物的AWS CodeBuild作业中使用。

参考AWS CodePipeline与CodeBuild集成及多输入源和输出产物示例示例，了解如何配置带有输出产物的CodePipeline。

并行化​

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

AWS CodeBuild提供了一种批量构建矩阵策略，用于为单个作业定义声明不同的作业配置。批量构建矩阵策略提供了指定作业容器镜像的选项。在构建矩阵策略中声明的作业可以并行运行，这使我们能够同时运行多个Cypress实例，如本节后面所示。

有关如何启用批量构建的说明，请参阅启用批量构建。

info

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

并行化构建​

要设置多个容器并行运行，build-matrix配置使用一组变量（CY_GROUP_SPEC和WORKERS），其中包含构建中每个组的特定项目列表。

字段由管道（|）字符分隔，如下所示：

## 组名 | 浏览器 | 测试规范 | Cypress配置选项（可选）

'UI-Chrome-Mobile|chrome|cypress/tests/ui/*|viewportWidth=375,viewportHeight=667'

build-matrix将运行所有分隔项目的排列组合。

buildspec.yml
batch:
  fast-fail: false
  build-matrix:
    # ...
    dynamic:
      env:
        # ...
        variables:
          CY_GROUP_SPEC:
            - 'UI-Chrome|chrome|cypress/tests/ui/*'
            - 'UI-Chrome-Mobile|chrome|cypress/tests/ui/*|viewportWidth=375,viewportHeight=667'
            - 'API|chrome|cypress/tests/api/*'
            - 'UI-Firefox|firefox|cypress/tests/ui/*'
            - 'UI-Firefox-Mobile|firefox|cypress/tests/ui/*|viewportWidth=375,viewportHeight=667'

在安装阶段，我们使用shell脚本和cut命令将传递给工作器的分隔CY_GROUP_SPEC中的值分配给shell变量，这些变量将在build阶段运行cypress run时使用。

buildspec.yml
batch:
  # ...

phases:
  install:
    commands:
      # 设置COMMIT_INFO变量以便在录制时将Git信息发送到Cypress Cloud
      # https://docs.cypress.io//app/continuous-integration/overview#Git-information
      - export COMMIT_INFO_BRANCH="$(git rev-parse HEAD | xargs git name-rev |
        cut -d' ' -f2 | sed 's/remotes\/origin\///g')"
      - export COMMIT_INFO_MESSAGE="$(git log -1 --pretty=%B)"
      - export COMMIT_INFO_EMAIL="$(git log -1 --pretty=%ae)"
      - export COMMIT_INFO_AUTHOR="$(git log -1 --pretty=%an)"
      - export COMMIT_INFO_SHA="$(git log -1 --pretty=%H)"
      - export COMMIT_INFO_REMOTE="$(git config --get remote.origin.url)"
      - CY_GROUP=$(echo $CY_GROUP_SPEC | cut -d'|' -f1)
      - CY_BROWSER=$(echo $CY_GROUP_SPEC | cut -d'|' -f2)
      - CY_SPEC=$(echo $CY_GROUP_SPEC | cut -d'|' -f3)
      - CY_CONFIG=$(echo $CY_GROUP_SPEC | cut -d'|' -f4)
      - npm ci
## ...

为了并行化运行，我们需要向构建矩阵策略添加一个额外的变量WORKERS。

buildspec.yml
batch:
  fast-fail: false
  build-matrix:
    # ...
    dynamic:
      env:
        # ...
        variables:
          CY_GROUP_SPEC:
            # ...
          WORKERS:
            - 1
            - 2
            - 3
            - 4
            - 5
info
注意

WORKERS数组填充了填充（或_虚拟_）项目，以在批量构建矩阵策略中配置所需数量的CI机器实例，并将为CY_GROUP_SPEC中定义的每个组提供5个工作器。

最后，脚本变量传递给cypress run的调用。

buildspec.yml
phases:
  install:
    # ...
  build:
    commands:
      - npm start:ci &
      - npx cypress run --record --parallel --browser $CY_BROWSER --ci-build-id
        $CODEBUILD_INITIATOR --group "$CY_GROUP" --spec "$CY_SPEC" --config
        "$CY_CONFIG"

将Cypress Cloud与AWS CodeBuild结合使用​

caution

仪表板分析依赖于您的CI环境可靠地提供提交SHA数据（通常通过环境变量），而这在默认情况下并不总是存在。这对大多数用户来说不是问题，但如果您在与CodeBuild设置集成时遇到问题，请确保按照这些指南正确发送git信息，或者只需查看本页顶部的示例codebuild.yml文件。如果在此之后仍然遇到问题，请联系我们。

在我们在前一节中定义的AWS CodeBuild配置中，我们利用了Cypress Cloud的三个有用功能：

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

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

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

目录