把Playwright集成到CI/CD流水线中的那些事儿

• 引言
• 为什么要将 Playwright 集成到 CI/CD 中？
• 步骤 1：准备 Playwright 测试用例
• 步骤 2：将 Playwright 集成到 GitHub Actions 中
• 步骤 3：将 Playwright 集成到 GitLab CI/CD 中
• 步骤 4：将 Playwright 集成到 Jenkins 中
• 步骤 5：并行运行测试
• 步骤 6：处理工件并生成报告
• Playwright CI/CD 集成的最佳做法
• 结论

持续集成和持续部署（CI/CD）管道对于高效交付高质量软件至关重要。将Playwright与CI/CD集成可以让你自动化端到端测试，确保每次代码变更在进入生产环境之前都会被测试。本指南会教你如何将Playwright与流行的CI/CD工具（比如GitHub Actions、GitLab CI和Jenkins）集成。

• 自动化测试：确保代码更改不会破坏现有功能。
• 一致性：在受控和可重复的环境中运行测试，确保测试的可靠性。
• 可扩展性：同时在多个浏览器和设备上执行测试，以覆盖不同平台。
• 反馈循环：即时获取测试结果反馈，以便更快地进行调试。

在将 Playwright 集成到您的 CI/CD 流水线之前，请确保您的测试已经准备好了：

1. 功能：使用命令 npx playwright test 本地运行它们，以验证它们是否正常工作。
2. 可配置：可以利用环境变量来配置基础 URL、凭据和其他设置。
3. 可靠：通过利用 Playwright 的自动等待功能来减少测试的不稳定性。

使用 GitHub Actions 设置 CI/CD 流水线非常简单。

创建一个工作流程文件：

将以下内容保存为 .github/workflows/playwright.yml：

    name: Playwright 测试任务

    on:
      push:
        branches:
          - main
      pull_request:

    jobs:
      test:
        runs-on: ubuntu-latest

        steps:
        - name: 检出仓库
          uses: actions/checkout@v3

        - name: 设置 Node.js
          uses: actions/setup-node@v3
          with:
            node-version: '16'

        - name: 安装依赖
          run: npm ci

        - name: 安装 Playwright 浏览器环境
          run: npx playwright install --with-deps

        - name: 运行 Playwright 测试
          run: npx playwright test

        - name: 上传测试报告
          if: failure()
          uses: actions/upload-artifact@v3
          with:
            name: playwright-report
            path: playwright-report

进入全屏 退出全屏

主要特点：

• 自动响应推送或拉取请求事件。
• 上传失败运行的 Playwright HTML 报告文件。

步骤 3：将 Playwright 与 GitLab 持续集成和持续交付结合

GitLab CI/CD 流水线的配置使用 .gitlab-ci.yml 文件。

配置管道:

在你的 .gitlab-ci.yml 文件中添加以下内容：

    阶段:

      - 测试

    测试:
      阶段: 测试
      image: mcr.microsoft.com/playwright:v1.38.0-focal
      script:
        - npm ci
        - npx playwright install --with-deps
        - npx playwright test
      工件:
        when: always
        路径:
          - playwright-report/
        expire_in: 持续一周

全屏 退出全屏

主要特点 ，

• 使用官方的 Playwright Docker 镜像来确保一致性。
• 保存测试工件，如 Playwright 报告，方便调试。

Jenkins 需要一个 Jenkinsfile（这是一个文件名）来定义构建管道。

创建Jenkinsfile如下:

    pipeline {
        agent any

        stages {
            stage('安装依赖项') {
                steps {
                    sh 'npm ci'
                    sh 'npx playwright install --with-deps'
                }
            }

            stage('执行测试') {
                steps {
                    sh 'npx playwright test'
                }
            }
        }

        post {
            always {
                archiveArtifacts artifacts: 'playwright-report/**', allowEmptyArchive: true // 归档文件：保存 playwright-report 目录下的所有文件
            }
            failure {
                echo '测试未通过！请查看报告。'
            }
        }
    }

进入全屏 退出全屏

关键特性：

• 存档所有运行的 Playwright 报告内容。
• 提供自定义的运行后操作，针对失败情况和成功情况。

为了加快测试执行速度以便，并配置 Playwright 以并行运行测试。

配置：在 playwright.config.ts 文件中添加 workers 配置。

导入 { defineConfig } from '@playwright/test';

// 定义配置
defineConfig({
  workers: process.env.CI ? 4 : 1, // 根据环境变量决定工作进程数
});

默认导出 defineConfig;

点击全屏/退出全屏

在您的CI管道中，确保有充足的资源以支持并行运行。

如何有效地分析测试结果：

1. 生成HTML报告功能：生成HTML报告：确保在 playwright.config.ts 中启用了生成 HTML 报告的功能。

报告器: [['html', { outputFolder: 'playwright-report' }]] // 可以用来生成HTML报告，并将输出文件夹设置为'playwright-report'。

全屏 全屏退出

1. 上传报告：使用CI/CD特有的命令上传报告作为工件（例如，GitHub的actions/upload-artifact或GitLab的artifacts）。
2. 展示结果：将报告托管在S3存储桶或静态服务器上以便于轻松访问。

• 使用 Docker 镜像来保持一致的环境：利用官方 Playwright Docker 镜像来保持一致的环境。
• 跨浏览器测试以确保测试可以在多个浏览器（Chromium、WebKit、Firefox）上运行：确保测试配置可以在多个浏览器（Chromium、WebKit、Firefox）上运行。
• 在每次提交时运行冒烟测试：在每次提交时运行冒烟测试，以加快反馈速度。
• 在夜间构建时运行完整测试套件：在非高峰时段运行完整测试套件。
• 监控和解决易变测试：追踪并解决易变测试以保持管道稳定性。

将 Playwright 集成到 CI/CD 管道中可以提升您的开发工作流程，确保测试的可靠性和自动化。按照本指南操作，您可以利用 GitHub Actions、GitLab CI 和 Jenkins 等工具设置稳健的管道。从今天开始将 Playwright 集成到您的 CI/CD 过程中，自信交付高质量的软件！

有疑问或想分享的内容，欢迎在下面的评论区留言！