Protractor
Protractor は (英語)Angular(英語) および AngularJS(英語) アプリケーション用のテストフレームワークです: Protractor は実際のブラウザーで実行されているアプリケーションに対してテストを実行し、テスト結果の正確性と信頼性を保証する: IntelliJ IDEA は Protractor と統合されているため、IDE 内からテストを実行およびデバッグできます。テスト結果をツリービューで確認し、そこからテストソースに簡単に移動できます。
始める前に
Node.js をダウンロードしてインストールします。
設定 | プラグインページのインストール済みタブで、JavaScript と TypeScript および Angular と AngularJS に必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。
Protractor をインストールする
Protractor は、ローカルに、プロジェクトに、またはグローバルにインストールできます。グローバルインストールが望ましい
Protractor をグローバルにインストールする
埋め込まれたターミナル(Alt+F12)で、次のように入力します。
npm install -g protractor
必要なバイナリをダウンロードするには、
webdriver-manager update
と入力します。Protractor の公式サイトでスタートする(英語)も参照してください。
テストの実行
Protractor テストは、実行 / デバッグ構成によってのみ起動されます。
Protractor 実行構成を作成する
実行 / デバッグ構成ダイアログ (メインメニューの ) を開き、左側のペインで
をクリックし、リストから Protractor を選択します。「実行 / デバッグ構成: Protractor」ダイアログが開きます。
使用する Node.js インタープリターを指定します。
プロジェクトエイリアスを選択すると、IntelliJ IDEA は Node.js ページの Node インタープリターフィールドからプロジェクトの既定のインタープリターを自動的に使用します。ほとんどの場合、IntelliJ IDEA はプロジェクトの既定のインタープリターを検出し、フィールド自体に入力します。
別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、
をクリックして新しいインタープリターを構成することもできます。
分度器パッケージの場所と protractor.conf.js 設定ファイルへのパスを指定します。標準インストールを実行した場合、IntelliJ IDEA はこれらのパスをすべて検出して、対応するフィールドに表示します。
実行するテストを指定します。これは、特定のテストまたはスイート、テストファイル全体、テストファイルを含むフォルダーにすることができます。
実行構成を介してテストを実行する
Selenium サーバーを手動で起動するか、protractor.conf.js で自動的に起動するように構成します。詳細については、Protractor オフィシャル Web サイト(英語)を参照してください。
構成のリストから Protractor 実行 / デバッグ構成を選択し、リストまたはツールバーの
をクリックします。
実行ツールウィンドウの <current_run_configuration_name> タブで、サーバーからのメッセージを表示および分析します。
ナビゲーション
IntelliJ IDEA を使用すると、ファイルと関連テストファイルの間、またはテストランナータブのテスト結果からテストに移動できます。
テストとそのサブジェクト間、またはその逆に移動するには、エディターでファイルを開き、コンテキストメニューから
または を選択するか、Ctrl+Shift+T を押します。テスト結果からテスト定義に移動するには、「テストランナー」タブでテスト名を 2 回クリックするか、コンテキストメニューから「 」を選択するか、単に F4 を押します。テストファイルがエディターで開き、テスト定義にキャレットが置かれます。
デバッグテスト
Protractor テスト用のデバッグセッションは、実行 / デバッグ構成によってのみ開始されます。
デバッグテストを開始するには
上記のように Protractor 実行 / デバッグ構成を作成します。
構成のリストから Protractor 実行 / デバッグ構成を選択し、リストまたはツールバーの
をクリックします。
開いたデバッグツールウィンドウでは、通常通りに進めます。テストをステップ実行、テスト実行の停止・再開、中断中のテストを調査、コンソールで JavaScript のコードスニペットを実行する、などです。
関連ページ:
![](https://resources.jetbrains.com/help/img/idea/2024.1/plugins_settings.png)
プラグインのインストール
プラグインは IntelliJ IDEA のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains...
![](https://pleiades.io/icons/idea.png)
実行 / デバッグ構成ダイアログ
このダイアログを使用して、実行 / デバッグ構成を作成、編集、調整、削除したり、新しく作成されたすべての実行 / デバッグ構成に適用されるデフォルトのテンプレートを構成したりします。既存の実行 / デバッグ構成は、構成タイプごとにグループ化されています。新しい構成を作成するためのテンプレートは編集可能であり、ダイアログの左側のペインにある構成テンプレートの編集リンクから利用できます。共通設定:実行構成を編集するとき(ただし実行構成テンプレートは編集しないとき)、次のオプションを指定できます。名...
![](https://resources.jetbrains.com/help/img/idea/2024.1/debug_overview.png)
デバッグツールウィンドウ
デバッガーセッションを開始すると、デバッグツールウィンドウが表示されます。このウィンドウを使用して、デバッガーセッションを制御し、プログラムデータ(フレーム、スレッド、変数など)を表示して分析し、さまざまなデバッガーアクションを実行します。これは、デバッグツールウィンドウの概要です。ツールウィンドウの使用に関する一般的な手順については、ツールウィンドウを参照してください。ツールウィンドウのタブを切り替えるには、とを押します。セッション:使用可能なデバッグセッションは、デバッグツールウィンド
![](https://resources.jetbrains.com/help/img/idea/2024.1/debug_run_menu.png)
デバッガーセッションを開始する
デバッガーセッションの開始は、プログラムを通常モードで実行するのと非常によく似ています。デバッガーはバックグラウンドで接続されているため、デバッガーセッションを開始するために特別な設定を行う必要はありません。IntelliJ IDEA からプログラムを実行できる場合は、同じ構成を使用してプログラムをデバッグすることもできます。プログラムをデバッグするたびに、デバッガーセッションは実行 / デバッグ構成に基づいています。IntelliJ IDEA を構成して、プログラムを起動する前に任意のパラメー...
![](https://resources.jetbrains.com/help/img/idea/2024.1/debug_examining_frames_tab.png)
中断されたプログラムを調べる
デバッガーセッションが開始されると、デバッグツールウィンドウが表示され、次のいずれかが発生するまでプログラムが正常に実行されます。ブレークポイントがヒットしました、プログラムを手動で一時停止する、その後、プログラムは中断され、現在の状態を調べたり、実行を制御したり、実行時にさまざまなシナリオをテストしたりできます。フレームを調べる:プログラムの状態はフレームで表されます。プログラムが一時停止すると、現在のフレームスタックがデバッグツールウィンドウのフレームタブに表示されます。フレームはアクティ
![](https://resources.jetbrains.com/help/img/idea/2024.1/js_interactive_debugger_console_filter.png)
対話型デバッガーコンソール
対話式のコンソールペインには、スタックトレースと、コードにログインしたすべてのものが表示されます(たとえば、を使用)。コンソールペインも read-eval-print ループ(REPL)なので、そこに JavaScript コードスニペットを実行して、現在デバッグしているページと対話できます。コンソールで JavaScript を実行する入力フィールドにでステートメントの入力を始めます。タイプするにつれて、IntelliJ IDEA は完成のための異形を提案します。該当する明細を選択してを押し...