如何将cypress-mochawesome-reporter集成到GitLab Pages？

一、先解决服务启动的时序问题 #

你当前脚本直接后台启动服务后就执行报告生成，大概率会因为服务未就绪导致测试失败。先添加等待逻辑：

1. 安装wait-on工具：npm install --save-dev wait-on
2. 修改CI脚本，等待服务完全启动：

test:
  image: cypress/browsers:node18.12.0-chrome107
  stage: test
  script:
    - npm ci
    - npm run start:ci &
    - npx wait-on http://localhost:3000 # 替换成你的应用实际端口
    - npm run html-report

二、保存报告为流水线工件 #

让GitLab把生成的HTML报告保存为流水线工件，方便你在流水线结束后下载查看，哪怕测试失败也能拿到报告排查问题：

test:
  image: cypress/browsers:node18.12.0-chrome107
  stage: test
  script:
    - npm ci
    - npm run start:ci &
    - npx wait-on http://localhost:3000
    - npm run html-report
  artifacts:
    paths:
      - cypress/reports/html/
      - cypress/screenshots/ # 可选，同时保存测试失败截图
    when: always # 无论测试成功/失败都保留工件
    expire_in: 7d # 可选，设置7天后自动清理，节省存储空间

三、用GitLab Pages长期展示报告（可选） #

如果需要团队成员随时访问最新的测试报告，可以配置GitLab Pages，把报告部署为静态页面：

1. 新增pages阶段和job：

stages: 
  - test
  - pages

test:
  # 保留上面的test job配置，注意把artifacts的expire_in改长一点，比如30d
  artifacts:
    paths:
      - cypress/reports/html/
    when: always
    expire_in: 30d

pages:
  stage: pages
  dependencies:
    - test # 依赖test job的工件
  script:
    - mkdir public
    - cp -r cypress/reports/html/* public/ # 把报告复制到GitLab Pages要求的public目录
  artifacts:
    paths:
      - public
    expire_in: 1y # 可选，设置1年过期时间

配置完成后，每次流水线跑完，报告可以通过https://<你的GitLab用户名>.gitlab.io/<你的项目名>/访问。

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