github actions 配置 playwright 自动测试

要在 GitHub Actions 中配置 Playwright 自动测试，需通过工作流文件定义测试流程，包括环境准备、依赖安装、浏览器配置和测试执行。

原理就是通过GitHub Actions的工作流开启一个虚拟机，在虚拟机中安装Node.js和Playwright，然后启动服务后运行测试。

以下是详细实现步骤和配置示例：

一、前提条件

1. 项目中已集成 Playwright（需有测试文件，如 tests/ 目录下的 .spec.ts 文件）。
2. 项目根目录存在 package.json，并已安装 Playwright 依赖 和 wait-on 工具：

   npm i @playwright/test -D  # 初始化 Playwright 项目（若未配置）
   npm i wait-on -D  # 安装wait-on工具（用于等待服务启动）

二、GitHub Action 配置步骤

1. 创建工作流文件

在项目根目录创建 .github/workflows/playwright-test.yml，用于定义测试流程。

2. 完整配置示例

name: Playwright E2E 回归测试

# 触发条件：推送到master分支或对master分支的PR
on:
  push:
    branches: [ "master" ]
  pull_request:
    branches: [ "master" ]

jobs:
  e2e-test:
    # 运行环境（可选ubuntu/macOS/windows，推荐ubuntu）
    runs-on: ubuntu-latest

    steps:
      # 1. 拉取当前分支代码
      - name: 拉取代码
        uses: actions/checkout@v4

      # 2. 安装Node.js（根据项目实际版本调整）
      - name: 配置Node环境
        uses: actions/setup-node@v4
        with:
          node-version: 20  # 匹配项目的Node版本
          cache: 'npm'      # 缓存npm依赖，加速安装

      # 3. 安装前端项目依赖
      - name: 安装项目依赖
        # run: npm i
        run: npm ci  # 比npm install更严格，依赖package-lock.json

      # 4. 安装Playwright浏览器（这里是单独安装，包含Chromium等）
      - name: 安装Playwright浏览器
        run: npx playwright install chromium --with-deps  # --with-deps自动安装系统依赖（如字体）

      # 5. 启动前端服务（使用后端测试环境地址）
      - name: 启动开发服务器
        run: |
          # 先构建项目, 假设项目构建命令为npm run build，--env=test指定测试环境
          npm run build -- --env=test  
          # 启动服务，并将日志写入dev-server.log（& 后台运行）
          npm run preview > dev-server.log 2>&1 &
          # 等待3秒，让服务器有时间输出启动日志
          sleep 3
          # 打印日志文件内容，查看是否有端口信息或错误
          cat dev-server.log

      # 6. 等待前端服务就绪（避免测试时服务未启动）
      - name: 等待服务启动完成
        run: |
          # 使用wait-on工具等待http://localhost:1088可访问（需提前安装：npm i wait-on -D）
          npx wait-on tcp:1088 --timeout 60000  # 超时时间60秒

      # 7. 运行Playwright测试
      - name: 执行E2E测试
        run: npx playwright test  # 运行所有测试文件（默认找tests目录或*.spec.ts）
        # env:
        #   # 可选：如果测试用例中需要直接访问后端测试环境，可在此注入
        #   TEST_API_URL: ${{ secrets.TEST_API_URL }}

      # 8. 上传测试报告（失败时也上传，方便排查）
      - name: 上传测试报告
        if: always()  # 无论测试成功/失败都执行
        uses: actions/upload-artifact@v4
        with:
          name: playwright-report
          path: playwright-report/  # Playwright默认报告目录
          retention-days: 7  # 报告保留7天

三、playwright 配置

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  use: {
    baseURL: 'http://localhost:1088',  // 指向本地启动的前端服务
  },
  // 其他配置（如测试文件路径、浏览器等）
  testDir: './tests',  // 测试文件存放目录
  fullyParallel: true, // 并行运行测试
  projects: [
    {
      name: 'chromium', // 浏览器名称（自定义，通常用浏览器名）
      use: { ...devices['Desktop Chrome'] }, // 模拟桌面版Chrome环境
    },
    // 注释或删除firefox和webkit的配置
    // {
    //   name: 'firefox',
    //   use: { ...devices['Desktop Firefox'] },
    // },
    // {
    //   name: 'webkit',
    //   use: { ...devices['Desktop Safari'] },
    // },
  ],
  reporter: [
    ['list'], // 在控制台输出测试结果（可选）
    [
      'html', // 生成HTML报告
      {
        outputFolder: 'playwright-report', // 报告输出路径（可自定义，需与上传路径一致）
        open: 'never' // CI环境无需自动打开报告，设为never
      }
    ]
  ],
});

四、测试报告查看

每当推送到master分支或对master分支的PR触发测试，测试完成后会自动上传测试报告。

可以在Actions页面查看具体测试结果和报告。

能够查看流水线执行的每一步结果。

底下就是生成的测试报告,如果测试失败,可以下载下来查看详细信息,查看失败原因.