跳到主要内容

持续集成

简介​

Playwright 测试可以在 CI 环境中执行。我们为常见的 CI 提供商创建了示例配置。

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

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

  2. 安装 Playwright:

    # Install NPM packages
    npm ci

    # Install Playwright browsers and dependencies
    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({
  // Opt out of parallel tests on CI.
  workers: process.env.CI ? 1 : undefined,
});

CI 配置​

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

GitHub Actions​

在 push/pull_request​

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

.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
    - uses: actions/setup-node@v4
      with:
        node-version: lts/*
    - name: Install dependencies
      run: npm ci
    - name: Install Playwright Browsers
      run: npx playwright install --with-deps
    - name: Run Playwright tests
      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 支持 在多个作业之间分片测试。查看我们的 分片文档，了解有关分片的更多信息，并查看如何在多台机器上运行测试以及如何合并 HTML 报告的 GitHub Actions 示例。

通过容器​

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.48.1-jammy
      options: --user 1001
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: lts/*
      - name: Install dependencies
        run: npm ci
      - name: Run your tests
        run: npx playwright test

在部署时​

这将在 GitHub 部署 进入 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: Install dependencies
      run: npm ci
    - name: Install Playwright
      run: npx playwright install --with-deps
    - name: Run Playwright tests
      run: npx playwright test
      env:
        PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}

快速失败​

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

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:
        # Force a non-shallow checkout, so that we can reference $GITHUB_BASE_REF.
        # See https://github.com/actions/checkout for more details.
        fetch-depth: 0
    - uses: actions/setup-node@v4
      with:
        node-version: lts/*
    - name: Install dependencies
      run: npm ci
    - name: Install Playwright Browsers
      run: npx playwright install --with-deps
    - name: Run changed Playwright tests
      run: npx playwright test --only-changed=$GITHUB_BASE_REF
      if: github.event_name == 'pull_request'
    - name: Run Playwright tests
      run: npx playwright test
    - uses: actions/upload-artifact@v4
      if: ${{ !cancelled() }}
      with:
        name: playwright-report
        path: playwright-report/
        retention-days: 30

Docker​

我们有一个 预构建的 Docker 镜像，可以直接使用，也可以作为参考来更新您现有的 Docker 定义。

建议的配置

  1. 在使用 Chromium 时，也建议使用 --ipc=host。没有它，Chromium 可能会内存不足并崩溃。在 Docker 文档 中了解有关此选项的更多信息。
  2. 在启动 Chromium 时看到其他奇怪的错误？尝试在本地开发时使用 docker run --cap-add=SYS_ADMIN 运行您的容器。
  3. 建议使用 --init Docker 标志或 dumb-init 来避免对 PID=1 的进程进行特殊处理。这是产生僵尸进程的常见原因。

Azure Pipelines​

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

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

要运行 Playwright 测试，请使用此管道任务

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '18'
  displayName: 'Install Node.js'
- script: npm ci
  displayName: 'npm ci'
- script: npx playwright install --with-deps
  displayName: 'Install Playwright browsers'
- script: npx playwright test
  displayName: 'Run Playwright tests'
  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: 'Install Node.js'

- script: npm ci
  displayName: 'npm ci'
- script: npx playwright install --with-deps
  displayName: 'Install Playwright browsers'
- script: npx playwright test
  displayName: 'Run Playwright tests'
  env:
    CI: 'true'
- task: PublishTestResults@2
  displayName: 'Publish test results'
  inputs:
    searchFolder: 'test-results'
    testResultsFormat: 'JUnit'
    testResultsFiles: 'e2e-junit-results.xml'
    mergeTestResults: true
    failTaskOnFailedTests: true
    testRunTitle: 'My End-To-End Tests'
  condition: succeededOrFailed()
- task: PublishPipelineArtifact@1
  inputs:
    targetPath: playwright-report
    artifact: playwright-report
    publishLocation: 'pipeline'
  condition: succeededOrFailed()

注意：JUnit 报告需要通过以下方式进行相应配置

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

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

在 playwright.config.ts 中。

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: 'Install Node.js'

- script: npm ci
  displayName: 'npm ci'
- script: npx playwright install --with-deps
  displayName: 'Install Playwright browsers'
- script: npx playwright test --project=$(project) --shard=$(shard)
  displayName: 'Run Playwright tests'
  env:
    CI: 'true'

Azure Pipelines（容器化）​

trigger:
- main

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

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

- script: npm ci
  displayName: 'npm ci'
- script: npx playwright test
  displayName: 'Run Playwright tests'
  env:
    CI: 'true'

CircleCI​

在 CircleCI 上运行 Playwright 与在 GitHub Actions 上运行非常类似。为了指定预构建的 Playwright Docker 镜像，只需使用 docker: 修改代理定义即可，如下所示

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

注意：当使用 docker 代理定义时，您将指定 Playwright 运行位置的资源类为 'medium' 层 此处。Playwright 的默认行为是将工作线程数量设置为检测到的核心数量（在中等层的情况下为 2）。将工作线程数量覆盖为大于此数量会导致不必要的超时和故障。

CircleCI 中的分片​

CircleCI 中的分片从 0 开始索引，这意味着您需要覆盖默认的并行化 ENV VARS。以下示例演示了如何通过在 CIRCLE_NODE_INDEX 中添加 1 并将其传递到 --shard cli 参数中，使用 4 个并行化程度的 CircleCI 来运行 Playwright。

  playwright-job-name:
    executor: pw-jammy-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.48.1-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.48.1-noble

GitLab CI​

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

stages:
  - test

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

分片​

GitLab CI 支持 在多个作业之间分片测试，方法是使用 parallel 关键字。测试作业将被分成多个较小的作业，这些作业并行运行。并行作业从 job_name 1/N 到 job_name N/N 顺序命名。

stages:
  - test

tests:
  stage: test
  image: mcr.microsoft.com/playwright:v1.48.1-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.48.1-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.48.1-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.48.1-jammy
    commands:
      - npx playwright test

缓存浏览器​

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

如果您仍然希望在 CI 运行之间缓存浏览器二进制文件，请在 CI 配置中缓存 这些目录，并针对 Playwright 版本的哈希值。

调试浏览器启动​

Playwright 支持 DEBUG 环境变量以在执行期间输出调试日志。将其设置为 pw:browser 有助于调试 Error: Failed to launch browser 错误。

DEBUG=pw:browser npx playwright test

运行有头模式​

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

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

xvfb-run npx playwright test