Web UI テストの自動化
WebStorm の Web UI テスト自動化機能は、テストの自動化(英語)プラグインによって提供されます。このプラグインは、自動 UI テストの開発と保守に役立ち、テスト自動化用のスタンドアロン JetBrains IDE である Aqua によって提供される機能の重要な部分を構成します。
テストの自動化プラグインは次の機能を提供します。
Cypress および Playwright フレームワークの豊富なサポート
広範なコーディング支援
テスト自動化機能の詳細については、Aqua の公式ドキュメントを参照してください。
テスト自動化プラグインをインストールする
設定ダイアログ（Ctrl+Alt+S）で、プラグインを選択します。
マーケットプレースタブに切り替えて、
Test Automationと入力し、インストールをクリックします。
適用をクリックして変更を保存し、ダイアログを閉じます。プロンプトが表示されたら、IDE を再起動します。
テスト自動化機能
テストの認識
プロジェクトを開くと、WebStorm は Cypress または Playwright で記述されたテストを自動的に検出します。認識されたテストは、ガターの 
アイコンをクリックして実行し、IDE のツールを使用して分析 / デバッグできます。
コーディング支援
提供されるコーディング支援機能には、インテリジェントなコード補完、ナビゲーション、構文のハイライト、フレームワーク固有の関数と式のサポートが含まれます。
たとえば、コードエディターでロケーターまたはその部分文字列を入力し始めると、自動補完機能によって選択できる要素のリストが表示されます。さらに、選択された要素は Web インスペクターでハイライトされるため、正しいロケーターを選択しやすくなります。
ロケーターの生成と検証
Web インスペクターツールウィンドウを使用すると、Web アプリケーションを表示し、自動テストに必要なページ要素をキャプチャーできます。Web ページで必要な要素を選択すると、WebStorm は一意の CSS または XPath ロケーターを生成し、それをソースコードに追加するのに役立ちます。
さらに、WebStorm は、Playwright で使用されるロールベースのロケーターを生成できます。これらのロケーターは、要素のロール (ボタンやチェックボックスなど) を反映するように設計されており、要素の識別が容易になります。
さらに、Web インスペクターは、コード内のロケータが有効であり、Web ページ上の正しい要素を指しているかどうかを確認するのに役立ちます。コードエディターのロケータの横にある 
アイコンをクリックすると、Web インスペクターが開き、対応する要素が選択され、ロケータが検証されます。
テストの実行 / デバッグ構成を管理する
実行 / デバッグ構成は、何を実行するか、実行中にどのパラメーターと環境を使用するかを定義する一連の起動プロパティです。
テスト用にさまざまな構成セットを作成し、必要に応じて瞬時に切り替えることができます。
テスト実行の詳細
テストの実行が完了すると、各テストのログやコンソール出力などの包括的な結果が提供され、簡単に調べることができます。結果をフィルタリングして、失敗したテストや無視されたテストをすばやく移動し、実行時間を分析できます。
デバッガー
デバッガーは、コードのテストとトラブルシューティングに使用されるツールです。デバッガーを使用すると、コードをステップごとに実行し、各ステップで何が起こるかに関する情報を得ることができます。
Playwright テスト用のデバッガーはすぐに使用できます。ブレークポイントを設定して実行を一時停止し、コードを分析できます。
関連ページ：
Cypress
Cypress は、Web アプリケーション用のオープンソーステストフレームワークです。開発者に、エンドツーエンドのテストを自動化するための高速で信頼性の高いソリューションを提供します。Cypress は、その独自のアーキテクチャと包括的な機能セットにより、効率的なテスト作成、デバッグ、一般的なフレームワークや CI/CD パイプラインとの統合を可能にします。新しい Cypress プロジェクトを作成する：メインメニューで、に移動します。または、ウェルカム画面を表示している場合は、新規プロジェク...
Playwright
Playwright は、オープンソースのテスト自動化フレームワークです。Chrome、Firefox、Safari などの Web ブラウザーを自動化するための高レベル API を提供します。新しい Playwright プロジェクトを作成する：メインメニューで、に移動します。または、ウェルカム画面を表示している場合は、新規プロジェクトをクリックします。左側のリストから、Playwright を選択します。新しいプロジェクトに名前を付け、必要に応じてその場所を変更します。Node.js ランタイ...
ソースコードナビゲーション
さまざまなアクションとポップアップを使用して、エディター内のコード内をすばやく移動できます。エディターウィンドウとツールウィンドウ間の移動、およびエディタータブとパンくずリストの操作の詳細については、エディターの基本を参照してください。最近のファイル、場所、変更のナビゲーションの詳細については、最近のファイルと変更を参照してください。必要なファイルの検索方法の詳細については、ファイルナビゲーションを参照してください。ファイルの構造を表示および移動する方法の詳細については、ファイル構造を参照してく...
色とフォント
開発者は、エディターのソースコード、検索結果、デバッガー情報、コンソールの入出力など、多くのテキストリソースを操作します。このテキストのフォーマットには色とフォントスタイルが使用されており、一目で理解できるようになります。WebStorm では、IDE テキストで使用される色とフォントを定義する構成可能な配色から選択できます。事前定義された配色を使用するか、あなたの好みに合わせてカスタマイズすることができます。スキームを共有することも可能です。配色を選択を押して設定を開き、を選択します。あるいは...
Web インスペクターの概要
Web Inspector を使用すると、Aqua で Web アプリケーションを表示し、自動テストに必要な重要なページ要素をキャプチャーできます。Aqua は、Web ページ上で選択された特定の要素に対して一意の CSS または XPath ロケーターを自動的に生成し、それをソースコードに追加できます。Web インスペクターツールウィンドウは、右側のサイドバーにあるアイコンをクリックすると開きます。あるいは、を 2 回押してどこでも検索ウィンドウを開き、と入力します。Web Inspecto...
実行 / デバッグ構成
WebStorm は、実行 / デバッグ構成を使用して、コードを実行、デバッグ、テストします。各構成は、何を実行し、どのパラメーターと環境を使用するかを定義する、名前付きのスタートアッププロパティのセットです。実行 / デバッグ構成には 2 つのタイプがあります。一時的 — コンテキストメニューからを選択するたびに作成されます。コンテキストメニューを呼び出すには、オブジェクトまたは領域を右クリックします。永続的 — テンプレートから明示的に作成されるか、一時的な構成を保存することによって作成されま...