gitlab ci 用 cypress/playwright 做测试并展示结果至 mr

前言

看了一下官方的教程好像都没有讲怎么将测试结果展示出来，只是给出测试的 ci 脚本，但根据 gitlab 官方的文档是有测试报告的展示的，所以这里给出一个基于 junit 测试报告的展示。

前期准备

• 安装 cypress/playwright 在项目中

.gitlab-ci.yaml

stages:
  - test

# playwright 测试
playwright-test:
  stage: test
  variables:
    GIT_STRATEGY: clone
    GIT_DEPTH: 0
    # 输出的 junit 测试报告的路径
    PLAYWRIGHT_JUNIT_OUTPUT_NAME: test-results.xml
  rules:
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
    - if: $CI_COMMIT_TAG
  before_script:
    - corepack enable
    - corepack prepare pnpm@latest --activate
    - pnpm config set store-dir .pnpm-store
  image: node:16.17.0-bullseye-slim
  script:
    - pnpm i
    - pnpm build
    # 运行时带上输出为 junit 测试报告
    - pnpm run test --reporter=junit
  cache:
    key:
      files:
        - pnpm-lock.yaml
    paths:
      - .pnpm-store
  # 产物里面选择配置的报告文件
  artifacts:
    reports:
      junit: test-results.xml

# cypress 测试
cypress-test:
  stage: test
  variables:
    GIT_STRATEGY: clone
    GIT_DEPTH: 0
  rules:
    - if: $CI_PIPELINE_SOURCE == "merge_request_event"
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
    - if: $CI_COMMIT_TAG
  before_script:
    - corepack enable
    - corepack prepare pnpm@latest --activate
    - pnpm config set store-dir .pnpm-store
  image: node:16.17.0-bullseye-slim
  script:
    # cypress 需要手动运行，才能测试
    - pnpm i
    - pnpm i -g wait-on
    - pnpm build
    - pnpm preview
    - wait-on http://localhost:3000
    - pnpm run test --reporter junit
  cache:
    key:
      files:
        - pnpm-lock.yaml
    paths:
      - .pnpm-store
  # 产物里面选择配置的报告文件
  artifacts:
    reports:
      junit: test-results.xml

参考

• Command Line | Cypress Documentation
• Reporters | Playwright