Protractor
Protractor (英語) は、Angular(英語) および AngularJS(英語) アプリケーション用のテストフレームワークです。Protractor は、実際のブラウザーで実行されているアプリケーションに対してテストを実行し、テスト結果の正確さと信頼性を保証します。PhpStorm は Protractor と統合されているため、IDE 内からテストを実行およびデバッグできます。テスト結果はツリービューで確認でき、そこからテストソースに簡単に移動できます。
始める前に
Node.js をダウンロードしてインストールします。
設定 | プラグインページのインストール済みタブで、JavaScript and TypeScript および Angular と AngularJS に必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。
Protractor をインストールする
Protractor は、ローカルに、プロジェクトに、またはグローバルにインストールできます。グローバルインストールが望ましい
Protractor をグローバルにインストールする
埋め込まれたターミナル(Alt+F12)で、次のように入力します。
npm install -g protractor
必要なバイナリをダウンロードするには、
webdriver-manager update
と入力します。Protractor の公式サイトでスタートする(英語)も参照してください。
テストの実行
Protractor テストは、実行 / デバッグ構成によってのみ起動されます。
Protractor 実行構成を作成する
実行 / デバッグ構成ダイアログ (メインメニューの ) を開き、左側のペインで
をクリックし、リストから Protractor を選択します。「実行 / デバッグ構成: Protractor」ダイアログが開きます。
使用する Node.js インタープリターを指定します。
プロジェクトエイリアスを選択すると、PhpStorm は Node.js ページの Node インタープリターフィールドからプロジェクトの既定のインタープリターを自動的に使用します。ほとんどの場合、PhpStorm はプロジェクトの既定のインタープリターを検出し、フィールド自体に入力します。
別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、
をクリックして新しいインタープリターを構成することもできます。
分度器パッケージの場所と protractor.conf.js 設定ファイルへのパスを指定します。標準インストールを実行した場合、PhpStorm はこれらのパスをすべて検出して、対応するフィールドに表示します。
実行するテストを指定します。これは、特定のテストまたはスイート、テストファイル全体、テストファイルを含むフォルダーにすることができます。
実行構成を介してテストを実行する
Selenium サーバーを手動で起動するか、protractor.conf.js で自動的に起動するように構成します。詳細については、Protractor オフィシャル Web サイト(英語)を参照してください。
構成のリストから Protractor 実行 / デバッグ構成を選択し、リストまたはツールバーの
をクリックします。
実行ツールウィンドウの <current_run_configuration_name> タブで、サーバーからのメッセージを表示および分析します。
ナビゲーション
PhpStorm を使用すると、ファイルと関連テストファイルの間、またはテストランナータブのテスト結果からテストに移動できます。
テストとそのサブジェクト間、またはその逆に移動するには、エディターでファイルを開き、コンテキストメニューから
または を選択するか、Ctrl+Shift+T を押します。テスト結果からテスト定義に移動するには、「テストランナー」タブでテスト名を 2 回クリックするか、コンテキストメニューから「 」を選択するか、単に F4 を押します。テストファイルがエディターで開き、テスト定義にキャレットが置かれます。
デバッグテスト
Protractor テスト用のデバッグセッションは、実行 / デバッグ構成によってのみ開始されます。
デバッグテストを開始するには
上記のように Protractor 実行 / デバッグ構成を作成します。
構成のリストから Protractor 実行 / デバッグ構成を選択し、リストまたはツールバーの
をクリックします。
開いたデバッグツールウィンドウで、通常どおりに続行します。テストの実行、一時停止と再開、中断時にテストを調査、
コンソールで JavaScript コードスニペットを実行など。
関連ページ:

プラグインのインストール
プラグインは PhpStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケッ...

実行 / デバッグ構成ダイアログ
このダイアログを使用して、実行 / デバッグ構成を作成、編集、調整、削除したり、新しく作成されたすべての実行 / デバッグ構成に適用されるデフォルトのテンプレートを構成したりします。既存の実行 / デバッグ構成は、構成タイプごとにグループ化されています。新しい構成を作成するためのテンプレートは編集可能であり、ダイアログの左側のペインにある構成テンプレートの編集リンクから利用できます。共通設定:実行構成を編集するとき(ただし実行構成テンプレートは編集しないとき)、次のオプションを指定できます。名...

実行 / デバッグ構成: Protractor
作成: このダイアログで、Protractor テストランナーを使用して AngularJS 単体テストを実行およびデバッグするための設定を作成します。始める前に:Node.js をダウンロードしてインストールします。Protractor のインストールの説明に従って、Protractor テストフレームワークをインストールします。Protractor 固有の構成設定:構成ファイルこのフィールドには、Protractor 設定ファイルの位置を指定します。通常、ファイルには拡張子 protractor...

テストランナータブ
テストランナータブは、テストセッションの開始時に実行ツールウィンドウで開き、同じツールバーボタンを備えています。実行ツールバーは、実行ツールウィンドウのツールバーとほとんど同じですが、テスト固有のボタンを備えています。左側のペインには、現在の実行 / デバッグ構成内のすべてのテストのツリービューが表示されます。ルートノードは、実行するように選択されたテストを表します。ネストされたノードは、テストスイートとテストケースの階層を表します。リーフノードは個々のテストを表します。各テストのステータスはア...

デバッグツールウィンドウ
デバッガーセッションを開始すると、デバッグツールウィンドウが開きます。このウィンドウを使用して、デバッガーセッションを制御し、プログラムデータ (フレーム、変数など) を表示および分析し、デバッガーアクションを実行します。デフォルトでは、プログラムがブレークポイントに到達したときにデバッグツールウィンドウが開き、セッションが終了しても非表示になりません。この動作を変更するには、ビルド、実行、デプロイ | デバッガー設定ページに移動し、ブレークポイントでデバッグウィンドウを表示するチェックボック...

プログラムのステップスルー
ステップは、プログラムの段階的な実行を制御するプロセスです。PhpStorm は、次の行に直接移動する必要があるか、中間のメソッド呼び出しもインスペクションする必要があるかなど、戦略に応じて使用される一連のステップアクションを提供します。ステップボタンは、デバッグウィンドウのツールバーにあります。ステップオーバー:現在のコード行をステップオーバーし、ハイライトされた行にメソッド呼び出しが含まれている場合でも、次の行に移動します。メソッドの実装はスキップされ、呼び出し元メソッドの次の行に直接移動...