Playwright
Playwright(英語) は、オープンソースのテスト自動化フレームワークです。 Chrome、Firefox、Safari などの Web ブラウザーを自動化するための高レベル API を提供します。
新しい Playwright プロジェクトを作成する
メインメニューで へ移動します。
または、 ようこそ 画面を表示している場合は、 新規プロジェクト をクリックします。
左側のリストから Playwright を選択します。
新しいプロジェクトに名前を付け、必要に応じてその場所を変更します。
Node.js ランタイム を指定します。
Playwright をインストールするコマンドを指定します。
作成 をクリックしてください。
選択したオプションに従って新しいプロジェクトが作成されます。
Playwright プロジェクトを初期化する
プロジェクトが作成されたら、初期化する必要があります。 この手順では、目的の言語を選択し、Playwright ブラウザーをインストールし、その他の設定を指定します。
プロジェクトの初期化を開始するには：
実行ツールウィンドウ Alt+4 では、キーボードの上 / 下矢印ボタンを押して、プロジェクトで使用する言語を選択します。
エンドツーエンドテストを配置するフォルダーの名前を入力します。
GitHub アクションのワークフロー(英語)を追加するかどうかを指定します。
Playwright ブラウザーをインストールするかどうかを指定します。
すべてのパラメーターを指定すると、初期化が開始されます。 プロセスが完了すると、システムから通知が届きます。
ロールベースのロケーターのサポート
Playwright では、 ロール(英語)別に要素を見つけることができます。 これにより、ボタン、チェックボックス、見出し、リンク、その他の要素など、ページ上の特定の要素を正確に特定できます。
WebStorm はこのようなロケーターを生成してコードに追加でき、テストで使用できます。
コードに要素を追加する
要素を追加するファイルを開きます。
右側のサイドバーの
をクリックして、 Web インスペクター ツールバーウィンドウを開きます。アドレスバーにページの URL を指定します。
「
」をクリックし、Web インスペクターで追加する要素を選択します。
要素を選択したら、「
」をクリックして要素をコードに追加します。
特定のタイプのセレクター (ID、 名前、 クラスでタグ付けするなど) を追加するには、
をクリックして必要なオプションを選択します。CSS ロケーターと XPath ロケーターの間で具体的に切り替える場合は、
をクリックして、必要なロケーター型を選択します。
その結果、コードが生成され、コードエディターに追加されます。
テストの実行
テストを実行するには、テストクラスまたはテストメソッドの横にある
ガターアイコンをクリックし、リストから 実行 オプションを選択します。あるいは、キャレットをテストクラスに置いてそのクラス内のすべてのテストを実行するか、テストメソッドにキャレットを置き、 Ctrl+Shift+F10 を押します。
実行 / デバッグ構成を使用すると、よりカスタマイズ可能な方法でテストを実行できます。 詳細は、 テストの実行 を参照してください。
見出しモードでテストを実行する
ヘッドモードでテストを実行すると、Playwright が Web サイトとどのように対話するかを視覚的に確認できます。
ヘッドモードでテストを実行するには：
実行 / デバッグ構成スイッチャーで現在の構成をクリックし、
をクリックして、 編集 オプションを選択します。
Playwright オプション フィールドに、
--headedコマンドを指定します。
変更を適用し、テストを実行します。
その結果、ブラウザーが開き、テストの手順が再現されます。
テスト結果を確認する
テストの実行が終了すると、結果が 実行 ツールウィンドウの テストランナー タブに表示されます。 このタブでは、テストの再実行、テスト結果のエクスポートとインポート、各テストの実行にかかった時間を確認したり、その他のアクションを実行したりできます。
詳細は、 テスト結果を調べる を参照してください。
デバッグテスト
一般に、デバッグ手順には次のステップが含まれます：
実行を一時停止する必要があるコード行にブレークポイントを設定します。
コードをデバッグモードで実行します。
デバッグ ツールウィンドウを使用してコードを分析し、潜在的な問題を特定します。
問題を修正します。
IDE でこれらの手順を再現するには、次のステップを実行します：
ガターで実行を一時停止したいコードの実行可能な行にカーソルを合わせ、
をクリックします。 
ガターの
をクリックして デバッグ を選択します。 これにより、デバッガーセッションが開始され、コードが実行されます。プログラムがブレークポイントに到達すると実行が一時停止し、 デバッグ ツールウィンドウでデバッガーセッションの結果を確認できます。
デバッグの詳細については、「コードのデバッグ 」を参照してください。
Playwright レポートの生成
Playwright 報告者(英語)は、失敗したテストに関する詳細情報を提供するため、テスト実行中に何が起こったのかをより徹底的に分析できます。
デフォルトでは、 html レポートが生成されますが、実行 / デバッグ構成を使用して別の形式に切り替えることができます。 これを行うには、次の手順を実行します。
実行 / デバッグ構成スイッチャーで現在の構成をクリックし、
をクリックして、 編集 オプションを選択します。Playwright オプション フィールドで、目的の 報告者(英語)を指定します。 例：
--reporter=line変更を適用し、テストを実行します。
その結果、詳細なレポートが生成されます。
実行 / デバッグ構成を変更する
テストの起動プロパティを変更する場合は、実行／デバッグ構成を編集します：
実行 / デバッグ構成スイッチャーで現在の構成をクリックし、 構成の編集… オプションを選択します。
実行 / デバッグ構成 ダイアログで、編集する構成を選択します。
必要なスタートアッププロパティを構成します。
変更を適用して OK をクリックします。
実行 / デバッグ構成の詳細については、 実行 / デバッグ構成 を参照してください。
ロケーターテンプレートをカスタマイズする
選択した要素をコードに追加する方法をカスタマイズしたい場合は、テンプレートを変更できます：
ステータスバーのフレームワーク名をクリックします。 UI オートメーションフレームワーク メニューが開きます。
テンプレートのカスタマイズ オプションを選択してください。
ファイルおよびコードテンプレート ダイアログで、リストから必要なフレームワークを選択します。
Web 要素ロケーターのコード生成アルゴリズムを書き換えます。
変更を保存するには、 OK をクリックします。
その結果、更新されたコード生成アルゴリズムに従ってロケーターがコードに追加されます。