alacrity/circleci-cypress

镜像概述

本镜像是基于circleci/node基础镜像构建的Cypress专用镜像，预集成了Cypress前端测试工具及相关依赖。Cypress是一款现代化前端测试框架，支持端到端测试、组件测试等多种测试类型，而基于circleci/node的构建确保了镜像与CI/CD环境的良好兼容性，可直接用于自动化测试流程。

核心功能和特性

• 集成Cypress测试工具：包含Cypress完整功能，支持端到端测试（E2E）、组件测试、API测试等多种测试场景
• 基于circleci/node环境：预安装Node.js环境，兼容CircleCI等CI/CD平台，减少环境配置成本
• 测试辅助功能：支持时间旅行调试、实时重载、自动等待机制，提升测试效率
• 跨浏览器支持：可配置运行在Chrome、Electron等浏览器环境（需对应浏览器依赖）
• 轻量级集成：保留circleci/node镜像的基础特性，如用户权限配置、环境变量支持等

使用场景

• 前端项目CI/CD流程：在GitHub Actions、GitLab CI、CircleCI等平台中执行自动化测试
• 本地开发测试：快速启动测试环境，无需手动安装Cypress及依赖
• 前端组件库测试：对React、Vue等框架的组件进行自动化测试验证
• 回归测试自动化：定期执行测试用例，确保代码变更不引入新问题

使用方法和配置说明### 基础使用（docker run）

通过以下命令启动容器并运行测试：

bash
docker run --rm -v $(pwd):/app -w /app cypress-circleci-node cypress run

参数说明：

• -v $(pwd):/app：将本地项目目录挂载到容器内/app目录（需包含Cypress测试文件）
• -w /app：设置工作目录为/app
• cypress run：执行Cypress测试命令（默认运行所有测试用例）

指定测试文件或配置

运行特定测试文件：

bash
docker run --rm -v $(pwd):/app -w /app cypress-circleci-node cypress run --spec "cypress/e2e/example.cy.js"

指定测试环境配置文件：

bash
docker run --rm -v $(pwd):/app -w /app cypress-circleci-node cypress run --config-file cypress.config.js

环境变量配置

通过-e参数传递环境变量，如设置测试基础URL：

bash
docker run --rm -v $(pwd):/app -w /app -e CYPRESS_BASE_URL=https://example.com cypress-circleci-node cypress run

常用环境变量：

• CYPRESS_BASE_URL：测试目标应用的基础URL
• CYPRESS_VIDEO：是否录制测试视频（true/false，默认true）
• CYPRESS_SCREENSHOTS_FOLDER：截图保存路径（默认cypress/screenshots）
• CYPRESS_VIDEO_FOLDER：视频保存路径（默认cypress/videos）

持久化测试结果

挂载本地目录保存测试报告、截图和视频：

bash
docker run --rm \
  -v $(pwd):/app \
  -v $(pwd)/cypress/reports:/app/cypress/reports \
  -v $(pwd)/cypress/screenshots:/app/cypress/screenshots \
  -v $(pwd)/cypress/videos:/app/cypress/videos \
  -w /app \
  cypress-circleci-node \
  cypress run --reporter mochawesome

CI/CD集成示例（CircleCI配置）

在.circleci/config.yml中使用该镜像：

yaml
version: 2.1
jobs:
  test:
    docker:
      - image: cypress-circleci-node
    steps:
      - checkout
      - run: npm install  # 安装项目依赖（如测试相关包）
      - run: cypress run  # 执行Cypress测试
      - store_artifacts:  # 保存测试报告和视频
          path: cypress/videos
      - store_artifacts:
          path: cypress/screenshots