テストの移行手順

  • 1. packages/e2e-tests/specs で移行するテストスイートを選択し、.test.js を .spec.js に名前変更し、test/e2e/specs 内の同じフォルダ構造に配置します。
  • 2. @wordpress/e2e-test-utils-playwright からテストヘルパーを要求します: 
    1. const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
  • 3. describe、beforeAll、beforeEach、afterEach、afterAll のすべての出現を test. プレフィックスで置き換えます。例えば、describe は test.describe に変わります。
  • 4. フィクスチャAPI を使用して、page や browser のような以前のグローバル変数を要求します。
  • 5. e2e-test-utils のすべてのインポートを削除します。その代わりに、フィクスチャAPIを使用して admin、editor、pageUtils、requestUtils を直接取得します。（ただし、admin、editor、pageUtils は beforeAll および afterAll では許可されておらず、requestUtils を使用して書き直す必要があります。）
  • 6. 利用可能なユーティリティが不足している場合、手順が少ない場合は、テスト内で直接操作をインライン化してみてください。テストユーティリティとして実装する価値があると思う場合は、以下の ガイド に従ってください。
  • 7. 提案された ベストプラクティス に従って、テスト内の他の詳細を手動で移行します。Playwright と Puppeteer の API の違いは似ていますが、いくつかの手動変更が必要です。

テストユーティリティの移行手順

テストユーティリティ関数を移行する前に、それが必要かどうかを再考してください。Playwright は多くの読みやすく強力な API を提供しており、多くのユーティリティが不要になります。まず、テスト内で直接同じことをインラインで実装してみてください。それがうまくいかない場合のみ、以下のガイドに従ってください。e2e-test-utils-playwright パッケージに実装する価値のあるユーティリティの例には、複雑なブラウザ API（pageUtils.dragFiles や pageUtils.pressKeys のような）や状態を設定する API（requestUtils.*）が含まれます。

e2e-test-utils-playwright パッケージは、Jest + Puppeteer の e2e-test-utils パッケージのドロップイン置き換えを目的としていません。一部のユーティリティは移行プロセスを容易にするために作成されていますが、必ずしも必要ではありません。

Playwright ユーティリティは、e2e-test-utils パッケージのものとは少し異なる方法で整理されています。e2e-test-utils-playwright パッケージには、ユーティリティが分割されている以下のフォルダがあります:

– admin – WordPress 管理者または WordPress 管理者のユーザーインターフェースに関連するユーティリティ（例: visitAdminPage）。

– editor – ブロックエディタ用のユーティリティ（例: clickBlockToolbarButton）。

– pageUtils – ブラウザと対話するための一般的なユーティリティ（例: pressKeys）。

– requestUtils – REST API リクエストを行うためのユーティリティ（例: activatePlugin）。これらのユーティリティは、テストのセットアップとティアダウンに使用されます。

  • 1. e2e-test-utils にある既存のファイルをコピーし、admin、editor、page、または request フォルダに e2e-test-utils-playwright に応じて貼り付けます。
  • 2. 書き直す必要があるユーティリティの部分を更新します:
    • page と browser 変数は、admin、editor、pageUtils で this.page と this.browser として利用可能です。
    • 同じクラス内の他のすべてのユーティリティは this で利用可能で、同じインスタンスにバインドされています。import ステートメントを削除し、this を使用してアクセスできます。
    • TypeScript を使用することに慣れている場合は、ユーティリティを更新することを検討してください。
  • 3. 新しく移行されたユーティリティを index.ts にインポートし、Admin/Editor/PageUtils/RequestUtils クラス内のインスタンスフィールドとして配置します。