クイック スタート: Microsoft Playwright Testing Preview を使用してエンドツーエンドの継続的なテストを設定する

このクイックスタートでは、Microsoft Playwright Testing プレビューを使ってエンド ツー エンドの継続的なテストを設定して、コードのコミットごとに Web アプリが異なるブラウザーとオペレーティング システムで正しく実行されることを検証し、サービス ダッシュボードを使ってテストのトラブルシューティングを簡単に行います。 GitHub Actions、Azure Pipelines、その他の CI プラットフォームなどの継続的インテグレーション (CI) ワークフローに Playwright テストを追加する方法について学習します。

このクイックスタートを終えると、Microsoft Playwright Testing で Playwright テスト スイートを大規模に実行し、テストの簡単なトラブルシューティングに役立つ CI ワークフローができあがります。

重要

Microsoft Playwright Testing は現在、プレビュー段階です。 ベータ版、プレビュー版、または一般提供としてまだリリースされていない Azure の機能に適用される法律条項については、「Microsoft Azure プレビューの追加使用条件」を参照してください。

前提条件

• アクティブなサブスクリプションが含まれる Azure アカウント。 Azure サブスクリプションをお持ちでない場合は、始める前に無料アカウントを作成してください。

• Microsoft Playwright Testing ワークスペース。 Playwright テストの大規模な実行に関するクイックスタートを完了して、ワークスペースを作成します。

GitHub のアクション

• GitHub アカウント。 GitHub アカウントがない場合は、無料で作成できます。
• Playwright テスト仕様と GitHub Actions ワークフローを含む GitHub リポジトリ。 リポジトリを作成する場合は、「新しいリポジトリの作成」を参照してください。
• GitHub Actions ワークフロー。 GitHub Actions の概要に関するヘルプが必要な場合は、最初のワークフローの作成に関するページを参照してください
• GitHub Actions から Azure への認証を設定します。 「GitHub Actions を使用して Azure に接続する」をご覧ください。

Azure Pipelines

• Azure DevOps 組織とプロジェクト。 Azure DevOps 組織がない場合は、無料で作成できます。
• パイプラインの定義。 Azure Pipelines の概要に関するヘルプが必要な場合は、最初のパイプラインの作成に関するページを参照してください。
• Azure Pipelines からサービスへの認証を安全に行うための Azure Resource Manager サービス接続については、Azure Resource Manager サービス接続に関する記事をご覧ください

サービス リージョン エンドポイントの URL を取得する

サービス構成では、リージョン固有のサービス エンドポイントを指定する必要があります。 エンドポイントは、ワークスペースの作成時に選択した Azure リージョンによって異なります。

サービス エンドポイント URL を取得し、CI ワークフロー シークレットとして格納するには、次の手順を行います。

1. Azure アカウントを使用して、Playwright ポータルにサインインします。

2. ワークスペースのホーム ページで、[セットアップ ガイドの表示] 選択します。

   ヒント

   複数のワークスペースがある場合は、ページの上部にあるワークスペース名を選んで別のワークスペースに切り替え、[すべてのワークスペースの管理] を選択できます。

3. [セットアップのリージョン エンドポイントの追加] で、サービス エンドポイント URL をコピーします。

   エンドポイント URL は、ワークスペースの作成時に選択した Azure リージョンと一致します。

4. サービス エンドポイント URL を CI ワークフロー シークレットに格納します。

   シークレット名	値
   PLAYWRIGHT_SERVICE_URL	前にコピーしたエンドポイント URL を貼り付けます。

サービス構成ファイルを追加する

クラウドでホストされているブラウザーで Playwright テストを実行するようにまだ構成していない場合は、リポジトリにサービス構成ファイルを追加します。 次の手順では、Playwright CLI でこのサービス構成ファイルを指定します。

1. playwright.config.ts ファイルと共に新しいファイル playwright.service.config.ts を作成します。

   必要に応じて、サンプル リポジトリの playwright.service.config.ts ファイルを使用します。

2. それに次のコンテンツを追加します。

   import { defineConfig } from '@playwright/test';
   import { getServiceConfig, ServiceOS } from '@azure/microsoft-playwright-testing';
   import config from './playwright.config';
   
   /* Learn more about service configuration at https://aka.ms/mpt/config */
   export default defineConfig(
     config,
     getServiceConfig(config, {
       exposeNetwork: '<loopback>',
           timeout: 30000,
       os: ServiceOS.LINUX,
           useCloudHostedBrowsers: true
     }),
     {
       /* 
       Playwright Testing service reporter is added by default.
       This will override any reporter options specified in the base playwright config.
       If you are using more reporters, please update your configuration accordingly.
       */
       reporter: [['list'], ['@azure/microsoft-playwright-testing/reporter']],
     }
   );
   

   既定では、サービス構成により、次のことが可能になります。

   • クラウドホステッド ブラウザーを使用してテストを並列で実行することで、ビルド パイプラインを高速化します。
   • サービスに発行されたテスト結果と成果物には簡単にアクセスできるため、トラブルシューティングが簡単になります。

   ただし、これらの機能のいずれか、または両方を使用することを選択できます。 サービス機能の使用方法に関する記事を参照し、要件に応じてサービス構成ファイルを更新します。

3. ファイルを保存してソース コード リポジトリにコミットします。

package.json ファイルを更新する

リポジトリの package.json ファイルを更新して、Microsoft Playwright Testing サービス パッケージに関する詳細を devDependencies セクションに追加します。

"devDependencies": {
    "@azure/microsoft-playwright-testing": "^1.0.0-beta.3"
}

Playwright 構成で成果物を有効にする

プロジェクトの playwright.config.ts ファイルで、必要な成果物をすべて収集していることを確認します。

  use: {
    trace: 'on-first-retry',
    video:'retain-on-failure',
    screenshot:'on'
  },

ワークフロー定義を更新する

Playwright CLI を使用して Playwright テストを実行するように CI ワークフロー定義を更新します。 Playwright CLI の入力パラメーターとしてサービス構成ファイルを渡します。 環境変数を指定して、環境を構成します。

1. CI ワークフロー定義を開きます

2. 次の手順を追加して、Microsoft Playwright Testing で Playwright テストを実行します。

   次の手順では、GitHub Actions または Azure Pipelines のワークフローの変更について説明します。 同様に、他の CI プラットフォームで Playwright CLI を使用して、Playwright テストを実行できます。

   GitHub のアクション

   
     # This step is to sign-in to Azure to run tests from GitHub Action workflow. 
     # Choose how to set up authentication to Azure from GitHub Actions. This is one example. 
   - name: Login to Azure with AzPowershell (enableAzPSSession true) 
     uses: azure/login@v2 
     with: 
       client-id: ${{ secrets.AZURE_CLIENT_ID }} 
       tenant-id: ${{ secrets.AZURE_TENANT_ID }}  
       subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}  
       enable-AzPSSession: true 
   
   - name: Install dependencies
       working-directory: path/to/playwright/folder # update accordingly
     run: npm ci
   
   - name: Run Playwright tests
       working-directory: path/to/playwright/folder # update accordingly
     env:
       # Regional endpoint for Microsoft Playwright Testing
       PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
       PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
     run: npx playwright test -c playwright.service.config.ts --workers=20
   
   - name: Upload Playwright report
     uses: actions/upload-artifact@v3
     if: always()
     with:
       name: playwright-report
       path: path/to/playwright/folder/playwright-report/ # update accordingly
       retention-days: 10
   

   Azure Pipelines

   - task: PowerShell@2
     enabled: true
     displayName: "Install dependencies"
     inputs:
       targetType: 'inline'
       script: 'npm ci'
       workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: AzureCLI@2
     displayName: Run Playwright Test  
       env:
       PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
       PLAYWRIGHT_SERVICE_RUN_ID: ${{ parameters.runIdPrefix }}$(Build.DefinitionName) - $(Build.BuildNumber) - $(System.JobAttempt) 
     inputs:
       azureSubscription: My_Service_Connection # Service connection used to authenticate this pipeline with Azure to use the service
       scriptType: 'pscore'
       scriptLocation: 'inlineScript'
       inlineScript: |
         npx playwright test -c playwright.service.config.ts --workers=20
     addSpnToEnvironment: true
     workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: PublishPipelineArtifact@1
     displayName: Upload Playwright report
     inputs:
       targetPath: path/to/playwright/folder/playwright-report/ # update accordingly
       artifact: 'Playwright tests'
       publishLocation: 'pipeline'
   

3. 変更を保存してコミットします。

   CI ワークフローがトリガーされると、クラウドでホストされているブラウザー上の Microsoft Playwright Testing ワークスペースで、20 個の並列ワーカーを使って、Playwright テストが実行されます。

Note

レポート機能は、既存のワークスペースに対して既定で有効になっています。 これは段階的にロールアウトされ、数日かかる予定です。 エラーを回避するには、先に進む前に、ワークスペースの Rich diagnostics using reporting 設定がオンになっていることを確認します。 ワークスペースのレポートの有効化の説明を参照してください。

注意事項

Microsoft Playwright Testing では、テストの分単位の合計時間と発行されたテストの数に基づいて課金されます。 初めてのユーザーの場合、または無料試用版を使い始めている場合は、完全なテスト スイートの代わりに大規模な 1 つのテストを実行して、無料のテスト時間とテスト結果数を使い果たさないようにすることができます。

テストが正常に実行されたことを検証したら、サービスでさらに多くのテストを実行することで、テストの負荷を徐々に増やすことができます。

サービスで 1 つのテストを実行するには、次のコマンド ラインを使用します。

npx playwright test {name-of-file.spec.ts} --config=playwright.service.config.ts

Playwright ポータルでテストの実行と結果を表示する

Playwright ポータルで CI パイプラインのトラブルシューティングができるようになりました。

1. テスト実行が完了すると、Playwright ポータルへのリンクが生成されます。 このリンクを開いて、詳細なテスト結果と関連する成果物を表示します。 ポータルには次のような重要な情報が表示されます。

   • CI ビルドの詳細
   • 全体的なテスト実行の状態
   • テスト実行に関連するコミット ID

   

2. Playwright ポータルには、トラブルシューティングに必要なすべての情報が表示されます。 次のことを実行できます。

   • 再試行を切り替える。
   • 詳細なエラー ログ、テスト手順、および添付された成果物 (スクリーンショットやビデオなど) を表示する。
   • 詳細な分析のためにトレース ビューアーに直接移動する。

   

3. トレース ビューアーを使用すると、テスト実行の手順を視覚的に確認できます。 次のことを実行できます。

   • タイムラインを使用して個々の手順にカーソルを合わせて、各アクションの前後のページの状態を確認する。
   • 手順の詳細なログ、DOM スナップショット、ネットワーク アクティビティ、エラー、コンソール出力を調べる。

   

ヒント

Microsoft Playwright Testing サービス機能は、それだけで使用できます。 クラウドでホストされているブラウザー機能を使わずにテスト結果をポータルに発行でき、クラウドでホストされているブラウザーのみを使って、テスト結果を発行せずにテスト スイートを高速化することもできます。 詳細については、「サービス機能の使用方法」を参照してください。

Note

発行したテスト結果と成果物は、サービスに 90 日間保持されます。 その後、自動的に削除されます。

関連するコンテンツ

クラウドでホストされているブラウザーで Playwright テストを大規模に実行するように、エンド ツー エンドの継続的なテスト ワークフローを正常に設定できました。

• ワークスペースへのアクセス権をユーザーに付与する

• ワークスペースを管理する