クイックスタート: Microsoft Playwright Testing (プレビュー) を使用して、大規模なエンドツーエンドテストを実行する

[アーティクル]
05/21/2024

このクイックスタートでは、Microsoft Playwright Testing (プレビュー) を使用して高度に並列的なクラウドブラウザーで Playwright テストを実行する方法について学習します。クラウドインフラストラクチャを使用して、複数のブラウザー、デバイス、オペレーティングシステムにわたってアプリケーションを検証します。

このクイックスタートを完了すると、大規模な Playwright テストを実行するための Microsoft Playwright Testing ワークスペースが完成します。

重要

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

前提条件

アクティブなサブスクリプションが含まれる Azure アカウント。 Azure サブスクリプションをお持ちでない場合は、始める前に無料アカウントを作成してください。
Azure アカウントには、所有者、共同作成者、または従来の管理者の役割のいずれかが必要です。
Playwright プロジェクト。プロジェクトがない場合は、Playwright 入門ドキュメントを使用してプロジェクトを作成するか、Microsoft Playwright Testing サンプルプロジェクトを使用します。

ワークスペースの作成

クラウドブラウザーで大規模な Playwright テストの実行を開始するには、まず Playwright ポータルで Microsoft Playwright Testing ワークスペースを作成します。

Azure アカウントを使用して、Playwright ポータルにサインインします。
ワークスペースが既にある場合は、既存のワークスペースを選択し、次の手順に進みます。

ヒント

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

まだワークスペースがない場合は、[+ 新しいワークスペース] を選択し、次の情報を入力します。

フィールド	説明
ワークスペース名	ワークスペースを識別する一意の名前を入力します。名前には英数字のみを使用できます。また、3 から 64 文字の間で指定する必要があります。
Azure サブスクリプション	この Microsoft Playwright Testing ワークスペースに使用する Azure サブスクリプションを選択します。
リージョン	ワークスペースをホストする地理的な場所を選択します。これは、ワークスペースのテストの実行データが保存される場所です。

[ワークスペースの作成] を選択して、サブスクリプションにワークスペースを作成します。

ワークスペースの作成時に、新しいリソースグループと Microsoft Playwright Testing Azure リソースが Azure サブスクリプションに作成されます。

ワークスペースの作成が完了すると、セットアップガイドにリダイレクトされます。

サービス認証用のアクセストークンを作成する

Microsoft Playwright Testing では、アクセストークンを使用して、ユーザーがサービスで Playwright テストを実行することを承認します。まず、Playwright ポータルでサービスアクセストークンを生成し、その値を環境変数に保存します。

アクセストークンを生成するには、次の手順を実行します。

ワークスペースのセットアップガイドの [アクセストークンを作成する] で [トークンの生成] を選択します。
ワークスペースのアクセストークンをコピーします。

アクセストークンの値は、後の手順で環境を構成するときに必要です。

サービスリージョンエンドポイントを構成する

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

サービスエンドポイント URL を取得するには、次の手順を実行します。

[セットアップのリージョンエンドポイントの追加] で、ワークスペースのリージョンエンドポイントをコピーします。

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

環境を設定する

環境を設定するには、前の手順で取得した値を使用して PLAYWRIGHT_SERVICE_ACCESS_TOKEN 環境変数と PLAYWRIGHT_SERVICE_URL 環境変数を構成する必要があります。

dotenv モジュールを使用して環境を管理することをお勧めします。 dotenv を使用して、.env ファイルで環境変数を定義します。

dotenv モジュールをプロジェクトに追加します。
```
npm i --save-dev dotenv
```
Playwright プロジェクト内の playwright.config.ts ファイルと共に .env ファイルを作成します。
```
PLAYWRIGHT_SERVICE_ACCESS_TOKEN={MY-ACCESS-TOKEN}
PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
```
{MY-ACCESS-TOKEN} と {MY-REGION-ENDPOINT} テキストプレースホルダーを、先程コピーした値に置き換えてください。

注意事項

アクセストークン値が漏洩しないように、.env ファイルはソースコードリポジトリに追加しないようにしてください。

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

Microsoft Playwright Testing ワークスペースで Playwright テストを実行するには、Playwright 構成ファイルと一緒にサービス構成ファイルを追加する必要があります。サービス構成ファイルは環境変数を参照して、ワークスペースエンドポイントとアクセストークンを取得します。

サービス構成をプロジェクトに追加するには:

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

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

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

/*
* This file enables Playwright client to connect to remote browsers.
* It should be placed in the same directory as playwright.config.ts.
*/

import { defineConfig } from '@playwright/test';
import config from './playwright.config';
import dotenv from 'dotenv';

// Define environment on the dev box in .env file:
//  .env:
//    PLAYWRIGHT_SERVICE_ACCESS_TOKEN=XXX
//    PLAYWRIGHT_SERVICE_URL=XXX

// Define environment in your GitHub workflow spec.
//  env:
//    PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
//    PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
//    PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}

dotenv.config();

// Name the test run if it's not named yet.
process.env.PLAYWRIGHT_SERVICE_RUN_ID = process.env.PLAYWRIGHT_SERVICE_RUN_ID || new Date().toISOString();

// Can be 'linux' or 'windows'.
const os = process.env.PLAYWRIGHT_SERVICE_OS || 'linux';

export default defineConfig(config, {
  // Define more generous timeout for the service operation if necessary.
  // timeout: 60000,
  // expect: {
  //   timeout: 10000,
  // },
  workers: 20,

  // Enable screenshot testing and configure directory with expectations.
  // https://learn.microsoft.com/azure/playwright-testing/how-to-configure-visual-comparisons
  ignoreSnapshots: false,
  snapshotPathTemplate: `{testDir}/__screenshots__/{testFilePath}/${os}/{arg}{ext}`,
  
  use: {
    // Specify the service endpoint.
    connectOptions: {
      wsEndpoint: `${process.env.PLAYWRIGHT_SERVICE_URL}?cap=${JSON.stringify({
        // Can be 'linux' or 'windows'.
        os,
        runId: process.env.PLAYWRIGHT_SERVICE_RUN_ID
      })}`,
      timeout: 30000,
      headers: {
        'x-mpt-access-key': process.env.PLAYWRIGHT_SERVICE_ACCESS_TOKEN!
      },
      // Allow service to access the localhost.
      exposeNetwork: '<loopback>'
    }
  },
  // Tenmp workaround for config merge bug in OSS https://github.com/microsoft/playwright/pull/28224
  projects: config.projects? config.projects : [{}]
});

ファイルを保存します。

Microsoft Playwright Testing を使用して大規模なテストを実行する

これで、Microsoft Playwright Testing を使用してクラウドで Playwright テストを実行するための構成の準備ができました。 Playwright CLI を使用してテストを実行するか、Playwright Test Visual Studio Code 拡張機能を使用できます。

1 つのテストを大規模に実行する

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

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

次の手順を使用して、Microsoft Playwright Testing で 1 つの Playwright テストを実行します。

Playwright CLI
Visual Studio Code

Playwright CLI を使用して Microsoft Playwright Testing でテストを実行するには、コマンドラインパラメーターとしてサービス構成ファイルを渡します。

ターミナルウィンドウを開きます。
次のコマンドを入力して、ワークスペース内のリモートブラウザーで Playwright テストを実行します。

{name-of-file.spec.ts} テキストプレースホルダーをテスト仕様ファイルの名前に置き換えます。
```
npx playwright test {name-of-file.spec.ts} --config=playwright.service.config.ts
```
テストが完了したら、ターミナルでテストの状態を表示できます。
```
Running 1 test using 1 worker
    1 passed (2.2s)

To open last HTML report run:

npx playwright show-report
```

Microsoft Playwright Testing を使用して Visual Studio Code で 1 つの Playwright テストを実行するには、[テストリストエディター] ビューでサービス構成ファイルを選択します。次に、テストの一覧からテストを選択して実行します。

Playwright Test Visual Studio Code 拡張機能をインストールします。
アクティビティバーでテストエクスプローラー ビューを開きます。

テストリストエディターによって、プロジェクト内の Playwright テストとサービス構成が自動的に検出されます。
[既定のプロファイルの選択] を選択し、サービス構成ファイルから既定のプロジェクトを選択します。

サービス実行プロファイルは、前に追加した playwright.service.config.ts ファイルから取得されていることに注意してください。

既定のプロファイルを設定すると、サービスでテストを自動的に実行したり、複数の Playwright プロジェクトを同時に実行したりできます。
テストの一覧から、テストの横にある [テストの実行] ボタンを選択して実行します。

テストは、既定のプロファイルで選択したプロジェクトで実行されます。サービス構成から 1 つ以上のプロジェクトを選択した場合、テストはワークスペース内のリモートブラウザーで実行されます。

ヒント

リモートブラウザーでテストを実行するときにも、[テストのデバッグ] ボタンを使用してテストコードをデバッグできます。
テスト結果は Visual Studio Code で直接表示できます。

これで、サービスで複数のテストを実行したり、リモートブラウザーでテストスイート全体を実行したりできるようになりました。

注意事項

テストスイートのサイズによっては、割り当てられた無料テスト分数を超えてテスト分数の追加料金が発生する場合があります。

完全なテストスイートを大規模に実行する

Microsoft Playwright Testing で 1 つのテストを実行できることを検証したので、完全な Playwright テストスイートを大規模に実行できます。

Microsoft Playwright Testing で完全な Playwright テストスイートを実行するには、次の手順を使用します。

Playwright CLI
Visual Studio Code

Microsoft Playwright Testing を使用して複数の Playwright テストまたは完全なテストスイートを実行する場合は、必要に応じて、コマンドラインパラメーターとして並列 worker の数を指定できます。

ターミナルウィンドウを開きます。
次のコマンドを入力して、ワークスペース内のリモートブラウザーで Playwright テストスイートを実行します。
```
npx playwright test --config=playwright.service.config.ts --workers=20
```
このコマンドを実行すると、テストスイートのサイズに応じて、最大 20 個の並列ワーカーでテストが実行されます。

テストが完了したら、ターミナルでテストの状態を表示できます。
```
Running 6 tests using 6 workers
    6 passed (18.2s)

To open last HTML report run:

    npx playwright show-report
```

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

Playwright ポータルに移動して、ワークスペースのテスト実行メタデータとアクティビティログを表示します。

アクティビティログには、各テスト実行のテスト完了までの合計時間、並列ワーカーの数、テスト時間 (分) などの詳細が表示されます。

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

Microsoft Playwright Testing で、Playwright ポータルでのテスト結果の表示がサポートされるようになりました。この機能は招待者限定の機能としてのみ利用できます。

重要

Microsoft Playwright Testing サービスのレポート機能は、招待者限定プレビュー期間中は無料です。ただし、クラウドでホストされているブラウザーの既存の機能は、Azure の価格プランに従って引き続き課金されます。

テスト結果にアクセスできるようになったら、次の手順を使用してテストを設定します。

ワークスペースのホームページから、[設定] に移動します。
[設定] から [全般] を選択し、レポートが [有効] になっていることを確認します。
「環境のセットアップ」セクションで説明されているように、環境が正しく設定されていることを確認します。
レポートパッケージのインストール

この機能は現在公開されていないため、パッケージをインストールするにはいくつかの追加の手順を実行する必要があります。この機能が公開されると、これらの手順は必要ありません。
1. Playwright 構成ファイルと同じ場所に .npmrc という名前のファイルを作成します。
2. 次の内容をファイルに追加して保存します。
```
@microsoft:registry=https://npm.pkg.github.com
```
3. これらの手順に従って、GitHub 個人用アクセストークンを作成します。
トークンに read:packages アクセス許可を付与する必要があります。この記事ではこれ以降、このトークンを PAT_TOKEN_PACKAGE と呼ぶこととします。
1. Playwright 構成ファイルの場所で、ターミナルで次のコマンドを実行します。 PAT_TOKEN_PACKAGE を前の手順で生成されたトークンに置き換えます。
```
    npm set //npm.pkg.github.com/:_authToken PAT_TOKEN_PACKAGE
```
2. package.json ファイルをパッケージで更新します。
```
 "dependencies": {
            "@microsoft/mpt-reporter": "0.1.0-22052024-private-preview"
    }
```
3. npm install を実行して、パッケージをインストールします。

Playwright.config ファイルを更新する

他のレポーターを使用するのと同じ方法で、Playwright Testing レポーターを Playwright.config.ts に追加します。

import { defineConfig } from '@playwright/test';

export default defineConfig({
    reporter: [
    ['list'],
    ['json', {  outputFile: 'test-results.json' }],
    ['@microsoft/mpt-reporter'] // Microsoft Playwright Testing reporter
    ],
});

トラブルシューティングを改善するため、構成で成果物が有効になっていることを確認します。

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

Playwright テストを実行する

npx playwright test コマンドを実行して、Playwright Testing ポータルで結果と成果物を表示できます。

ヒント

Microsoft Playwright Testing サービスを使用すると、クラウドでホストされているブラウザー機能に関係なく、テスト結果をポータルに公開できます。

並列ワーカー構成を最適化する

サービスでテストがスムーズに実行されたら、並列ワーカーの数を変えて実験し、テスト完了までの時間を最小限に抑えられる最適な構成を判断します。

Microsoft Playwright Testing では、最大 50 個の並列ワーカーで実行することができます。プロジェクトの最適な構成は、クライアントコンピューターの CPU、メモリ、ネットワークリソース、ターゲットアプリケーションの負荷処理容量、テストで実行されるアクションの種類など、複数の要因の影響を受けます。

Playwright CLI コマンドラインで並列 worker の数を指定するか、Playwright サービス構成ファイルで workers プロパティを構成できます。

詳細については、テストスイートの完了を最適化する最適な構成を判断する方法に関するページを参照してください。

次のステップ

Playwright ポータルで Microsoft Playwright Testing ワークスペースを正常に作成し、クラウドブラウザーで Playwright テストを実行しました。

次のクイックスタートでは、CI/CD ワークフローで Playwright テストを実行して、エンドツーエンドの継続的なテストを設定します。

CI/CD でエンドツーエンドの継続的なテストを設定する

次の方法で共有

クイックスタート: Microsoft Playwright Testing (プレビュー) を使用して、大規模なエンドツーエンドテストを実行する

前提条件

ワークスペースの作成

サービス認証用のアクセストークンを作成する

サービスリージョンエンドポイントを構成する

環境を設定する

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

Microsoft Playwright Testing を使用して大規模なテストを実行する

1 つのテストを大規模に実行する

完全なテストスイートを大規模に実行する

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

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

並列ワーカー構成を最適化する

次のステップ

フィードバック

フィードバック

その他のリソース

次の方法で共有

クイックスタート: Microsoft Playwright Testing (プレビュー) を使用して、大規模なエンド ツー エンドテストを実行する

前提条件

ワークスペースの作成

サービス認証用のアクセス トークンを作成する

サービス リージョン エンドポイントを構成する

環境を設定する

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

Microsoft Playwright Testing を使用して大規模なテストを実行する

1 つのテストを大規模に実行する

完全なテスト スイートを大規模に実行する

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

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

並列ワーカー構成を最適化する

次のステップ

フィードバック

フィードバック

その他のリソース

クイックスタート: Microsoft Playwright Testing (プレビュー) を使用して、大規模なエンドツーエンドテストを実行する

サービス認証用のアクセストークンを作成する

サービスリージョンエンドポイントを構成する

完全なテストスイートを大規模に実行する