使用 GitLab 将 Playwright 与 CI/CD 管道集成：分步指南

介绍

现代软件开发强调快速迭代、质量保证和无缝交付。将 Playwright 等端到端 (E2E) 测试工具与 CI/CD 管道集成可确保在部署之前对应用程序进行一致、可靠和自动的测试。在本指南中，我们将逐步演示如何将 Playwright 与 GitLab CI/CD 管道集成。

先决条件

开始之前，请确保您已准备好以下物品：

托管在 GitLab 上的项目存储库。

Node.js 和 npm 已在本地安装。

在您的项目中安装 Playwright：

npm install playwright

GitLab CI/CD 及其 YAML 配置语法的基本知识。

第一步：准备剧作家测试

创建并组织您的 Playwright 测试用例。通常，Playwright 测试存储在“tests”或“e2e”等文件夹中。使用 Playwright 测试运行器确保您的测试在本地运行：

npx playwright test

一旦您的测试在本地通过，请继续将其集成到您的 CI/CD 管道中。

第 2 步：定义 GitLab CI/CD 配置

GitLab CI/CD 管道使用位于存储库根目录的 `.gitlab-ci.yml` 文件进行配置。更新配置以使用分片、并行执行和合并 HTML 报告，如下所示：

stages:
  - test
  - merge_reports

variables:
  CI: "true"
  PLAYWRIGHT_IMAGE: "mcr.microsoft.com/playwright:v1.49.0-noble"

playwright_test:
  stage: test
  image: ${PLAYWRIGHT_IMAGE}
  script:
    - npm install
    - npx playwright install --with-deps
    - npx playwright test --reporter blob --shard=$CI_NODE_INDEX/$CI_NODE_TOTAL
  rules:
    - if: '$CI_MERGE_REQUEST_TARGET_BRANCH_NAME == "main"'
  parallel: 16
  artifacts:
    when: always
    paths:
      - blob-report/*
    expire_in: 1 day

merge_reports:
  stage: merge_reports
  when: always
  image: ${PLAYWRIGHT_IMAGE}
  before_script:
    - npm ci
  script:
    - echo "Merging test reports"
    - npx playwright merge-reports --reporter html ./blob-report
  rules:
    - if: '$CI_MERGE_REQUEST_TARGET_BRANCH_NAME == "main"'
  artifacts:
    when: always
    paths:
      - playwright-report/**
    expire_in: 1 week

解释：

阶段：包括测试和合并报告阶段，以分离测试执行和报告合并。

变量：配置 Playwright Docker 镜像版本。

Playwright 测试作业：在 16 个分片上并行执行测试（并行：16）。为每个分片生成一个 blob 格式的报告。

合并报告作业：将 blob 报告合并为单个 HTML 报告，以便于查看。使用 Playwright 的合并报告功能。

工件：确保 Blob 报告和合并的 HTML 报告均可供检查。

步骤 3：配置 Playwright 报告

Playwright 默认生成详细的 HTML 报告。为确保报告生成和配置正确，请执行以下操作：

更新 playwright.config.ts 文件以包含以下内容：

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [
    ['blob'],
    ['html', { outputFolder: 'playwright-report', open: 'never' }]
  ],
});

此配置确保生成用于合并的 blob 格式的报告并创建最终的 HTML 报告。

步骤 4：执行管道

提交你的 `.gitlab-ci.yml` 文件并将你的更改推送到存储库。GitLab 将自动触发管道。

在 GitLab 项目的 CI/CD > Pipelines 部分中监控管道的进度。如果测试通过，管道将成功完成，并且将提供合并的 HTML 报告。

步骤5：根据测试结果自动部署

对于完整的 CI/CD 工作流程，您可以将测试阶段链接到部署：

deploy:
  stage: deploy
  script:
    - echo "Deploying application..."
  only:
    - main
  when: on_success

这确保只有测试通过后才会进行部署。

奖励：将报告上传到 AWS S3

对于持久报告托管，配置一项作业以将报告上传到 AWS S3：

upload_reports:
  stage: merge_reports
  script:
    - aws s3 cp playwright-report/ s3://your-bucket-name/playwright-report/ --recursive
  dependencies:
    - merge_reports

这使得团队成员能够从可访问的 URL 查看报告。

结论

将 Playwright 与 GitLab CI/CD 管道集成可实现自动化 E2E 测试，从而确保更高的代码质量和更少的生产问题。通过利用 GitLab 强大的 CI/CD 功能、Playwright 的分片及其报告功能，您可以构建强大的管道，以验证开发每个阶段的应用程序行为。

立即开始构建您的管道，并享受无缝测试和部署工作流程带来的好处！

CLIS.CC