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

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

このクイックスタートを完了すると、Playwright テストスイートを大規模に実行し、Playwright ワークスペースでテストのトラブルシューティングを簡単に行える CI ワークフローが完成します。

[前提条件]

アクティブなサブスクリプションを持つ Azure アカウント。 Azure サブスクリプションをお持ちでない場合は、開始する前に無料アカウントを作成してください。
Playwright ワークスペース。 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 アカウントで Azure portal にサインインし、ワークスペースに移動します。
[ 作業の開始 ] ページを選択します。
[セットアップのリージョンエンドポイントの追加] で、サービスエンドポイント URL をコピーします。

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

シークレット名価値

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

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

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

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

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

必要に応じて、playwright.service.config.tsのファイルを使用します。

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

import { defineConfig } from '@playwright/test';
import { createAzurePlaywrightConfig, ServiceOS } from '@azure/playwright';
import { DefaultAzureCredential } from '@azure/identity';
import config from './playwright.config';

/* Learn more about service configuration at https://aka.ms/pww/docs/config */
export default defineConfig(
  config,
  createAzurePlaywrightConfig(config, {
    exposeNetwork: '<loopback>',
    connectTimeout: 3 * 60 * 1000, // 3 minutes
    os: ServiceOS.LINUX,
    credential: new DefaultAzureCredential(),
  })
);

既定では、サービス構成を使用すると、クラウドでホストされているブラウザーを使用してテストを並列で実行することで、ビルドパイプラインを高速化できます。

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

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

リポジトリ内の package.json ファイルを更新して、playwright Workspaces パッケージの詳細 devDependencies セクションに追加します。

"devDependencies": {
    "@azure/playwright": "latest"
}

サービスパッケージをインストールする

プロジェクトに Playwright Workspaces パッケージをインストールします。

dotnet add package Azure.Developer.Playwright.NUnit

このコマンドは、サービスパッケージの詳細を csproj セクションに追加して、プロジェクトの ItemGroup ファイルを更新します。この変更をコミットすることを忘れないでください。

  <ItemGroup>
    <PackageReference Include="Azure.Developer.Playwright.NUnit" Version="1.0.0" />
  </ItemGroup>

サービス構成を設定する

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

using Azure.Developer.Playwright.NUnit;
using Azure.Identity;
using System.Runtime.InteropServices;
using System;

namespace PlaywrightService.SampleTests; // Remember to change this as per your project namespace

[SetUpFixture]
public class PlaywrightServiceNUnitSetup : PlaywrightServiceBrowserNUnit
{
    public PlaywrightServiceNUnitSetup() : base(
        credential: new DefaultAzureCredential(),
    )
    {
        // no-op
    }
}

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

認証を設定する

Playwright テストを実行している CI マシンは、Playwright Workspaces サービスで認証して、ブラウザーでテストを実行できるようにする必要があります。

このサービスには、2 つの認証方法 (Microsoft Entra ID とアクセストークン) が用意されています。パイプラインの認証には、Microsoft Entra ID を使うことを強くお勧めします。

GitHub Actions をお使いの場合は、GitHub OpenID Connect を使ってサービスに接続できます。手順に従って統合を設定します。

[前提条件]

オプション 1: Microsoft Entra アプリケーション

Azure portal、Azure CLI、または Azure PowerShell で、サービスプリンシパルを使って Microsoft Entra アプリケーションを作成します。
後で GitHub Actions ワークフローで使うため、クライアント ID、サブスクリプション ID、ディレクトリ (テナント) ID の値をコピーしておきます。
前のステップで作成したサービスプリンシパルに、Owner または Contributor ロールを割り当てます。これらのロールは、Playwright ワークスペースに割り当てる必要があります。詳しくは、アクセスの管理方法に関する記事をご覧ください。
GitHub Actions により GitHub リポジトリに対して発行されたトークンを信頼するように、Microsoft Entra アプリケーションでフェデレーション ID 資格情報を構成します。

オプション 2: ユーザー割り当てマネージド ID

「ユーザー割り当てマネージド ID を作成する」の手順を使用して、ユーザー割り当てマネージド ID を作成します。
後で GitHub Actions ワークフローで使うため、クライアント ID、サブスクリプション ID、ディレクトリ (テナント) ID の値をコピーしておきます。
前のステップで作成したユーザー割り当てマネージド ID に、Owner または Contributor ロールを割り当てます。これらのロールは、Playwright ワークスペースに割り当てる必要があります。詳しくは、アクセスの管理方法に関する記事をご覧ください。
GitHub Actions により GitHub リポジトリに対して発行されたトークンを信頼するように、ユーザー割り当てマネージド ID でフェデレーション ID 資格情報を構成します。

GitHub シークレットを作成する

前のステップで取得した値を、シークレットとして GitHub リポジトリに追加します。 GitHub アクションシークレットの設定に関する記事をご覧ください。この後の手順では、これらの変数が GitHub アクションワークフローで使われます。

GitHub シークレット	ソース (Microsoft Entra アプリケーションまたはマネージド ID)
`AZURE_CLIENT_ID`	クライアントID
`AZURE_SUBSCRIPTION_ID`	サブスクリプション ID
`AZURE_TENANT_ID`	ディレクトリ (テナント) ID

注

セキュリティを強化するため、機密性の高い値は、ワークフローファイルに直接含めるのではなく、GitHub Secrets を使って格納することを強くお勧めします。

アクセストークンを使用して認証を設定します

注意事項

サービスへの認証には Microsoft Entra ID を使用することを強くお勧めします。アクセストークンをお使いの場合は、アクセストークンの管理方法に関する記事をご覧ください。

Playwright ワークスペースからアクセストークンを生成し、セットアップで使用できます。ただし、強化されたセキュリティのため、認証には Microsoft Entra ID を使用することを強くお勧めします。アクセストークンは便利ですが、有効期間が長いパスワードのように機能し、侵害されやすくなります。

アクセストークンを使用した認証は、既定では無効になっています。使うには、アクセストークンベースの認証を有効にします。
アクセストークンを使って認証を設定します。
アクセストークンを CI ワークフローシークレットに格納し、GitHub Actions ワークフローまたは Azure パイプラインの yaml ファイルでそれを使います。

シークレット名	価値
PLAYWRIGHT_SERVICE_ACCESS_TOKEN	前に作成したアクセストークンの値を貼り付けます。

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

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

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

Playwright ワークスペースで 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. 
  name: Playwright Tests (Playwright Workspaces)
  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 }} # GitHub Open ID connect values copied in previous steps
            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 Playwright Workspaces
            PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
            # PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }} # Not recommended, use Microsoft Entra ID authentication. 
          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_ACCESS_TOKEN: $(PLAYWRIGHT_SERVICE_ACCESS_TOKEN) # Not recommended, use Microsoft Entra ID authentication. 

  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 ワークフロー定義を更新します。環境変数を指定して、環境を構成します。

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

Playwright ワークスペースで 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 }} # GitHub Open ID connect values copied in previous steps
          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 Playwright Workspaces
          PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
          # PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }} # Not recommended, use Microsoft Entra ID authentication. 
        run: dotnet test -- 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_ACCESS_TOKEN: $(PLAYWRIGHT_SERVICE_ACCESS_TOKEN) # Not recommended, use Microsoft Entra ID authentication. 

  inputs:
    azureSubscription: My_Service_Connection # Service connection used to authenticate this pipeline with Azure to use the service using Microsoft Entra ID.
    scriptType: 'pscore'
    scriptLocation: 'inlineScript'
    inlineScript: |
      dotnet test -- 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 ワークフローがトリガーされると、Playwright テストは、クラウドでホストされているブラウザー上の Playwright ワークスペースで、20 個の並列ワーカーにわたって実行されます。結果はサービスに発行され、Azure portal で表示できます。

注意事項

Playwright ワークスペースでは、使用されたテストの合計分数に基づいて課金されます。初めてのユーザーまたは無料試用版の使用を開始する場合は、完全なテストスイートではなく大規模な 1 つのテストの実行から始めて、無料のテスト時間を使い果たさないようにすることができます。

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

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

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

テストの実行と結果を表示する

Playwright は、すべてのテスト実行でログ、トレース、スクリーンショットなどの豊富なテスト成果物を収集できます。 CI パイプライン内でテスト成果物を表示する方法については、 Playwright のドキュメントを参照してください。

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

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-08-07

次の方法で共有

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

[前提条件]

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

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

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

サービス パッケージをインストールする

サービス構成を設定する

認証を設定する

Microsoft Entra ID を使用して認証を設定する

[前提条件]

GitHub シークレットを作成する

アクセス トークンを使用して認証を設定します

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

テストの実行と結果を表示する

関連コンテンツ

フィードバック

その他のリソース

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

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

サービスパッケージをインストールする

アクセストークンを使用して認証を設定します