Cypress 与 CircleCI 集成
在目前的项目开发中，前端测试是确保应用程序质量和稳定性的不可或缺的一部分，其可以便捷地进行回归测试，减少手动测试成本。Cypress 作为一种强大而直观的前端测试工具，已经成为许多开发团队的首选。其简单的API、实时预览和可靠的测试结果使得 Cypress 成为构建健壮 Web 应用的理想选择。
随着项目规模的增长，将测试整合到持续集成（CI）流程中变得至关重要。目前参与的项目使用的集成工具为 CircleCI，作为一种流行的 CI/CD 解决方案，提供了强大的构建和部署工具，能够帮助开发团队更轻松地管理和执行测试。选择在 CircleCI 上部署 Cypress 项目的决定通常是为了实现快速、自动化且可靠的测试，以确保每次提交都能自动经过验证。
这次在部署 Cypress 项目到 CircleCI 时，我碰到了一些问题，通过查找资料和询问团队伙伴，进行了相应解决。本文将记录自己在部署此项目中的学习内容，分享我在解决过程中的经验，将 Cypress 集成到 CircleCI ，确保项目的前端测试能够持续顺利运行。
前期准备
部署到 CircleCI 前， Cypress 相关的配置文件和测试代码已经纳入源代码管理工具（如 GitHub），团队成员可以共享测试代码。已编写 Cypress 测试用例，Cypress 项目可正常运行，通过相应测试。同时为了能在 CircleCI 上自动部署，需要增加脚本使得可在非交互模式下运行 Cypress 测试。
添加 Cypress 脚本：在 package.json 文件的 scripts 部分，添加 Cypress 相关的脚本。例如：
"scripts": {
"cy:open": "cypress open",
"cy:run": "cypress run"
}
分别用于在交互式模式下运行 Cypress（npm run cy:open）和在非交互式模式下运行 Cypress 测试（npm run cy:run）。
配置 Cypress：根据项目需求，可以配置 Cypress 的一些参数，如登录时的账号信息、浏览器选择、基础URL 等。配置文件通常位于项目根目录下的cypress.json。
完成上述准备工作后，项目就准备好部署 Cypress 测试了。在将项目部署到 CI/CD 环境之前，确保本地运行 Cypress 测试是成功的，以便及早发现并解决潜在的问题。
CircleCI配置文件config.yml
config.yml 是 CircleCI 的配置文件，用于定义项目在 CircleCI 中的构建和部署流程。该文件位于项目的 .circleci 目录下，可查阅 CircleCI 配置参考文档 来进行相关配置。
一开始的 config.yml 配置如下：
version: 2.1
jobs:
run-ui-test-on-projectName:
docker:
- image: circleci/node:10-browsers
steps:
- checkout
- restore_cache:
keys:
- npm-{{ checksum "package.json" }}
- run:
name: Install dependencies
command: npm install
- save_cache:
paths:
- ~/node_modules
key: npm-{{ checksum "package.json" }}
- run:
name: Testing
command: |
export cypress_username=$PROJRCTNAME_USERNAME
export cypress_password=$PROJRCTNAME_PASSWORD
npm run cy:run
- store_artifacts:
path: cypress/screenshots
- store_artifacts:
path: cypress/videos
workflows:
build-and-testing:
jobs:
- run-ui-test-on-projectName
其中：
version: 2.1: 指定使用 CircleCI 配置的版本。
jobs: 定义一个或多个作业，每个作业包含一系列步骤用于执行特定的任务。
run-ui-test-on-projectName: 定义了一个名为 "run-ui-test-on-projectName" 的作业。
docker: 使用circleci/node:10-browsersDocker 镜像，该镜像已经包含了 Node.js 10 和一些常见的浏览器。
checkout: 将项目的代码检出到工作目录。
restore_cache: 恢复缓存，用于加速依赖项的安装。通过检查package.json文件的 checksum 来判断是否需要重新安装依赖项。
command: 要执行的命令。在这里，它是npm install，用于安装项目的依赖项。
save_cache: 缓存依赖项，以便在下次构建时加速依赖项的安装。
command: 在这里，它是npm run cy:run，用于运行 Cypress 测试。| 是一种将多个命令组合在一起的方式，以便它们能够协同工作，并且后一个命令可以使用前一个命令的输出；即两个 export 命令设置了环境变量 cypress_username 和 cypress_password，然后，npm run cy:run 命令使用这些环境变量运行 Cypress 测试。
store_artifacts: 存储测试产生的截图和视频文件。
workflows: 定义一个或多个工作流，用于指定如何运行作业。工作流可以包含多个作业，按照指定的顺序运行。
build-and-testing: 定义了一个名为 "build-and-testing" 的工作流，包含一个作业 "run-ui-test-on-projectName"。
配置文件的主要目标是在 CircleCI 中运行 Cypress 测试，其中涉及到了安装依赖、运行测试和存储测试产生的文件。完成以上配置之后，可以提交代码，等待 CircleCI 自动运行测试。
安装 libnss3
不巧，流水线报错了，查看报错信息：
> cypress run
It looks like this is your first time using Cypress: 13.6.5
Cypress failed to start.
This may be due to a missing library or dependency. https://on.cypress.io/required-dependencies
Please refer to the error below for more details.
----------
/home/circleci/.cache/Cypress/13.6.5/Cypress/Cypress: /usr/lib/x86_64-linux-gnu/libnss3.so: version `NSS_3.30' not found (required by /home/circleci/.cache/Cypress/13.6.5/Cypress/Cypress)
----------
Platform: linux-x64 (Debian - 9.13)
Cypress Version: 13.6.5
该错误是说在构建环境中找不到libnss3库的正确版本，由于缺少版本NSS_3.30，Cypress 无法启动。查询相关资料。libnss3是一个与网络安全相关的库，Cypress 可能依赖它来执行浏览器操作和网络请求。
在 CircleCI 构建环境中，特定版本的系统库可能未安装或不兼容，导致 Cypress 在构建期间无法正常启动，本地可以正常运行的 Cypress 会因为此原因无法在 CircleCI 环境中运行。由于libnss3的版本问题，Cypress 无法找到满足其依赖关系的正确库。
为了解决这个问题，我尝试修改了CircleCI 配置文件。在步骤中添加了安装 libnss 的命令：
- run:
name: Install libnss
command: |
sudo apt update
sudo apt install -y libnss3
另一种解决方法是修改镜像，选择适当的镜像可以确保项目在构建时具有所需的依赖关系和运行时环境，也可以通过 brew 来安装libnss。
镜像与计算机系统关系不大，因为 CircleCI 运行在云端的虚拟环境中。在本地使用的计算机系统（比如 Windows、Mac 或 Linux）并不直接影响 CircleCI 构建中使用的镜像。在 CircleCI 中，选择的镜像主要决定了构建环境的配置。
当然，为了本地开发和测试，可能需要使用类似的镜像或在本地环境中安装相似的依赖项，以确保构建和运行环境的一致性。
在本地及CircleCI上都使用MacOS运行：
macos:
xcode: "12.5.1"
steps:
- checkout
- run:
name: Install nss
command: |
brew update
brew install nss
重新运行了 CircleCI 构建，并验证了部署是否成功。构建成功运行，没有再出现 libnss3 相关的错误。
总结
通过以上调试和修改，解决了在 CircleCI 上部署 Cypress 项目时可能遇到的 libnss3 依赖问题。
