Web 開発において、品質の高いアプリケーションを継続的にリリースすることは非常に重要です。手動でのテストやデプロイ作業は時間がかかるだけでなく、人的ミスも発生しやすくなってしまいます。

そこで今回は、Microsoft 社が開発した E2E テストフレームワーク「Playwright」と GitHub Actions を組み合わせて、CI/CD パイプラインを自動化する方法をご紹介いたします。この仕組みを導入することで、コードの変更から本番環境へのデプロイまでを完全に自動化でき、開発チーム全体の生産性を大幅に向上させることができるでしょう。

背景

CI/CD パイプラインが求められる理由

現代の Web 開発では、アジャイル開発や DevOps の普及により、短いサイクルで継続的にソフトウェアをリリースすることが求められています。しかし、手動でのテストやデプロイには以下のような課題があります。

CI/CD パイプラインを導入することで、これらの課題を解決し、開発チーム全体の効率を向上させることが可能です。品質を保ちながら迅速な開発サイクルを実現するためには、自動化されたテストとデプロイの仕組みが不可欠となっています。

Playwright の特徴と利点

Playwright は、Microsoft 社が開発したモダンな E2E テストフレームワークです。従来の Selenium と比較して、以下のような優れた特徴を持っています。

#	特徴	詳細
1	クロスブラウザ対応	Chromium、Firefox、WebKit（Safari）に対応
2	高速実行	並列実行とネイティブ API により高速動作
3	自動待機	要素の出現を自動的に待機し、安定したテスト実行
4	リッチな API セット	スクリーンショット、動画録画、ネットワーク制御など
5	TypeScript 完全対応	型安全なテストコード記述が可能

これらの特徴により、Playwright は CI/CD 環境での自動テストに最適なツールとなっています。

課題

手動テストの限界

従来の手動テストには多くの制約があります。まず、人的リソースの問題があります。

テスト実行に多くの時間と人手が必要となり、プロジェクトの規模が大きくなるほど負担が増大します。また、人間が行うテストでは、どうしてもミスや見落としが発生してしまう可能性があります。

さらに、回帰テストの実施も困難になります。新機能を追加するたびに、既存機能への影響を確認するためのテストを繰り返し行う必要がありますが、手動では時間的制約により十分なテストを行えないケースが多いのです。

継続的テストの必要性

現代の開発では、以下のような継続的テストの仕組みが必要不可欠です。

まず、コードの変更が発生するたびに自動でテストが実行される仕組みです。開発者がコードをプッシュしたタイミングで、すぐにテストが走り、問題があれば即座に検出できます。

次に、複数の環境でのテスト実行です。ローカル環境だけでなく、ステージング環境や本番環境に近い条件でのテストも自動化する必要があります。

最後に、テスト結果の可視化と通知機能です。テストの成功・失敗を開発チーム全体で共有し、迅速な対応ができる体制を整えることが重要です。

GitHub Actions での実装

ワークフロー設定

GitHub Actions を使用して Playwright テストを自動化するため、まずワークフローファイルを作成します。プロジェクトのルートディレクトリに.github​/​workflowsフォルダを作成し、YAML 形式でワークフローを定義していきます。

基本的なワークフローファイルの構造は以下のようになります。

yamlCopy codename: Playwright Tests
on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

この設定により、メインブランチや develop ブランチへのプッシュ、およびメインブランチへのプルリクエスト時にテストが実行されるようになります。

次に、実行環境と Node のバージョンを指定します。

yamlCopy codejobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'yarn'

timeout-minutesでタイムアウト時間を設定し、ubuntu-latestで実行環境を指定しています。また、Node のバージョンを固定することで、環境の一貫性を保つことができます。

Playwright テストの実行設定

依存関係のインストールと Playwright ブラウザのセットアップを行います。

yamlCopy code- name: Install dependencies
  run: yarn install --frozen-lockfile

- name: Install Playwright Browsers
  run: npx playwright install --with-deps

--frozen-lockfileオプションを使用することで、yarn.lock ファイルを更新せずに依存関係をインストールでき、再現性の高い環境を構築できます。

続いて、テストの実行コマンドを設定します。

yamlCopy code- name: Run Playwright tests
  run: npx playwright test

環境変数を使用して、テスト実行時の設定をカスタマイズすることも可能です。

yamlCopy code- name: Run Playwright tests
  run: npx playwright test
  env:
    PLAYWRIGHT_TEST_BASE_URL: http://localhost:3000
    CI: true

並列実行の設定

テスト実行時間を短縮するため、Playwright の並列実行機能を活用します。playwright.config.tsファイルで並列実行の設定を行います。

typescriptCopy codeimport { defineConfig } from '@playwright/test';

export default defineConfig({
  // 並列実行するワーカー数を指定
  workers: process.env.CI ? 2 : undefined,

  // 失敗時のリトライ回数
  retries: process.env.CI ? 2 : 0,

  // テストファイル実行時の並列度
  fullyParallel: true,
});

CI 環境では 2 つのワーカーで並列実行し、ローカル環境では制限を設けない設定となっています。また、CI 環境では不安定なテストに対してリトライ機能を有効にしています。

GitHub Actions 側でも並列実行の設定を行うことができます。

yamlCopy codestrategy:
  fail-fast: false
  matrix:
    project: [chromium, firefox, webkit]

steps:
  - name: Run Playwright tests
    run: npx playwright test --project=${{ matrix.project }}

この設定により、異なるブラウザで並列にテストを実行し、全体の実行時間を大幅に短縮できます。

テスト結果の管理

レポート生成

Playwright には豊富なレポート機能が搭載されており、テスト結果を様々な形式で出力できます。playwright.config.tsでレポート設定を行います。

typescriptCopy codeexport default defineConfig({
  // レポート設定
  reporter: [
    ['html', { outputFolder: 'playwright-report' }],
    ['json', { outputFile: 'test-results.json' }],
    ['junit', { outputFile: 'junit-results.xml' }],
  ],

  // テスト結果の保存先
  outputDir: 'test-results/',
});

HTML レポートでは、テストの実行結果やスクリーンショット、動画が統合されたリッチなレポートが生成されます。JSON や JUnit 形式での出力も可能で、他のツールとの連携も容易です。

GitHub Actions でレポート生成を自動化する設定は以下のようになります。

yamlCopy code- name: Run Playwright tests
  run: npx playwright test
  continue-on-error: true

- name: Generate test report
  run: npx playwright show-report --host=0.0.0.0
  if: always()

continue-on-error: trueにより、テストが失敗してもワークフローを継続し、必ずレポートが生成されるようになります。

アーティファクト保存

テスト実行時に生成されるレポートやスクリーンショットをアーティファクトとして保存し、後で確認できるようにします。

yamlCopy code- name: Upload test results
  uses: actions/upload-artifact@v3
  if: always()
  with:
    name: playwright-report
    path: playwright-report/
    retention-days: 30

この設定により、テスト実行後 30 日間、GitHub Actions 上でレポートを確認することができます。

複数のアーティファクトを保存する場合は、以下のように設定します。

yamlCopy code- name: Upload test artifacts
  uses: actions/upload-artifact@v3
  if: always()
  with:
    name: test-artifacts-${{ github.run_number }}
    path: |
      playwright-report/
      test-results/
      screenshots/
    retention-days: 14

スクリーンショット管理

Playwright では、テスト失敗時に自動的にスクリーンショットを撮影する機能があります。設定方法は以下のとおりです。

typescriptCopy codeexport default defineConfig({
  use: {
    // テスト失敗時のスクリーンショット
    screenshot: 'only-on-failure',

    // テスト実行の動画録画
    video: 'retain-on-failure',

    // トレース情報の記録
    trace: 'retain-on-failure',
  },
});

スクリーンショットの保存先とファイル名をカスタマイズすることも可能です。

typescriptCopy code// テストファイル内での設定例
test('ユーザー登録フロー', async ({ page }) => {
  await page.goto('/register');

  // 特定のタイミングでスクリーンショット撮影
  await page.screenshot({
    path: `screenshots/register-${Date.now()}.png`,
    fullPage: true,
  });

  await page.fill('#username', 'testuser');
  await page.fill('#email', 'test@example.com');
  await page.click('#submit');
});

デプロイメント連携

テスト成功時の自動デプロイ

テストが正常に完了した場合のみ、自動でデプロイを実行する設定を行います。複数ジョブを使用して、テストとデプロイを分離します。

yamlCopy codejobs:
  test:
    runs-on: ubuntu-latest
    steps:
      # テスト実行の処理（前述の内容）
      - name: Run Playwright tests
        run: npx playwright test

  deploy:
    needs: test
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main' && success()
    steps:
      - uses: actions/checkout@v3

      - name: Deploy to production
        run: |
          echo "テストが成功したため、本番環境にデプロイします"
          # デプロイコマンドを実行

needs: testにより、テストジョブが成功した場合のみデプロイジョブが実行されます。また、if条件で main ブランチへのプッシュ時のみデプロイが実行されるように制限しています。

より具体的なデプロイ設定の例として、Vercel へのデプロイを示します。

yamlCopy codedeploy:
  needs: test
  runs-on: ubuntu-latest
  if: github.ref == 'refs/heads/main' && success()
  steps:
    - uses: actions/checkout@v3

    - name: Install Vercel CLI
      run: npm install --global vercel@latest

    - name: Deploy to Vercel
      run: vercel --prod --token=${{ secrets.VERCEL_TOKEN }}
      env:
        VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
        VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

失敗時の通知設定

テストやデプロイが失敗した際に、開発チームに迅速に通知する仕組みを構築します。Slack への通知設定を例に説明いたします。

yamlCopy codenotify:
  runs-on: ubuntu-latest
  needs: [test, deploy]
  if: always()
  steps:
    - name: Notify on failure
      if: contains(needs.*.result, 'failure')
      uses: 8398a7/action-slack@v3
      with:
        status: failure
        text: 'CI/CDパイプラインでエラーが発生しました'
      env:
        SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

    - name: Notify on success
      if: contains(needs.*.result, 'success')
      uses: 8398a7/action-slack@v3
      with:
        status: success
        text: 'デプロイが正常に完了しました'
      env:
        SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

より詳細な情報を含む通知を送信することも可能です。

yamlCopy code- name: Detailed failure notification
  if: failure()
  uses: 8398a7/action-slack@v3
  with:
    status: failure
    fields: repo,message,commit,author,action,eventName,ref,workflow
    text: |
      :x: CI/CDパイプラインが失敗しました

      **リポジトリ**: ${{ github.repository }}
      **ブランチ**: ${{ github.ref }}
      **コミット**: ${{ github.sha }}
      **作成者**: ${{ github.actor }}

      詳細を確認してください: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}

GitHub Issues や Pull Request への自動コメント機能も活用できます。

yamlCopy code- name: Comment on PR
  if: failure() && github.event_name == 'pull_request'
  uses: actions/github-script@v6
  with:
    script: |
      github.rest.issues.createComment({
        issue_number: context.issue.number,
        owner: context.repo.owner,
        repo: context.repo.repo,
        body: ':x: Playwrightテストが失敗しました。詳細はActionsのログを確認してください。'
      })

まとめ

Playwright と GitHub Actions を組み合わせた CI/CD パイプラインの構築により、以下のような大きなメリットを得ることができます。

まず、テストの自動化によってソフトウェアの品質を継続的に保つことが可能になります。コードの変更があるたびに自動でテストが実行されるため、バグの早期発見と修正が実現できるでしょう。

また、手動作業の削減により、開発チームの生産性が大幅に向上します。テストやデプロイにかかる時間と人的リソースを他の価値ある作業に集中させることができます。

さらに、並列実行や効率的な設定により、テスト実行時間を最小限に抑えることができ、迅速な開発サイクルを実現できます。

重要なのは、この仕組みを導入した後も継続的に改善していくことです。テスト結果を分析し、不安定なテストの修正や新たなテストケースの追加を行いながら、より堅牢で効率的なパイプラインを構築していきましょう。適切に設定された CI/CD パイプラインは、チーム全体の開発体験を向上させ、高品質なソフトウェアの継続的なデリバリーを可能にしてくれるはずです。

関連リンク

• Playwright 公式ドキュメント
• GitHub Actions 公式ドキュメント
• Playwright CI 設定ガイド
• GitHub Actions Marketplace
• Playwright 設定リファレンス
• Slack Actions for GitHub