WebStorm 2026.1 Help

Protractor

Protractor (英語) は、 Angular(英語) および AngularJS(英語) アプリケーション用のテストフレームワークです。 Protractor は、実際のブラウザーで実行されているアプリケーションに対してテストを実行し、テスト結果の正確さと信頼性を保証します。 WebStorm は Protractor と統合されているため、IDE 内からテストを実行したりデバッグしたりできます。 テスト結果はツリービューで確認でき、そこからテストソースに簡単に移動できます。

始める前に

  1. コンピューターに Node.js(英語) があることを確認してください。

  2. 設定で Angular と AngularJS プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 プラグイン を選択します。 インストール済み タブをクリックします。 検索フィールドに Angular と AngularJS と入力します。 プラグインの詳細については、 プラグインの管理を参照してください。

Protractor をインストールする

Protractor は、ローカルに、プロジェクトに、またはグローバルにインストールできます。 グローバルインストールが望ましい

Protractor をグローバルにインストールする

  1. 組み込み ターミナル (Alt+F12) で次のように入力します。

    npm install -g protractor

  2. 必要なバイナリをダウンロードするには、 webdriver-manager update と入力します。 Protractor の公式サイトでスタートする(英語)も参照してください。

テストの実行

Protractor テストは、実行/デバッグ構成によってのみ起動されます。

Protractor 実行構成を作成する

  1. 実行 / デバッグ構成ダイアログ (メインメニューの 実行 | 実行構成の編集) を開き、左側のペインで 追加ボタン をクリックし、リストから Protractor を選択します。 実行/デバッグ構成：Protractorダイアログが開きます。

  2. 使用する Node.js ランタイムを指定します。

    プロジェクト エイリアスを選択した場合、WebStorm は JavaScript Runtime ページの ノードランタイム フィールドにあるプロジェクトのデフォルトインタープリターを自動的に使用します。 ほとんどの場合、WebStorm はプロジェクトのデフォルトランタイムを検出し、自動的にフィールドに入力します。

    別の構成済みのローカルインタープリターまたはリモートインタープリターを選択するか、 参照ボタン をクリックして新しいインタープリターを構成することもできます。

    詳細については、「リモート Node.js ランタイムの構成」、「ローカル Node.js ランタイムの構成」、「Linux の Windows サブシステムで Node.js を使用する 」を参照してください。

  3. 分度器パッケージの場所と protractor.conf.js 設定ファイルへのパスを指定します。 標準インストールを実行した場合、WebStorm はこれらのパスをすべて検出して、対応するフィールドに表示します。

  4. 実行するテストを指定します。 これは、特定のテストまたはスイート、テストファイル全体、テストファイルを含むフォルダーにすることができます。

実行構成を介してテストを実行する

  1. Selenium サーバーを手動で起動するか、 protractor.conf.js で自動的に起動するように構成します。 詳細については、 Protractor オフィシャル Web サイト(英語)を参照してください。

  2. 構成のリストから Protractor 実行 / デバッグ構成を選択し、リストまたはツールバーの 実行アイコン をクリックします。

    実行 / デバッグ構成を選択

  3. 実行 ツールウィンドウの <current_run_configuration_name> タブで、サーバーからのメッセージを表示および分析します。

ナビゲーション

WebStorm を使用すると、ファイルと関連するテストファイル間や、 テストランナータブのテスト結果からテストへジャンプできます。

  • テストとそのサブジェクト間、またはその逆に移動するには、エディターでファイルを開き、コンテキストメニューから 移動先 | テスト または 移動先 | テスト対象 を選択するか、 Ctrl+Shift+T を押します。

  • テスト結果からテスト定義に移動するには、「テストランナー 」タブでテスト名を 2 回クリックするか、コンテキストメニューから「ソースに移動 」を選択するか、単に F4 を押します。 テストファイルがエディターで開き、テスト定義にキャレットが置かれます。

デバッグテスト

Protractor テスト用のデバッグセッションは、実行/デバッグ構成によってのみ開始されます。

デバッグテストを開始するには

  1. 上記のように Protractor 実行 / デバッグ構成を作成します。

  2. 構成のリストから Protractor 実行 / デバッグ構成を選択し、リストまたはツールバーの カバレッジで実行 をクリックします。

    実行 / デバッグ構成を選択

  3. 開いた デバッグツールウィンドウ で、通常どおり操作してください： プログラムをステップ実行、 実行を停止・再開、 一時停止時の確認 、コールスタックや変数の調査、ウォッチの設定、変数の評価、 実際の HTML DOM の表示などが可能です。

2026 年 6 月 8 日
実行 / デバッグ構成: Mocha実行 / デバッグ構成: Protractor