Playwright HTML レポートでメタデータを表示する: 完全ガイド

Playwright は強力なテスト フレームワークですが、その HTML レポートは複雑なプロジェクトにとっては最低限のものに感じられる場合があります。コミット メッセージ、作成者の詳細、CI ビルドへのリンクなどのメタデータをレポート ヘッダーに直接表示できたら便利だと思いませんか?ここでは、それを実現する方法と、Playwright の機能についてのより深い洞察を示します。

劇作家のメタデータを理解する

Playwright のドキュメントでは、設定用のメタデータ フィールドについて言及しています。

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

export default defineConfig({
  metadata: 'acceptance tests',
});

執筆時点 (Playwright v1.49) では次のように述べられています。

JSON としてシリアル化されたテスト レポートに直接挿入されるメタデータ

ただし、問題があります。この構成を追加すると、レポートにメタデータが表示されなくなります。 TypeScript を使用している場合は、提供された例のエラーも表示されます:

型「string」を型「メタデータ」に割り当てることはできません。

明らかにドキュメントは古いですが、レポートにメタデータを含めることは確かに可能です。

実際のメタデータ構成

Playwright のソース コードを詳しく調べた後、HTML レポートでサポートされている実際のフィールドを発見しました。

export type Metainfo = {
  'revision.id'?: string;
  'revision.author'?: string;
  'revision.email'?: string;
  'revision.subject'?: string;
  'revision.timestamp'?: number | Date;
  'revision.link'?: string;
  'ci.link'?: string;
  'timestamp'?: number;
};

これらのフィールドのみが表示されます。 playwright.config.ts で設定しましょう:

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

export default defineConfig({
  reporter: 'html',
  metadata: {
    'revision.id': 'adcb0c51debdbe96a6a836e2ead9d40a859f6438',
    'revision.author': 'John Smith',
    'revision.email': 'john.smith@gmail.com',
    'revision.subject': 'Acceptance tests',
    'revision.timestamp': Date.now(),
    'revision.link': 'https://github.com/microsoft/playwright/pull/12734',
    'ci.link': 'https://github.com/microsoft/playwright/actions/workflows/tests_primary.yml',
    'timestamp': Date.now(),
  },
});

テストを実行すると、HTML レポート ヘッダーにこのメタデータが美しく表示されます。

メタデータ作成の自動化

メタデータ フィールドを手動で入力することは、特に CI/CD パイプラインのような動的環境では現実的ではありません。このプロセスを自動化すると、手作業なしで正確で一貫性のあるメタデータが確保されます。

サードパーティのパッケージ

プロセスを自動化するには、Git コミット情報を抽出するサードパーティ パッケージを利用できます。これは単純なアプローチです。より興味深い 2 番目のオプションに進みましょう。

Playwright の隠しプラグイン システムを活用する

Playwright に関する最も興味深い発見の 1 つは、隠されたプラグイン システムです。公式には文書化されていませんが、カスタム プラグインを通じて Playwright の機能を拡張する方法を提供します。

私は Playwright 自体のテストとしてこの洞察を得ました。 Playwright は、プラグインを定義できる隠し設定フィールド「@playwright/test」をサポートしています。

これは gitCommitInfo プラグインを有効にする例です:

import { defineConfig } from '@playwright/test';
import { gitCommitInfo } from 'playwright/lib/plugins';

export default defineConfig({
  reporter: 'html',
  // @ts-expect-error
  '@playwright/test': { 
    plugins: [gitCommitInfo()] 
  },
});

gitCommitInfo プラグインは何をしますか?

このプラグインは、Git コミットの詳細を抽出し、HTML レポートに次のようなメタデータ フィールドを設定します。

• コミットハッシュ
• メッセージをコミット
• 著者名とメールアドレス
• タイムスタンプ

さらに、CI/CD 環境で実行すると、プラグインは GITHUB_SHA や CI_COMMIT_SHA などの標準環境変数を使用してフィールドに自動的に入力できます。

プラグインを有効にしてテストを実行すると、メタデータが自動的に入力された次のレポートが得られます。

その他のプラグイン

気になったのですが、Playwright には他にも隠されたプラグインはありますか?
plugins ディレクトリには、もう 1 つのプラグイン webServerPlugin だけがあります。テスト実行時に組み込み Web サーバーを開始および停止できます。実際、config.webServer オプションを定義すると、このプラグインが内部で使用されます。そのため、プラグイン システムは Playwright の内部で使用されますが、公開使用については文書化されていません。

プラグイン システムは Playwright の以前のバージョンで導入されましたが、ある時点で隠蔽されました。残念ながら、今のところ公開する予定はありません。

メタデータに対するカスタム関数の使用

プラグインに依存せずにメタデータを自動入力したい場合は、カスタム関数を使用してそれを行うことができます。 gitCommitInfo プラグインの gitStatusFromCLI() 関数を適応させて、独立して使用できるようにしました。

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

export default defineConfig({
  metadata: 'acceptance tests',
});

Playwright 設定にメタデータを設定する関数の使用:

export type Metainfo = {
  'revision.id'?: string;
  'revision.author'?: string;
  'revision.email'?: string;
  'revision.subject'?: string;
  'revision.timestamp'?: number | Date;
  'revision.link'?: string;
  'ci.link'?: string;
  'timestamp'?: number;
};

テストを実行すると、メタデータが入力された同じ HTML レポートが得られます。

このアプローチにより、Playwright の内部機能に依存せずにメタデータの自動化を完全に制御できます。

並列テストの最適化

すべてが良好に見えますが、上記のコードにはパフォーマンスの問題があります。何が問題なのか分かりますか?

Playwright はワーカーでテストを実行します。各ワーカーが起動すると、Playwright 構成がインポートされます。 Playwright config が負荷の高い操作 (Git データの取得など) を実行すると、ワーカーの速度が低下します。さらに、同じ結果が返されるため、コマンドを何度も実行しても意味がありません。

メインワーカーのみでメタデータ関数を実行することで最適化できます。メインワーカーは空の TEST_WORKER_INDEX 環境変数によって検出できます:

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

export default defineConfig({
  reporter: 'html',
  metadata: {
    'revision.id': 'adcb0c51debdbe96a6a836e2ead9d40a859f6438',
    'revision.author': 'John Smith',
    'revision.email': 'john.smith@gmail.com',
    'revision.subject': 'Acceptance tests',
    'revision.timestamp': Date.now(),
    'revision.link': 'https://github.com/microsoft/playwright/pull/12734',
    'ci.link': 'https://github.com/microsoft/playwright/actions/workflows/tests_primary.yml',
    'timestamp': Date.now(),
  },
});

これにより、パフォーマンスに影響を与えることなくメタデータが効率的に入力されます。

---

結論

Playwright HTML レポートにメタデータを追加することは可能ですが、十分に文書化されていません。メタデータを手動で構成したり、非表示のプラグイン システムを利用したり、カスタム ソリューションを実装したりできます。

重要なポイント:

• メタデータ フィールドは特定のキー (revision.id、ci.link など) に限定されます。
• Playwright の隠しプラグインまたはカスタム スクリプトを使用してメタデータを自動化します。
• メイン ワーカーでのみメタデータ ロジックを実行することで、並列テストを最適化します。

記事の調査に基づいて、Playwright リポジトリにプルリクエストをオープンし、メタデータ フィールドのドキュメントの改善を提案しました。

Playwright レポートにメタデータを追加してみましたか?コメントであなたの経験や課題を共有してください!

以上がPlaywright HTML レポートでメタデータを表示する: 完全ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。