PhpStorm 2024.3 ヘルプ

Playwright

Playwright(英語) は、オープンソースのテスト自動化フレームワークです。Chrome、Firefox、Safari などの Web ブラウザーを自動化するための高レベル API を提供します。

新しい Playwright プロジェクトを作成する

  1. メインメニューで、ファイル | 新規プロジェクトに移動します。

    または、ウェルカム画面を表示している場合は、新規プロジェクトをクリックします。

  2. 左側のリストから、Playwright を選択します。

    Creating a new Playwright project
  3. 新しいプロジェクトに名前を付け、必要に応じてその場所を変更します。

  4. Node インタープリターを指定します。

  5. Playwright をインストールするコマンドを指定します。

  6. 作成をクリックします。

選択したオプションに従って新しいプロジェクトが作成されます。

Playwright プロジェクトを初期化する

プロジェクトが作成されたら、初期化する必要があります。この手順では、目的の言語を選択し、Playwright ブラウザーをインストールし、その他の設定を指定します。

Project initialization

プロジェクトの初期化を開始するには:

  1. 実行ツールウィンドウ Alt+4 では、キーボードの上 / 下矢印ボタンを押して、プロジェクトで使用する言語を選択します。

  2. エンドツーエンドテストを配置するフォルダーの名前を入力します。

  3. GitHub アクションのワークフロー(英語)を追加するかどうかを指定します。

  4. Playwright ブラウザーをインストールするかどうかを指定します。

すべてのパラメーターを指定すると、初期化が開始されます。プロセスが完了すると、システムから通知が届きます。

Project successfully initialized

ロールベースのロケーターのサポート

Playwright では、ロール(英語)別に要素を見つけることができます。これにより、ボタン、チェックボックス、見出し、リンク、その他の要素など、ページ上の特定の要素を正確に特定できます。

PhpStorm はそのようなロケーターを生成してコードに追加できるため、テストで使用できます。

Role-based locators

コードに要素を追加する

  1. 要素を追加するファイルを開きます。

  2. 右側のサイドバーの the Web Inspector button をクリックして、Web インスペクターツールバーウィンドウを開きます。

  3. アドレスバーにページの URL を指定します。

    Address bar controls
  4. The Select Element in Page button 」をクリックし、Web インスペクターで追加する要素を選択します。

    Select element in page
  5. 要素を選択したら、「 Add Element to Code 」をクリックして要素をコードに追加します。

    The Add Element to Code button

    特定のタイプのセレクター (ID名前クラスでタグ付けするなど) を追加するには、Add Element to Code By をクリックして必要なオプションを選択します。

    Add elements to code by

    CSS ロケーターと XPath ロケーターの間で具体的に切り替える場合は、 をクリックして、必要なロケーター型を選択します。

    Select locator type

その結果、コードの一部が生成され、コードエディターに追加されます。

テストの実行

  • テストを実行するには、テストクラスまたはテストメソッドの横にある the Run button ガターアイコンをクリックし、リストから実行オプションを選択します。

    Run tests

    あるいは、キャレットをテストクラスに置いてそのクラス内のすべてのテストを実行するか、テストメソッドにキャレットを置き、Ctrl+Shift+F10 を押します。

実行 / デバッグ構成を使用すると、よりカスタマイズ可能な方法でテストを実行できます。詳細については、テストの実行を参照してください。

見出しモードでテストを実行する

見出しモードでテストを実行すると、Playwright が Web サイトとどのように対話するかを視覚的に表現できます。

ヘッドモードでテストを実行するには:

  1. 実行 / デバッグ構成スイッチャーで現在の構成をクリックし、 をクリックして、編集オプションを選択します。

    Editing Run/Debug configurations
  2. Playwright オプションフィールドに、--headed コマンドを指定します。

    Configuring run/debug configuration to run tests in headed mode
  3. 変更を適用し、テストを実行します。

その結果、ブラウザーが開き、テストの手順が再現されます。

テスト結果を確認する

テストの実行が終了すると、結果が実行ツールウィンドウのテストランナータブに表示されます。このタブでは、テストの再実行、テスト結果のエクスポートとインポート、各テストの実行にかかった時間を確認したり、その他のアクションを実行したりできます。

Test results shown on the Test Runner tab of the Run tool window

詳細は、テスト結果を調べるを参照してください。

デバッグテスト

一般に、デバッグ手順には次の手順が含まれます。

  1. 実行を一時停止する必要があるコード行にブレークポイントを設定します。

  2. コードをデバッグモードで実行します。

  3. デバッグツールウィンドウを使用してコードを分析し、潜在的な問題を特定します。

  4. 問題を修正します。

IDE でこれらの手順を再現するには、次の手順を実行します。

  1. ガターで、実行を一時停止したいコードの実行可能行にマウスを置き、 をクリックします。

    Set a breakpoint
  2. ガターの をクリックし、デバッグを選択します。これにより、デバッガーセッションが開始され、コードが実行されます。

    Start the debug session
  3. プログラムがブレークポイントに到達すると、実行が一時停止され、デバッグツールウィンドウでデバッガーセッションの結果を確認できます。

    Debug tool window overview

Playwright レポートの生成

Playwright 報告者(英語)は、失敗したテストに関する詳細情報を提供するため、テスト実行中に何が起こったのかをより徹底的に分析できます。

デフォルトでは、html レポートが生成されますが、実行 / デバッグ構成を使用して別の形式に切り替えることができます。これを行うには、次の手順を実行します。

  1. 実行 / デバッグ構成スイッチャーで現在の構成をクリックし、 をクリックして、編集オプションを選択します。

    Editing Run/Debug configurations
  2. Playwright オプションフィールドで、目的の報告者(英語)を指定します。例:

    --reporter=line
  3. 変更を適用し、テストを実行します。

その結果、詳細なレポートが生成されます。

Generated Playwright report

実行 / デバッグ構成を変更する

テストの起動プロパティを変更する場合は、実行 / デバッグ構成を編集します。

  1. 実行 / デバッグ構成スイッチャーで現在の構成をクリックし、実行構成の編集オプションを選択します。

    Select the run/debug configuration
  2. 実行 / デバッグ構成ダイアログで、編集する構成を選択します。

  3. 必要なスタートアッププロパティを構成します。

    Configure startup properties
  4. 変更を適用して OK をクリックします。

実行 / デバッグ構成の詳細については、「実行 / デバッグ構成」を参照してください。

ロケーターテンプレートをカスタマイズする

選択した要素をコードに追加する方法をカスタマイズしたい場合は、テンプレートを変更できます。

  1. ステータスバーのフレームワーク名をクリックします。UI オートメーションフレームワークメニューが開きます。

    Customize template
  2. テンプレートのカスタマイズオプションを選択してください。

  3. ファイルおよびコードテンプレートダイアログで、リストから必要なフレームワークを選択します。

    Customize template
  4. Web 要素ロケーターのコード生成アルゴリズムを書き換えます。

  5. 変更を保存するには、OK をクリックします。

その結果、更新されたコード生成アルゴリズムに従ってロケーターがコードに追加されます。

関連ページ:

テストの実行

ファイルまたはフォルダー内で直接テストを実行するテストを開始する前に特定のアクションが必要なく、追加のオプションを構成したくない場合は、次のオプションを使用してテストを実行できます。そのクラス内のすべてのテストを実行するには、テストクラスにキャレットを置きます。または、テストメソッドにキャレットを置き、を押します。または、テストクラスまたはテストメソッドの横にあるガターアイコンをクリックし、リストから実行 '<test name>' を選択します。ガターアイコンは、テストの状態に応じ...

テスト結果を調べる

PhpStorm でテストが実行されている間、テスト実行は実行ツールウィンドウのその実行構成のタブに表示されます。テスト実行が終了すると、そのタブでテスト結果を確認できます。右側のコンソールには、現在のテストセッションの出力が表示されます。テストの実行に関する詳細情報と、テストが失敗したか無視された理由を確認できます。テスト結果リストの上にあるテスト結果ツールバーを使用すると、成功したテストと無視されたテストの表示と非表示を切り替えたり、各テストの実行にかかった時間を表示したり、テスト結果をエク...

実行 / デバッグ構成

PhpStorm は、実行 / デバッグ構成を使用して、コードを実行、デバッグ、テストします。各構成は、何を実行し、どのパラメーターと環境を使用するかを定義する、名前付きのスタートアッププロパティのセットです。実行 / デバッグ構成には 2 つのタイプがあります。一時的 — コンテキストメニューからを選択するたびに作成されます。コンテキストメニューを呼び出すには、オブジェクトまたは領域を右クリックします。永続的 — テンプレートから明示的に作成されるか、一時的な構成を保存することによって作成されま...

Cypress カスタムコマンド

カスタムコマンドは、Cypress テストスイート全体で特定のメソッドまたは関数を再利用する方法を提供します。例: ユーザーにログインするコマンドを作成し、必要に応じてプロジェクト内で再利用できます。PhpStorm はカスタムコマンドをサポートしています。つまり、名前変更、ナビゲーション、コード補完、インスペクションなどのすべてのコーディング支援機能がすぐに利用可能になります。カスタムコマンドのコーディング支援:Cypress 固有のインスペクション Cypress はチェーンメカニズムを利用...

HTTP クライアント

HTTP クライアントプラグインを使用すると、PhpStorm コードエディターで HTTP リクエストを直接作成、編集、実行できます。HTTP リクエストを作成して実行する必要がある場合、主に 2 つのユースケースがあります。RESTful Web サービスを開発していて、それが期待どおりに機能し、仕様に準拠してアクセス可能であり、正しく応答することを確認したい場合。RESTful Web サービスに対応するアプリケーションを開発している場合。この場合、開発を開始する前にサービスへのアクセスと...