E2Eテストで開発を止めないためのPlaywright高速化

2025/11/08 PHPカンファレンス福岡2025

Transcript

1. 撮影OK、𝕏投稿OK ゆずねり@yuzneri E2Eテストで開発を⽌めない ためのPlaywright⾼速化 2025/11/08 PHPカンファレンス福岡2025
2. ゆずねり@yuzneri •株式会社クロスリンク •仕事 •バックエンドたまにフロントエン ドエンジニア •趣味 •ドール、ポーカー、謎解き 𝕏:@yuzneri 2025/11/08
3. ⽬次 1. PHPUnitとPlaywrightの違い 2. テスト並列化 3. 認証情報の共有 4. まとめ 2025/11/08
4. PHPUnit •PHPアプリケーションのテストフレームワーク •PHPで書かれたコードを⾃動テスト •主にユニットテスト、インテグレーションテス トで使う 2025/11/08
5. Playwright •Webサイトのテストフレームワーク •Webブラウザを⾃動操作してテスト •主にE2Eテストで使う 2025/11/08
6. Playwrightの特徴 •Chromium、Firefox、WebKitを⾃動操作 •E2Eテストに強い機能が豊富 •様々な環境、⾔語で動く •Windows、MacOS、Linux、Docker •TS/JS、Python、Java、.NET 2025/11/08
7. テストピラミッド 2025/11/08 E2Eテスト インテグレーション テスト ユニットテスト 速度 速い 遅い コスト ⾼い 低い
8. E2Eテストは時間がかかる •ユニットテストと同じテストでも、数⼗〜数百 倍時間がかかる •ブラウザの起動 •ページの読み込み •レンダリング 2025/11/08
9. それぞれの特徴に合わせて使い分ける •ビジネスロジックの 正確性 •エッジケースを網羅 的にテスト •ユーザー体験を検証 •ブラウザ上での JavaScriptを確認 •UIの表⽰や動作を検証 2025/11/08 PHPUnit Playwright
10. テスト並列実⾏ •テストを複数同時に実⾏する •前提として、テスト間の依存関係がない状態 2025/11/08
11. テスト並列化の⽅法 1. ワーカー •1台のマシンの中で並列化 2. シャーディング •複数台のマシンで並列化 2025/11/08
12. ワーカーとシャーディングの違い 2025/11/08 ワーカー シャーディング マシン1 ワーカー1:テスト1,2,3 ワーカー2:テスト4,5,6 ワーカー3:テスト7,8,9 マシン1 シャード1:テスト1,2,3 マシン2 シャード2:テスト4,5,6 マシン3 シャード3:テスト7,8,9
13. 1. ワーカー •1台のマシンの中でテスト並列化 •主にローカル開発で効果的 2025/11/08
14. 設定ファイルのworkersで設定 import { defineConfig } from '@playwright/test'; export default defineConfig({ workers: process.env.CI ? 1 : undefined, }); 2025/11/08
15. 2. シャーディング •複数台のマシンでテスト並列化 •⼤規模なテストやCI環境で効果的 2025/11/08
16. シャーディングのやり⽅ •testコマンドに引数を付けるだけ •--shard=シャード番号/分割数 npx playwright test --shard=1/3 npx playwright test --shard=2/3 npx playwright test --shard=3/3 2025/11/08
17. 分割されたレポートの統合 •merge-reportsコマンドで、バラバラになっ たレポートを統合できる npx playwright merge-reports ¥ --reporter html ./all-blob-reports 2025/11/08
18. GitHub Actionsでシャーディング •matrixを使うとできる •完全な設定例は公式サイトをご覧ください • https://playwright.dev/docs/test-sharding#github- actions-example 2025/11/08
19. matrix設定例 jobs: playwright-tests: strategy: fail-fast: false matrix: index: [1, 2, 3] # シャード番号 total: [3] # 分割数 steps: ... 2025/11/08
20. Shardオプション設定例 steps: # チェックアウトやPlaywrightの設定 - run: npx playwright test --shard=${{matrix.index}}/${{matrix.total}} - uses: actions/upload-artifact@v4 with: name: blob-report-${{ matrix.shardIndex }} path: blob-report 2025/11/08
21. レポート統合設定例 merge-reports: steps: # チェックアウトやPlaywrightの設定 - uses: actions/download-artifact@v5 with: path: all-blob-reports pattern: blob-report-* merge-multiple: true - run: npx playwright merge-reports --reporter html ./all-blob-reports 2025/11/08
22. 実⾏のようす 2025/11/08
23. クッキーやlocalStorageの共有 •storageStateを使うと、クッキーや localStorageをテスト間で共有できる •テストごとにログインしているような場合、1 回にすることができる 2025/11/08
24. セッションを保存する test('authenticate', async ({ page }) => { await page.fill('#user', 'user'); await page.fill('#pass', 'pass'); await page.click('#login'); await page.context().storageState({ path: 'auth.json' }); }); 2025/11/08
25. テスト時にセッションをロードする export default defineConfig({ projects: [ {name: 'setup', testMatch: /.*¥.setup¥.ts/}, { name: 'chromium', use: { ...devices['Desktop Chrome'], storageState: 'auth.json', }, dependencies: ['setup'], }, 2025/11/08 ① setup プ ロ ジ ェ ク ト が 最 初 に 実 ⾏ さ れ る ↑②auth.jsonが保存される ←③テスト時にauth.jsonが ロードされる
26. その他の⾼速化⽅法 1. ネットワークの最適化 2. アニメーションの無効化 3. セレクター選択の効率化 4. waitForTimeoutの排除 5. スモークテスト戦略 2025/11/08
27. まとめ •Playwrightの役割を理解 •Playwrightの便利な仕組みを使う •ワーカーやシャーディングを使って並列化 •認証を使い回す •その他いろいろ 2025/11/08