如何在后台运行yarn serve 用于GitLab CI的Cypress e2e测试

Yarn 对应后台启动服务的实现方案 #

直接替换npm命令为yarn对应指令即可，后台运行的&是shell通用语法，和包管理工具无关。

最简替换写法 #

对应官方示例的npm写法，yarn版本如下：

# 后台启动Vue服务（对应你要的yarn serve效果）
- yarn serve &
# 运行Cypress测试，两种写法均可
# 写法1：用yarn调用本地依赖
- yarn cypress run --browser firefox
# 写法2：保留npx写法也可正常运行
# - npx cypress run --browser firefox

优化配置（避免服务未启动就执行测试） #

直接后台启动后立即跑测试大概率会失败，因为服务启动需要时间，建议增加端口等待逻辑，示例如下：

# 后台启动服务同时等待端口可访问
- yarn serve & npx wait-on http://localhost:8080
# 再执行Cypress测试
- yarn cypress run --browser firefox

完整GitLab CI 配置示例 #

你的.gitlab-ci.yml中Cypress测试Job可以参考以下配置：

e2e-test:
  # 使用Cypress官方预装好浏览器的镜像，省去环境配置步骤
  image: cypress/browsers:node-20.14.0-chrome-126.0.6478.114-1-ff-127.0.1
  script:
    # 安装项目依赖
    - yarn install --frozen-lockfile
    # 后台启动Vue服务，等待8080端口就绪
    - yarn serve & npx wait-on http://localhost:8080
    # 跑火狐浏览器下的e2e测试
    - yarn cypress run --browser firefox
  artifacts:
    # 测试失败时保留Cypress的截图和录像方便排查
    when: on_failure
    paths:
      - cypress/screenshots/
      - cypress/videos/

注意事项 #

• 如果你的Vue项目启动命令不是serve，替换为你package.json中scripts字段对应的实际命令即可
• CI环境更推荐提前构建静态资源，用静态服务启动测试，速度更快更稳定，写法参考：yarn build && npx serve -s dist -p 8080 & npx wait-on http://localhost:8080
• 若你的服务启动后访问地址不是http://localhost:8080，修改wait-on后的地址为实际地址即可

内容的提问来源于stack exchange，提问作者mammad