CI/CD 統合

この記事では、GitHub Actions および Azure Pipelines で Power Platform Playwright テストの CI/CD 統合を構成する方法について説明します。認証を自動化し、エンドツーエンドのテストを実行し、結果をパイプライン成果物およびテストレポートとして発行します。

前提条件

パイプラインを構成する前に、次の内容を確認してください。

テストユーザーの証明書を含むAzure Key Vault
パイプラインのサービスプリンシパルに、ボールト上でKey Vault Certificate Userロールが付与されました。
パイプラインシークレットまたは変数として格納されているアプリの URL、テナント ID、および電子メール

ローカル証明書のセットアップについては、認証ガイドを参照してください。

GitHub Actions

次の手順では、すべてのプッシュ、プル要求、またはスケジュールされたトリガーで Power Platform Playwright テストを実行するように、GitHub Actions ワークフローを構成します。

シークレットを格納する

リポジトリで、[ 設定] → [シークレットと変数] → [アクション] に移動し、次の項目を追加します。

シークレット	説明
`MS_AUTH_EMAIL`	テストユーザーアカウントの電子メール
`AZURE_KEYVAULT_URL`	Key Vault URL (`https://<vault>.vault.azure.net/`)
`AZURE_CERTIFICATE_NAME`	Key Vaultの証明書の名前
`AZURE_TENANT_ID`	Microsoft Entra テナント ID
`CANVAS_APP_URL`	キャンバスアプリの再生モードの完全なURL
`MODEL_DRIVEN_APP_URL`	モデル駆動型アプリの完全な URL

ワークフローファイル

.github/workflows/e2e.ymlを作成します。

name: Power Platform E2E Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
  schedule:
    - cron: '0 6 * * 1-5'  # Weekdays at 6 AM UTC

jobs:
  e2e:
    runs-on: ubuntu-latest
    timeout-minutes: 60

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install Rush dependencies
        run: node common/scripts/install-run-rush.js install

      - name: Build toolkit
        run: node common/scripts/install-run-rush.js build --to power-platform-playwright-toolkit

      - name: Install Playwright browsers
        working-directory: packages/e2e-tests
        run: npx playwright install chromium --with-deps

      - name: Authenticate to Power Platform (Canvas)
        working-directory: packages/e2e-tests
        env:
          MS_AUTH_EMAIL: ${{ secrets.MS_AUTH_EMAIL }}
          MS_AUTH_CREDENTIAL_TYPE: certificate
          MS_AUTH_CREDENTIAL_PROVIDER: azure-keyvault
          AZURE_KEYVAULT_URL: ${{ secrets.AZURE_KEYVAULT_URL }}
          AZURE_CERTIFICATE_NAME: ${{ secrets.AZURE_CERTIFICATE_NAME }}
          AZURE_TENANT_ID: ${{ secrets.AZURE_TENANT_ID }}
          CANVAS_APP_URL: ${{ secrets.CANVAS_APP_URL }}
          MODEL_DRIVEN_APP_URL: ${{ secrets.MODEL_DRIVEN_APP_URL }}
        run: npm run auth

      - name: Authenticate to Power Platform (MDA)
        working-directory: packages/e2e-tests
        env:
          MS_AUTH_EMAIL: ${{ secrets.MS_AUTH_EMAIL }}
          MS_AUTH_CREDENTIAL_TYPE: certificate
          MS_AUTH_CREDENTIAL_PROVIDER: azure-keyvault
          AZURE_KEYVAULT_URL: ${{ secrets.AZURE_KEYVAULT_URL }}
          AZURE_CERTIFICATE_NAME: ${{ secrets.AZURE_CERTIFICATE_NAME }}
          AZURE_TENANT_ID: ${{ secrets.AZURE_TENANT_ID }}
          MODEL_DRIVEN_APP_URL: ${{ secrets.MODEL_DRIVEN_APP_URL }}
        run: npm run auth:mda

      - name: Run Playwright tests
        working-directory: packages/e2e-tests
        env:
          MS_AUTH_EMAIL: ${{ secrets.MS_AUTH_EMAIL }}
          CANVAS_APP_URL: ${{ secrets.CANVAS_APP_URL }}
          MODEL_DRIVEN_APP_URL: ${{ secrets.MODEL_DRIVEN_APP_URL }}
          CUSTOM_PAGE_NAME: AccountsCustomPage
          CI: true
        run: npx playwright test

      - name: Upload test results
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: playwright-report
          path: packages/e2e-tests/playwright-report/
          retention-days: 30

      - name: Upload JUnit results
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: test-results
          path: packages/e2e-tests/test-results/
          retention-days: 30

GitHub Actionsでテスト結果を発行する

PR チェックビューにテスト結果を表示するには、テストの実行後に JUnit レポーターステップを追加します。

      - name: Publish test results
        if: always()
        uses: dorny/test-reporter@v1
        with:
          name: Playwright Tests
          path: packages/e2e-tests/test-results/results.xml
          reporter: java-junit

Azure Pipelines

次の手順では、再利用可能なテンプレートを使用してAzure Pipelines定義を構成し、Power Platform Playwright テストを実行します。

変数グループ

power-platform-e2e-secrets にという名前の変数グループを作成し、上記の GitHub Actions シークレットテーブルと同じ変数を追加します。

パイプラインの定義

.azure-pipelines/e2e-tests.ymlを作成します。

trigger:
  branches:
    include:
      - main

pr:
  branches:
    include:
      - main

schedules:
  - cron: '0 6 * * 1-5'
    displayName: Weekday morning run
    branches:
      include:
        - main

pool:
  vmImage: ubuntu-latest

variables:
  - group: power-platform-e2e-secrets
  - name: NODE_VERSION
    value: '20'

stages:
  - stage: E2E
    displayName: End-to-End Tests
    jobs:
      - job: PlaywrightTests
        displayName: Power Platform Playwright Tests
        timeoutInMinutes: 60
        steps:
          - template: steps/e2e-setup.yml

          - task: Bash@3
            displayName: Authenticate (Canvas)
            env:
              MS_AUTH_EMAIL: $(MS_AUTH_EMAIL)
              MS_AUTH_CREDENTIAL_TYPE: certificate
              MS_AUTH_CREDENTIAL_PROVIDER: azure-keyvault
              AZURE_KEYVAULT_URL: $(AZURE_KEYVAULT_URL)
              AZURE_CERTIFICATE_NAME: $(AZURE_CERTIFICATE_NAME)
              AZURE_TENANT_ID: $(AZURE_TENANT_ID)
              CANVAS_APP_URL: $(CANVAS_APP_URL)
              MODEL_DRIVEN_APP_URL: $(MODEL_DRIVEN_APP_URL)
            script: |
              cd packages/e2e-tests
              npm run auth

          - task: Bash@3
            displayName: Authenticate (MDA)
            env:
              MS_AUTH_EMAIL: $(MS_AUTH_EMAIL)
              MS_AUTH_CREDENTIAL_TYPE: certificate
              MS_AUTH_CREDENTIAL_PROVIDER: azure-keyvault
              AZURE_KEYVAULT_URL: $(AZURE_KEYVAULT_URL)
              AZURE_CERTIFICATE_NAME: $(AZURE_CERTIFICATE_NAME)
              AZURE_TENANT_ID: $(AZURE_TENANT_ID)
              MODEL_DRIVEN_APP_URL: $(MODEL_DRIVEN_APP_URL)
            script: |
              cd packages/e2e-tests
              npm run auth:mda

          - task: Bash@3
            displayName: Run Playwright Tests
            env:
              MS_AUTH_EMAIL: $(MS_AUTH_EMAIL)
              CANVAS_APP_URL: $(CANVAS_APP_URL)
              MODEL_DRIVEN_APP_URL: $(MODEL_DRIVEN_APP_URL)
              CUSTOM_PAGE_NAME: AccountsCustomPage
              CI: 'true'
            script: |
              cd packages/e2e-tests
              npx playwright test

          - template: steps/e2e-publish-results.yml

再利用可能なセットアップステップテンプレート

.azure-pipelines/steps/e2e-setup.ymlを作成します。

steps:
  - task: NodeTool@0
    displayName: Install Node.js
    inputs:
      versionSpec: $(NODE_VERSION)

  - task: Bash@3
    displayName: Install Rush dependencies
    script: node common/scripts/install-run-rush.js install

  - task: Bash@3
    displayName: Build toolkit
    script: node common/scripts/install-run-rush.js build --to power-platform-playwright-toolkit

  - task: Bash@3
    displayName: Install Playwright browsers
    script: |
      cd packages/e2e-tests
      npx playwright install chromium --with-deps

再利用可能な発行結果テンプレート

.azure-pipelines/steps/e2e-publish-results.ymlを作成します。

steps:
  - task: PublishTestResults@2
    displayName: Publish JUnit test results
    condition: always()
    inputs:
      testResultsFormat: JUnit
      testResultsFiles: packages/e2e-tests/test-results/results.xml
      testRunTitle: Power Platform Playwright Tests

  - task: PublishPipelineArtifact@1
    displayName: Publish Playwright report
    condition: always()
    inputs:
      targetPath: packages/e2e-tests/playwright-report
      artifact: playwright-report
      publishLocation: pipeline

CI/CD パイプラインエラーのトラブルシューティング

次の表を使用して、CI パイプラインで Playwright テストを実行するときの一般的な問題を診断して解決します。

症状:	Resolution
認証手順が証明書エラーで失敗する	Key VaultのURL、証明書名、パイプラインSPロールを確認する
CI での最初の実行でテストが失敗する	`retries`を 1 に増やし、不安定なセレクターを確認する
アーティファクトが公開されていません	`if: always()` / `condition: always()`が設定されていることを確認する
パイプラインがタイムアウトする	テスト数を減らすか`timeoutInMinutes`を増やす
`Cannot find module` エラー	テストを実行する前にツールキットのビルドステップを実行する

次の方法で共有

CI/CD 統合

前提条件

GitHub Actions

シークレットを格納する

ワークフロー ファイル

GitHub Actionsでテスト結果を発行する

Azure Pipelines

変数グループ

パイプラインの定義

再利用可能なセットアップ ステップ テンプレート

再利用可能な発行結果テンプレート

CI/CD パイプラインエラーのトラブルシューティング

次のステップ

こちらも参照ください

フィードバック

その他のリソース

ワークフローファイル

再利用可能なセットアップステップテンプレート