GitLab CI中如何获取带完整CSS的Karate测试summary报告

方法1：让Karate生成内联CSS的自包含报告 #

Karate原生支持生成内联CSS的报告，只需在运行测试时添加系统属性，生成的karate-summary.html会把所有样式直接嵌入文件，无需依赖外部CSS。

在GitLab CI的测试job中，修改测试启动命令，添加-Dkarate.report.inline.css=true参数：

test:
  stage: test
  script:
    - mvn test -Dkarate.report.inline.css=true # Maven项目示例
    # Gradle项目可使用：./gradlew test -Dkarate.report.inline.css=true
  artifacts:
    paths:
      - target/karate-reports/karate-summary.html

生成的HTML为自包含文件，直接下载打开即可显示完整样式。

方法2：用工具将CSS内联到现有HTML #

如果无法修改测试启动参数，可在测试完成后用工具把外部CSS内容插入HTML。以Node.js的inline-source工具为例：

test:
  stage: test
  script:
    - mvn test # 先运行测试生成报告
    - apt-get update && apt-get install -y nodejs npm # 安装Node（根据镜像调整命令）
    - npm install -g inline-source
    - inline-source target/karate-reports/karate-summary.html # 内联CSS资源
  artifacts:
    paths:
      - target/karate-reports/karate-summary.html

处理后的HTML会把karate-report.css的内容嵌入到<style>标签中，单独上传该文件即可正常显示样式。

方法3：用GitLab Pages直接托管报告 #

如果希望无需下载、直接在线查看报告，可将报告部署到GitLab Pages：

test:
  stage: test
  script:
    - mvn test
  artifacts:
    paths:
      - target/karate-reports/

pages:
  stage: deploy
  dependencies:
    - test
  script:
    - mkdir -p public/karate-reports
    - cp -r target/karate-reports/* public/karate-reports/
  artifacts:
    paths:
      - public
  only:
    - main # 指定要部署的分支

部署完成后，通过https://<你的GitLab用户名>.gitlab.io/<项目名>/karate-reports/karate-summary.html即可直接访问带完整样式的报告。

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