跳到主要内容

持续集成

简介​

Playwright 测试可以在持续集成(CI)环境中执行。我们为常见的 CI 服务提供商提供了示例配置。

在 CI 上运行测试的 3 个步骤：

  1. 确保 CI 代理可以运行浏览器：在 Linux 代理中使用 我们的 Docker 镜像，或使用 CLI 安装系统依赖。

  2. 安装 Playwright：


    # 安装 NPM 包
    npm ci


    # 安装 Playwright 浏览器和依赖项
    npx playwright install --with-deps

  3. 运行测试：

    npx playwright test

工作进程​

我们建议在 CI 环境中将 workers 设置为 "1"，以优先保证稳定性和可复现性。顺序执行测试可以确保每个测试都能获得完整的系统资源，避免潜在冲突。不过，如果您拥有强大的自托管 CI 系统，可以启用 并行 测试。如需更大规模的并行化，可以考虑 分片 - 将测试分发到多个 CI 任务中执行。

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

export default defineConfig({
  // 在 CI 上禁用并行测试
  workers: process.env.CI ? 1 : undefined,
});

CI 配置​

可以使用 命令行工具 在 CI 中安装所有操作系统依赖项。

GitHub Actions​

在 push/pull_request 时​

测试将在 main/master 分支的 push 或 pull request 时运行。该 工作流 会安装所有依赖项，安装 Playwright 然后运行测试。它还会生成 HTML 报告。

.github/workflows/playwright.yml
name: Playwright 测试
on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
        node-version: lts/*
    - name: 安装依赖
      run: npm ci
    - name: 安装 Playwright 浏览器
      run: npx playwright install --with-deps
    - name: 运行 Playwright 测试
      run: npx playwright test
    - uses: actions/upload-artifact@v4
      if: ${{ !cancelled() }}
      with:
        name: playwright-report
        path: playwright-report/
        retention-days: 30

在 push/pull_request 时（分片执行）​

GitHub Actions 支持 在多任务间分片执行测试。查看我们的 分片文档 了解更多关于分片的信息，以及 GitHub actions 示例 了解如何配置任务在多台机器上运行测试，以及如何合并 HTML 报告。

通过容器运行​

GitHub Actions 支持通过 jobs.<job_id>.container 选项在容器中运行任务。这种方式可以避免依赖项污染主机环境，并为不同操作系统提供一致的环境（例如用于截图/视觉回归测试）。

.github/workflows/playwright.yml
name: Playwright Tests
on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
jobs:
  playwright:
    name: 'Playwright Tests'
    runs-on: ubuntu-latest
    container:
      image: mcr.microsoft.com/playwright:v1.52.0-noble
      options: --user 1001
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: lts/*
      - name: 安装依赖
        run: npm ci
      - name: 运行测试
        run: npx playwright test

在部署时运行​

此配置会在 GitHub Deployment 进入 success 状态后启动测试。Vercel 等服务使用这种模式，您可以在它们的部署环境中运行端到端测试。

.github/workflows/playwright.yml
name: Playwright Tests
on:
  deployment_status:
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    if: github.event.deployment_status.state == 'success'
    steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
        node-version: lts/*
    - name: 安装依赖
      run: npm ci
    - name: 安装 Playwright
      run: npx playwright install --with-deps
    - name: 运行 Playwright 测试
      run: npx playwright test
      env:
        PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}

快速失败机制​

大型测试套件的执行可能会非常耗时。通过使用 --only-changed 标志执行初步测试运行，您可以优先运行可能失败的测试文件。这将为您提供更快的反馈循环，并在处理 Pull Requests 时略微降低 CI 资源消耗。为了检测受变更集影响的测试文件，--only-changed 会分析测试套件的依赖关系图。这是一种启发式方法，可能会遗漏某些测试，因此在初步测试运行后始终执行完整测试套件非常重要。

.github/workflows/playwright.yml
name: Playwright Tests
on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
      with:

        # 强制进行非浅克隆，以便我们可以引用 $GITHUB_BASE_REF

        # 更多详情请参见 https://github.com/actions/checkout
        fetch-depth: 0
    - uses: actions/setup-node@v4
      with:
        node-version: lts/*
    - name: 安装依赖
      run: npm ci
    - name: 安装 Playwright 浏览器
      run: npx playwright install --with-deps
    - name: 运行变更的 Playwright 测试
      run: npx playwright test --only-changed=$GITHUB_BASE_REF
      if: github.event_name == 'pull_request'
    - name: 运行 Playwright 测试
      run: npx playwright test
    - uses: actions/upload-artifact@v4
      if: ${{ !cancelled() }}
      with:
        name: playwright-report
        path: playwright-report/
        retention-days: 30

Docker​

我们提供了一个预构建的 Docker 镜像，既可以直接使用，也可以作为更新现有 Docker 定义的参考。请确保遵循推荐的 Docker 配置以获得最佳性能。

Azure Pipelines​

对于 Windows 或 macOS 代理机，无需额外配置，只需安装 Playwright 并运行测试即可。

对于 Linux 代理机，您可以使用 我们的 Docker 容器，Azure Pipelines 支持 运行容器化任务。或者，您也可以使用 命令行工具 来安装所有必要的依赖项。

运行 Playwright 测试时，请使用以下流水线任务：

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '18'
  displayName: '安装 Node.js'
- script: npm ci
  displayName: 'npm ci'
- script: npx playwright install --with-deps
  displayName: '安装 Playwright 浏览器'
- script: npx playwright test
  displayName: '运行 Playwright 测试'
  env:
    CI: 'true'

使用 Azure Pipelines 上传 playwright-report 文件夹​

如果任何 Playwright 测试失败，这将导致流水线运行失败。如果您还想将测试结果与 Azure DevOps 集成，请使用 PublishTestResults 任务，如下所示：

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '18'
  displayName: '安装 Node.js'

- script: npm ci
  displayName: 'npm ci'
- script: npx playwright install --with-deps
  displayName: '安装 Playwright 浏览器'
- script: npx playwright test
  displayName: '运行 Playwright 测试'
  env:
    CI: 'true'
- task: PublishTestResults@2
  displayName: '发布测试结果'
  inputs:
    searchFolder: 'test-results'
    testResultsFormat: 'JUnit'
    testResultsFiles: 'e2e-junit-results.xml'
    mergeTestResults: true
    failTaskOnFailedTests: true
    testRunTitle: '我的端到端测试'
  condition: succeededOrFailed()
- task: PublishPipelineArtifact@1
  inputs:
    targetPath: playwright-report
    artifact: playwright-report
    publishLocation: 'pipeline'
  condition: succeededOrFailed()

注意：需要通过以下方式在 playwright.config.ts 中配置 JUnit 报告器：

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

export default defineConfig({
  reporter: [['junit', { outputFile: 'test-results/e2e-junit-results.xml' }]],
});

Azure Pipelines (分片执行)​

trigger:
- main

pool:
  vmImage: ubuntu-latest

strategy:
  matrix:
    chromium-1:
      project: chromium
      shard: 1/3
    chromium-2:
      project: chromium
      shard: 2/3
    chromium-3:
      project: chromium
      shard: 3/3
    firefox-1:
      project: firefox
      shard: 1/3
    firefox-2:
      project: firefox
      shard: 2/3
    firefox-3:
      project: firefox
      shard: 3/3
    webkit-1:
      project: webkit
      shard: 1/3
    webkit-2:
      project: webkit
      shard: 2/3
    webkit-3:
      project: webkit
      shard: 3/3
steps:
- task: NodeTool@0
  inputs:
    versionSpec: '18'
  displayName: '安装 Node.js'

- script: npm ci
  displayName: 'npm ci'
- script: npx playwright install --with-deps
  displayName: '安装 Playwright 浏览器'
- script: npx playwright test --project=$(project) --shard=$(shard)
  displayName: '运行 Playwright 测试'
  env:
    CI: 'true'

Azure Pipelines (容器化)​

trigger:
- main

pool:
  vmImage: ubuntu-latest
container: mcr.microsoft.com/playwright:v1.52.0-noble

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '18'
  displayName: '安装 Node.js'

- script: npm ci
  displayName: 'npm ci'
- script: npx playwright test
  displayName: '运行 Playwright 测试'
  env:
    CI: 'true'

CircleCI​

在 CircleCI 上运行 Playwright 与在 GitHub Actions 上运行非常相似。要使用预构建的 Playwright Docker 镜像，只需在配置文件中通过 docker: 修改代理定义，如下所示：

executors:
  pw-noble-development:
    docker:
      - image: mcr.microsoft.com/playwright:v1.52.0-noble

注意：使用 docker 代理定义时，您将 Playwright 运行的资源类别指定为 'medium' 层级此处。Playwright 的默认行为是将工作线程数设置为检测到的核心数（medium 层级为 2 核）。将工作线程数覆盖为大于此数值会导致不必要的超时和失败。

CircleCI 中的分片执行​

CircleCI 中的分片索引从 0 开始，这意味着您需要覆盖默认的并行环境变量。以下示例展示了如何通过将 CIRCLE_NODE_INDEX 加 1 后传递给 --shard 命令行参数，在 CircleCI 并行度为 4 的情况下运行 Playwright。

  playwright-job-name:
    executor: pw-noble-development
    parallelism: 4
    steps:
      - run: SHARD="$((${CIRCLE_NODE_INDEX}+1))"; npx playwright test --shard=${SHARD}/${CIRCLE_NODE_TOTAL}

Jenkins​

Jenkins 支持为流水线使用 Docker 代理。使用 Playwright Docker 镜像在 Jenkins 上运行测试。

pipeline {
   agent { docker { image 'mcr.microsoft.com/playwright:v1.52.0-noble' } }
   stages {
      stage('e2e-tests') {
         steps {
            sh 'npm ci'
            sh 'npx playwright test'
         }
      }
   }
}

Bitbucket Pipelines​

Bitbucket Pipelines 可以使用公共的 Docker 镜像作为构建环境。要在 Bitbucket 上运行 Playwright 测试，请使用我们的公共 Docker 镜像（查看 Dockerfile）。

image: mcr.microsoft.com/playwright:v1.52.0-noble

GitLab CI​

要在 GitLab 上运行 Playwright 测试，请使用我们的公共 Docker 镜像（查看 Dockerfile）。

stages:
  - test

tests:
  stage: test
  image: mcr.microsoft.com/playwright:v1.52.0-noble
  script:
  ...

分片执行​

GitLab CI 支持使用 parallel 关键字在多个作业之间分片执行测试。测试作业将被拆分为多个并行运行的小型作业。并行作业会按顺序命名为从 job_name 1/N 到 job_name N/N。

stages:
  - test

tests:
  stage: test
  image: mcr.microsoft.com/playwright:v1.52.0-noble
  parallel: 7
  script:
    - npm ci
    - npx playwright test --shard=$CI_NODE_INDEX/$CI_NODE_TOTAL

GitLab CI 还支持使用 parallel:matrix 选项在多个作业之间分片执行测试。测试作业将在单个流水线中并行运行多次，但每个作业实例使用不同的变量值。在下面的示例中，我们有 2 个 PROJECT 值和 10 个 SHARD 值，总共会产生 20 个要运行的作业。

stages:
  - test

tests:
  stage: test
  image: mcr.microsoft.com/playwright:v1.52.0-noble
  parallel:
    matrix:
      - PROJECT: ['chromium', 'webkit']
        SHARD: ['1/10', '2/10', '3/10', '4/10', '5/10', '6/10', '7/10', '8/10', '9/10', '10/10']
  script:
    - npm ci
    - npx playwright test --project=$PROJECT --shard=$SHARD

Google Cloud Build​

要在 Google Cloud Build 上运行 Playwright 测试，请使用我们的公共 Docker 镜像（查看 Dockerfile）。

steps:
- name: mcr.microsoft.com/playwright:v1.52.0-noble
  script: 
  ...
  env:
  - 'CI=true'

Drone​

要在 Drone 上运行 Playwright 测试，请使用我们的公共 Docker 镜像（查看 Dockerfile）。

kind: pipeline
name: default
type: docker

steps:
  - name: test
    image: mcr.microsoft.com/playwright:v1.52.0-noble
    commands:
      - npx playwright test

缓存浏览器​

不建议缓存浏览器二进制文件，因为恢复缓存所需的时间与下载二进制文件的时间相当。特别是在 Linux 系统下，需要安装操作系统依赖项，这些依赖项无法被缓存。

如果仍希望在 CI 运行之间缓存浏览器二进制文件，可以在 CI 配置中根据 Playwright 版本的哈希值缓存这些目录。

调试浏览器启动​

Playwright 支持通过 DEBUG 环境变量在执行过程中输出调试日志。在调试 Error: Failed to launch browser 错误时，将其设置为 pw:browser 会很有帮助。

DEBUG=pw:browser npx playwright test

以有头模式运行​

默认情况下，Playwright 以无头模式启动浏览器。有关如何以有头模式运行测试，请参阅我们的运行测试指南。

在 Linux 代理上，有头模式执行需要安装 Xvfb。我们的 Docker 镜像 和 GitHub Action 已预装 Xvfb。要使用 Xvfb 以有头模式运行浏览器，请在命令前添加 xvfb-run。

xvfb-run npx playwright test