持续集成

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

简介
CI 配置
缓存浏览器
调试浏览器启动
有头模式运行

简介

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

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

安装 Playwright：

# 安装 NPM 包
npm ci
# 或者
npm install

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

运行您的测试：
```
npx playwright test
```

CI 配置

命令行工具可用于在 GitHub Actions 上安装所有操作系统依赖项。

GitHub Actions

steps:
  - uses: actions/checkout@v3
  - uses: actions/setup-node@v2
    with:
      node-version: '14'
  - name: Install dependencies
    run: npm ci
  - name: Install Playwright
    run: npx playwright install --with-deps
  - name: Run your tests
    run: npx playwright test
  - name: Upload test results
    if: always()
    uses: actions/upload-artifact@v2
    with:
      name: playwright-report
      path: playwright-report

我们在 GitHub Actions 上运行我们的测试，跨越 3 个平台（Windows、Linux、macOS）和 3 个浏览器（Chromium、Firefox、WebKit）的矩阵。

部署时的 GitHub Actions

这将在 GitHub Deployment 进入 success 状态后启动测试。像 Vercel 这样的服务使用此模式，以便您可以在其部署的环境中运行端到端测试。

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@v3
    - uses: actions/setup-node@v2
      with:
        node-version: '14.x'
    - 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 }}

Docker

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

建议的配置：

使用 Chromium 时建议同时使用 --ipc=host——否则 Chromium 可能会耗尽内存并崩溃。在 Docker 文档中了解有关此选项的更多信息。
启动 Chromium 时遇到其他奇怪的错误？在本地开发时尝试使用 docker run --cap-add=SYS_ADMIN 运行容器。
建议使用 --init Docker 标志或 dumb-init 以避免对 PID=1 的进程进行特殊处理。这是僵尸进程的常见原因。

GitHub Actions (通过容器)

GitHub Actions 支持通过使用 jobs.<job_id>.container 选项在容器中运行作业。

steps:
  playwright:
    name: 'Playwright Tests'
    runs-on: ubuntu-latest
    container:
      image: mcr.microsoft.com/playwright:v1.27.1-focal
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v2
        with:
          node-version: '14'
      - name: Install dependencies
        run: npm ci
      - name: Run your tests
        run: npx playwright test

分片 (Sharding)

GitHub Actions 支持使用 jobs.<job_id>.strategy.matrix 选项在多个作业之间分片测试。matrix 选项将为提供的选项的每种可能组合运行一个单独的作业。在下面的示例中，我们有 2 个 project 值，10 个 shardIndex 值和 1 个 shardTotal 值，总共将运行 20 个作业。

steps:
  playwright:
    name: 'Playwright Tests - ${{ matrix.project }} - Shard ${{ matrix.shardIndex }} of ${{ matrix.shardTotal }}'
    runs-on: ubuntu-latest
    container:
      image: mcr.microsoft.com/playwright:v1.27.1-focal
    strategy:
      fail-fast: false
      matrix:
        project: [chromium, webkit]
        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        shardTotal: [10]
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v2
        with:
          node-version: '14'
      - name: Install dependencies
        run: npm ci
      - name: Run your tests
        run: npx playwright test --project=${{ matrix.project }} --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}

注意：${{ <expression> }} 是表达式语法，允许访问当前上下文。在这个例子中，我们使用 matrix 上下文来设置作业变体。

Azure Pipelines

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

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

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

jobs:
    - deployment: Run_E2E_Tests
      pool:
        vmImage: ubuntu-20.04
      container: mcr.microsoft.com/playwright:v1.27.1-focal
      environment: testing
      strategy:
        runOnce:
          deploy:
            steps:
            - checkout: self
            - task: Bash@3
              displayName: 'Run Playwright tests'
              inputs:
                workingDirectory: 'my-e2e-tests'
                targetType: 'inline'
                failOnStderr: true
                env:
                  CI: true
                script: |
                  npm ci
                  npx playwright test

如果任何 Playwright 测试失败，这将使管道运行失败。如果您还想将测试结果与 Azure DevOps 集成，请使用 failOnStderr:false 和内置的 PublishTestResults 任务，如下所示：

jobs:
    - deployment: Run_E2E_Tests
      pool:
        vmImage: ubuntu-20.04
      container: mcr.microsoft.com/playwright:v1.27.1-focal
      environment: testing
      strategy:
        runOnce:
          deploy:
            steps:
            - checkout: self
            - task: Bash@3
              displayName: 'Run Playwright tests'
              inputs:
                workingDirectory: 'my-e2e-tests'
                targetType: 'inline'
                failOnStderr: false
                env:
                  CI: true
                script: |
                  npm ci
                  npx playwright test
                  exit 0
            - task: PublishTestResults@2
              displayName: 'Publish test results'
              inputs:
                searchFolder: 'my-e2e-tests/test-results'
                testResultsFormat: 'JUnit'
                testResultsFiles: 'e2e-junit-results.xml' 
                mergeTestResults: true
                failTaskOnFailedTests: true
                testRunTitle: 'My End-To-End Tests'

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

["junit", { outputFile: "test-results/e2e-junit-results.xml" }]

在 playwright.config.ts 中。

CircleCI

在此 Circle CI 上运行 Playwright 与在 GitHub Actions 上运行非常相似。为了指定预构建的 Playwright Docker 镜像，只需像这样在您的配置中使用 docker: 修改代理定义：

executors:
   pw-focal-development:
     docker:
       - image: mcr.microsoft.com/playwright:v1.27.1-focal
   environment:
     NODE_ENV: development # 如果 playwright 在 `devDependencies` 中则需要

注意：使用 docker 代理定义时，您是在这里指定 Playwright 运行的资源类为“medium”层。Playwright 的默认行为是将 worker 数量设置为检测到的核心数（在 medium 层的情况下为 2）。将 worker 数量覆盖为大于此数字将导致不必要的超时和失败。

同样，如果您通过 Jest 使用 Playwright，那么您可能会遇到生成子进程的错误：

[00:00.0]  jest args: --e2e --spec --max-workers=36
Error: spawn ENOMEM
   at ChildProcess.spawn (internal/child_process.js:394:11)

这很可能是因为 Jest 自动检测的是整台机器上的进程数（36），而不是容器允许的进程数（2）。要修复此问题，请在测试命令中设置 jest --maxWorkers=2。

Circle CI 中的分片

Circle CI 中的分片索引为 0，这意味着您需要覆盖默认的并行环境变量。以下示例演示了如何通过将 1 添加到 CIRCLE_NODE_INDEX 传递给 --shard cli 参数，以 4 的并行度运行 Playwright。

  playwright-job-name:
    executor: pw-focal-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.27.1-focal' } }
   stages {
      stage('e2e-tests') {
         steps {
            // 取决于您的语言/测试框架
            sh 'npm install'
            sh 'npx playwright test'
         }
      }
   }
}

Bitbucket Pipelines

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

image: mcr.microsoft.com/playwright:v1.27.1-focal

GitLab CI

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

stages:
  - test

tests:
  stage: test
  image: mcr.microsoft.com/playwright:v1.27.1-focal
  script:
  ...

分片 (Sharding)

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

stages:
  - test

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

GitLab CI 还支持使用 parallel:matrix 选项在多个作业之间分片测试。测试作业将在单个管道中并行运行多次，但作业的每个实例具有不同的变量值。在下面的示例中，我们有 2 个 PROJECT 值，10 个 SHARD_INDEX 值和 1 个 SHARD_TOTAL 值，总共将运行 20 个作业。

stages:
  - test

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

缓存浏览器

默认情况下，Playwright 会在安装 Playwright NPM 包时下载浏览器二进制文件。NPM 包有一个 postinstall 钩子用于下载浏览器二进制文件。此行为可以通过环境变量进行自定义。

在 CI 上缓存浏览器是 严格可选的：postinstall 钩子应该在每次运行时执行并下载浏览器二进制文件。

例外：`node_modules` 被缓存（Node 特有）

大多数 CI 提供商会缓存 npm-cache 目录（位于 $HOME/.npm）。如果您的 CI 管道缓存了 node_modules 目录并且您运行 npm install（而不是 npm ci），则默认配置

将无法工作。这是因为 npm install 步骤会在磁盘上找到 Playwright NPM 包，并且不会执行 postinstall 步骤。

如果您的存储库没有 package-lock.json 文件，Travis CI 会自动缓存 node_modules。

可以通过以一种下的方法解决此行为：

改为缓存 $HOME/.npm 或 npm-cache 目录。（这是大多数 CI 提供商的默认行为。）
在运行 npm install 之前设置 PLAYWRIGHT_BROWSERS_PATH=0 作为环境变量。这将在 node_modules 目录中下载浏览器二进制文件，并将它们与包代码一起缓存。请参阅管理浏览器二进制文件。
使用 npm ci（而不是 npm install），它会强制执行全新安装：删除现有的 node_modules 目录。请参阅 npm 文档。
使用以下步骤缓存浏览器二进制文件。

要缓存的目录

在默认行为下，Playwright 将浏览器二进制文件下载到以下目录：

Windows 上的 %USERPROFILE%\AppData\Local\ms-playwright
MacOS 上的 ~/Library/Caches/ms-playwright
Linux 上的 ~/.cache/ms-playwright

要在 CI 运行之间缓存浏览器下载，请在您的 CI 配置中缓存此位置，并使用 Playwright 版本作为哈希。

调试浏览器启动

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

DEBUG=pw:browser* npx playwright test

有头模式运行

默认情况下，Playwright 以无头模式启动浏览器。这可以通过在启动浏览器时传递标志来更改。

// 适用于 chromium, firefox 和 webkit
const { chromium } = require('playwright');
const browser = await chromium.launch({ headless: false });

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

xvfb-run node index.js

简介​

CI 配置​

GitHub Actions​

部署时的 GitHub Actions​

Docker​

GitHub Actions (通过容器)​

分片 (Sharding)​

Azure Pipelines​

CircleCI​

Circle CI 中的分片​

Jenkins​

Bitbucket Pipelines​

GitLab CI​

分片 (Sharding)​

缓存浏览器​

例外：node_modules 被缓存（Node 特有）​

要缓存的目录​

调试浏览器启动​

有头模式运行​

简介

CI 配置

GitHub Actions

部署时的 GitHub Actions

Docker

GitHub Actions (通过容器)

分片 (Sharding)

Azure Pipelines

CircleCI

Circle CI 中的分片

Jenkins

Bitbucket Pipelines

GitLab CI

分片 (Sharding)

缓存浏览器

例外：`node_modules` 被缓存（Node 特有）

要缓存的目录

调试浏览器启动

有头模式运行