跳至主要内容

分片

简介

默认情况下,Playwright 会在 并行 中运行测试文件,并努力优化对您机器上 CPU 内核的利用率。为了实现更大的并行化,您可以通过在多台机器上同时运行测试来进一步扩展 Playwright 测试执行。我们将这种操作模式称为“分片”。Playwright 中的分片意味着将您的测试分成更小的部分,称为“分片”。每个分片就像一个可以独立运行的独立作业。整个目的是将您的测试划分开来,以加快测试运行时间。

当您对测试进行分片时,每个分片可以独立运行,利用可用的 CPU 内核。这有助于通过同时执行任务来加快测试过程。

在 CI 管道中,每个分片可以作为独立的作业运行,利用您的 CI 管道中可用的硬件资源(如 CPU 内核)来更快地运行测试。

在多台机器之间分片测试

要对测试套件进行分片,请将 --shard=x/y 传递给命令行。例如,要将套件分成四个分片,每个分片运行四分之一的测试

npx playwright test --shard=1/4
npx playwright test --shard=2/4
npx playwright test --shard=3/4
npx playwright test --shard=4/4

现在,如果您在不同的作业上并行运行这些分片,您的测试套件的完成速度将提高四倍。

请注意,Playwright 只能对可以并行运行的测试进行分片。默认情况下,这意味着 Playwright 将对测试文件进行分片。了解有关 并行指南 中其他选项的信息。

合并来自多个分片的结果

在前面的示例中,每个测试分片都有自己的测试报告。如果您想要一个合并报告,显示所有分片的所有测试结果,则可以将它们合并。

首先,在 CI 上运行时,在配置中添加 blob 报告器

playwright.config.ts
export default defineConfig({
testDir: './tests',
reporter: process.env.CI ? 'blob' : 'html',
});

Blob 报告包含有关所有已运行测试及其结果的信息,以及所有测试附件(如跟踪和屏幕截图差异)。Blob 报告可以合并并转换为任何其他 Playwright 报告。默认情况下,Blob 报告将生成到 blob-report 目录中。

要合并来自多个分片的报告,请将 Blob 报告文件放到一个目录中,例如 all-blob-reports。Blob 报告名称包含分片号,因此它们不会冲突。

之后,运行 npx playwright merge-reports 命令

npx playwright merge-reports --reporter html ./all-blob-reports

这将在 playwright-report 目录中生成一个标准的 HTML 报告。

GitHub Actions 示例

GitHub Actions 支持 在多个作业之间分片测试,使用 jobs.<job_id>.strategy.matrix 选项。matrix 选项将为提供的每个选项组合运行一个单独的作业。

以下示例显示了如何配置作业以在四台机器上并行运行测试,然后将报告合并为单个报告。不要忘记将 reporter: process.env.CI ? 'blob' : 'html', 添加到您的 playwright.config.ts 文件中,如上面的示例所示。

  1. 首先,我们向作业配置添加 matrix 选项,其中 shardTotal: [4] 选项包含我们想要创建的分片总数,以及 shardIndex: [1, 2, 3, 4],其中包含分片号数组。
  2. 然后,我们使用 --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} 选项运行我们的 Playwright 测试。这将为每个分片运行我们的测试命令。
  3. 最后,我们将我们的 Blob 报告上传到 GitHub Actions 工件。这将使 Blob 报告可供工作流程中的其他作业使用。
.github/workflows/playwright.yml
name: Playwright Tests
on:
push:
branches: [ main, master ]
pull_request:
branches: [ main, master ]
jobs:
playwright-tests:
timeout-minutes: 60
runs-on: ubuntu-latest
strategy:
fail-fast: false
matrix:
shardIndex: [1, 2, 3, 4]
shardTotal: [4]
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 --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}

- name: Upload blob report to GitHub Actions Artifacts
if: ${{ !cancelled() }}
uses: actions/upload-artifact@v4
with:
name: blob-report-${{ matrix.shardIndex }}
path: blob-report
retention-days: 1
  1. 所有分片完成后,您可以运行一个单独的作业来合并报告并生成一个组合的 HTML 报告。为了确保执行顺序,我们通过添加 needs: [playwright-tests] 使 merge-reports 作业 依赖 于我们分片的 playwright-tests 作业。
.github/workflows/playwright.yml
jobs:
...
merge-reports:
# Merge reports after playwright-tests, even if some shards have failed
if: ${{ !cancelled() }}
needs: [playwright-tests]

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: Download blob reports from GitHub Actions Artifacts
uses: actions/download-artifact@v4
with:
path: all-blob-reports
pattern: blob-report-*
merge-multiple: true

- name: Merge into HTML Report
run: npx playwright merge-reports --reporter html ./all-blob-reports

- name: Upload HTML report
uses: actions/upload-artifact@v4
with:
name: html-report--attempt-${{ github.run_attempt }}
path: playwright-report
retention-days: 14

您现在可以看到报告已合并,并且组合的 HTML 报告在 GitHub Actions 工件选项卡中可用。

image

合并报告 CLI

npx playwright merge-reports path/to/blob-reports-dir 读取传递的目录中的所有 Blob 报告并将它们合并为单个报告。

当合并来自不同操作系统的报告时,您将需要提供一个显式合并配置来消除歧义,即哪个目录应该用作测试根目录。

支持的选项

  • --reporter reporter-to-use

    要生成的报告。可以是多个用逗号分隔的报告器。

    示例

    npx playwright merge-reports --reporter=html,github ./blob-reports
  • --config path/to/config/file

    指定具有输出报告器的 Playwright 配置文件。使用此选项将其他配置传递给输出报告器。此配置文件可能与创建 Blob 报告时使用的配置文件不同。

    示例

    npx playwright merge-reports --config=merge.config.ts ./blob-reports
    merge.config.ts
    export default {
    testDir: 'e2e',
    reporter: [['html', { open: 'never' }]],
    };