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

[アーティクル]
11/19/2024

このクイックスタートでは、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 のアクション
Azure Pipelines

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

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

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

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

Azure アカウントを使用して、Playwright ポータルにサインインします。
ワークスペースのホームページで、[セットアップガイドの表示] 選択します。

ヒント

複数のワークスペースがある場合は、ページの上部にあるワークスペース名を選んで別のワークスペースに切り替え、[すべてのワークスペースの管理] を選択できます。
[セットアップのリージョンエンドポイントの追加] で、サービスエンドポイント URL をコピーします。

エンドポイント URL は、ワークスペースの作成時に選択した Azure リージョンと一致します。
サービスエンドポイント URL を CI ワークフローシークレットに格納します。

シークレット名値

PLAYWRIGHT_SERVICE_URL 前にコピーしたエンドポイント URL を貼り付けます。

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

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

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

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

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

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

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']],
  }
);

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

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

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

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

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'
  },

サービス構成を設定する

自分のプロジェクトのルートディレクトリに、PlaywrightServiceSetup.cs という新しいファイルを作成します。このファイルにより、サービスを使用したクライアントの認証が容易になります。

次の内容を追加します。

using Azure.Developer.MicrosoftPlaywrightTesting.NUnit;
using NUnit.Framework;

namespace PlaywrightTests; // Remember to change this as per your project namespace

[SetUpFixture]
public class PlaywrightServiceSetup : PlaywrightServiceNUnit { };

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

プロジェクトの .csproj ファイルを更新する

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

  <ItemGroup>
    <PackageReference Include="Azure.Developer.MicrosoftPlaywrightTesting.NUnit" Version="1.0.0-beta.2" />
  </ItemGroup>

プロジェクトの `.runsettings` ファイルを追加または更新します。

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

新しい .runsettings ファイルを作成します。

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

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

<?xml version="1.0" encoding="utf-8"?>
<RunSettings>
    <TestRunParameters>
        <!-- The below parameters are optional -->
        <Parameter name="Os" value="linux" />
        <!--<Parameter name="RunId" value="sample-run-id1" />-->
        <Parameter name="ServiceAuthType" value="EntraId" />
        <Parameter name="UseCloudHostedBrowsers" value="true" />
        <Parameter name="AzureTokenCredentialType" value="DefaultAzureCredential" />
        <!--<Parameter name="ManagedIdentityClientId" value="{clientId-value}" />-->
        <Parameter name="EnableGitHubSummary" value="false" />
        <!--<Parameter name="ExposeNetwork" value="*" />-->
    </TestRunParameters>
  <!-- NUnit adapter -->  
  <NUnit>
    <!-- Adjust parallel workers, parallel worker would also be bound by number of unit test files -->
    <NumberOfTestWorkers>10</NumberOfTestWorkers>
  </NUnit>
  <!-- General run configuration -->
  <RunConfiguration>
    <EnvironmentVariables>
      <!-- For debugging selectors, it's recommend to set the following environment variable -->
        <!--<DEBUG>pw:api*</DEBUG>--> 
    </EnvironmentVariables>
  </RunConfiguration>
  <!-- Playwright -->  
  <Playwright>
    <BrowserName>chromium</BrowserName>
    <ExpectTimeout>5000</ExpectTimeout>
    <LaunchOptions>
      <Headless>false</Headless>
      <!--Channel>msedge</Channel-->
    </LaunchOptions>
  </Playwright>
    <LoggerRunSettings>
        <Loggers>
            <!--microsoft playwright testing service logger for reporting -->
            <Logger friendlyName="microsoft-playwright-testing" enabled="True" />
            <!--could enable any logger additionally -->
            <Logger friendlyName="trx" enabled="false" />
        </Loggers>
    </LoggerRunSettings>
</RunSettings>

このファイルの設定により、次のことを行うことができます。

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

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

Playwright セットアップで成果物を有効にする

スクリーンショット、ビデオ、トレースなどの成果物を Playwright でキャプチャできるようにします。

スクリーンショットについては、スクリーンショットのキャプチャに関するページを参照してください
ビデオについては、テストのビデオ記録に関するページを参照してください
トレースについては、トレースの記録に関するページを参照してください

これらのアーティファクトを収集したら、TestContext に添付し、テストレポートで使用できるようにします。詳細については、NUnit のサンプルプロジェクトに関するページを参照してください

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

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

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

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

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

GitHub のアクション
Azure Pipelines


  # 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. 
on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
permissions: # Required when using Microsoft Entra ID to authenticate
  id-token: write
  contents: read
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
      steps:
      - uses: actions/checkout@v4    
- 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

- 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'

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

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

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

GitHub のアクション
Azure Pipelines

on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
permissions: # Required when using AuthType as EntraId
  id-token: write
  contents: read
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
      steps:
      - uses: actions/checkout@v4
    # 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: Setup .NET
        uses: actions/setup-dotnet@v4
        with:
          dotnet-version: 8.0.x

      - name: Restore dependencies
        run: dotnet restore
        working-directory: path/to/playwright/folder # update accordingly

      - name: Build
        run: dotnet build --no-restore
        working-directory: path/to/playwright/folder # update accordingly

      - 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: dotnet test --settings:.runsettings --logger "microsoft-playwright-testing" -- NUnit.NumberOfTestWorkers=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

- task: UseDotNet@2
  inputs:
    packageType: 'sdk'
    version: '8.x'
    installationPath: $(Agent.ToolsDirectory)/dotnet

- checkout: self

- script: dotnet restore
  displayName: 'Restore dependencies'
  workingDirectory: path/to/playwright/folder # update accordingly

- script: dotnet build --no-restore
  displayName: 'Build'
  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: |
      dotnet test --settings:.runsettings --logger "microsoft-playwright-testing" -- NUnit.NumberOfTestWorkers=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'

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

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 パイプラインのトラブルシューティングができるようになりました。

テスト実行が完了すると、Playwright ポータルへのリンクが生成されます。このリンクを開いて、詳細なテスト結果と関連する成果物を表示します。ポータルには次のような重要な情報が表示されます。
- CI ビルドの詳細
- 全体的なテスト実行の状態
- テスト実行に関連するコミット ID
Playwright ポータルには、トラブルシューティングに必要なすべての情報が表示されます。次のことを実行できます。
- 再試行を切り替える。
- 詳細なエラーログ、テスト手順、および添付された成果物 (スクリーンショットやビデオなど) を表示する。
- 詳細な分析のためにトレースビューアーに直接移動する。
トレースビューアーを使用すると、テスト実行の手順を視覚的に確認できます。次のことを実行できます。
- タイムラインを使用して個々の手順にカーソルを合わせて、各アクションの前後のページの状態を確認する。
- 手順の詳細なログ、DOM スナップショット、ネットワークアクティビティ、エラー、コンソール出力を調べる。

ヒント

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

Note

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

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

次の方法で共有

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

前提条件

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

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

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

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

サービス構成を設定する

プロジェクトの .csproj ファイルを更新する

プロジェクトの `.runsettings` ファイルを追加または更新します。

Playwright セットアップで成果物を有効にする

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

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

フィードバック

その他のリソース

次の方法で共有

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

前提条件

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

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

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

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

サービス構成を設定する

プロジェクトの .csproj ファイルを更新する

プロジェクトの .runsettings ファイルを追加または更新します。

Playwright セットアップで成果物を有効にする

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

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

関連するコンテンツ

フィードバック

その他のリソース

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

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

プロジェクトの `.runsettings` ファイルを追加または更新します。