playwright-sharding-test.md

Playwright Test を GitHub Actions で Sharding する

https://playwright.dev/docs/test-sharding

ローカルで試す。

npx playwright test --shard=1/2 のようにすると、テスト上から(おそらくFS依存のls列挙順で) shard 数で割って分配してくれる。

$ npx playwright test --shard=1/2
Running 1 test using 1 worker, shard 1 of 2
  1 passed (2.6s)

$ npx playwright test --shard=2/2
Running 1 test using 1 worker, shard 2 of 2
  1 passed (2.1s)

さすがに実行時間の配分まではしてなさそう。

シャーディングを最も効果的に活用するには、特にCI環境において、fullyParallel: trueシャード間のバランスの取れた分散を目指す場合にシャーディングを使用することをお勧めします。そうでない場合は、不均衡を避けるためにテストファイルを手動で整理する必要があるかもしれません。

GitHub Workflow で Sharding する

つまりこれを matrix で実行する

$ npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}

実行例

name: Playwright Tests Sharded
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

つまりはここに分割したい数を設定する

    # matrix で並列化
    strategy:
      fail-fast: false
      matrix:
        shardIndex: [1, 2, 3, 4]
        shardTotal: [4]
    # ...
    - name: Run Playwright tests
      run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}

最終的にはGitHubに金を払って並列度を上げるには金で殴って解決することになる。

https://docs.github.com/en/actions/administering-github-actions/usage-limits-billing-and-administration

Install with deps のボトルネックを減らす

かならずブラウザのセットアップから入るが、ここが 50秒かかっている。どんなに分割してもボトルネックになるので、ここはチューニングできるか見ておく

chromimum だけにしてみる

    - name: Install Playwright browsers
      run: npx playwright install --with-deps chromium

22秒になった

まとめ

chromium で 4 並列化する例

// playwright.config.ts
export default defineConfig({
  // 全テストを並列実行する
  fullyParallel: true,
  // chromium だけで実行
  projects: [
    {
      name: "chromium",
      use: { ...devices["Desktop Chrome"] },
    },
  ],
});

    # matrix で並列化
    strategy:
      fail-fast: false
      matrix:
        shardIndex: [1, 2, 3, 4]
        shardTotal: [4]
    steps:
    # chromium only
    - name: Install Playwright browsers
      run: npx playwright install --with-deps chromium
    # 自身の対応シャード数で実行
    - name: Run Playwright tests
      run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}