PhpStorm 2024.3 ヘルプ

Cypress

Cypress(英語) は、Web アプリケーション用のオープンソーステストフレームワークです。開発者に、エンドツーエンドのテストを自動化するための高速で信頼性の高いソリューションを提供します。Cypress は、その独自のアーキテクチャと包括的な機能セットにより、効率的なテスト作成、デバッグ、一般的なフレームワークや CI/CD パイプラインとの統合を可能にします。

新しい Cypress プロジェクトを作成する

  1. メインメニューで、ファイル | 新規プロジェクトに移動します。

    または、ウェルカム画面を表示している場合は、新規プロジェクトをクリックします。

  2. 左側のリストから、Cypress を選択します。

    Creating a new Cypress project
  3. 新しいプロジェクトに名前を付け、必要に応じてその場所を変更します。

  4. Node インタープリターを指定します。

  5. パッケージマネージャーを指定します。

  6. 言語リストから、使用する言語を選択します。

  7. (オプション) サンプルコードの追加パラメーターを有効にします。

  8. (オプション) E2E テストの構成パラメーターを有効にして、スペックファイルに適用されるカスタムコマンドまたはグローバルオーバーライドを導入するために使用されるサポートファイルのセットを作成します。

  9. (オプション) コンポーネントテストの構成パラメーターを有効にして、コンポーネントテスト用のフレームワークをセットアップおよび構成します。コンポーネントテストの構成パラメーターを有効にしたら、リストから目的のフレームワークを選択します。

    Create a Cypress project with component tests
  10. 作成をクリックします。

選択したオプションに従って新しいプロジェクトが作成されます。

コードに要素を追加する

  1. 要素を追加するファイルを開きます。

  2. 右側のサイドバーの the Web Inspector button をクリックして、Web インスペクターツールバーウィンドウを開きます。

  3. アドレスバーにページの URL を指定します。

    Address bar controls
  4. The Select Element in Page button 」をクリックし、Web インスペクターで追加する要素を選択します。

    Select element in page
  5. 要素を選択したら、「 Add Element to Code 」をクリックして要素をコードに追加します。

    The Add Element to Code button

    特定のタイプのセレクター (ID名前クラスでタグ付けするなど) を追加するには、Add Element to Code By をクリックして必要なオプションを選択します。

    Add elements to code by

    CSS ロケーターと XPath ロケーターの間で具体的に切り替える場合は、 をクリックして、必要なロケーター型を選択します。

    Select locator type

その結果、コードの一部が生成され、コードエディターに追加されます。

テストの実行

  • テストを実行するには、テストクラスまたはテストメソッドの横にある the Run button ガターアイコンをクリックし、リストから実行オプションを選択します。

    Run tests

    あるいは、キャレットをテストクラスに置いてそのクラス内のすべてのテストを実行するか、テストメソッドにキャレットを置き、Ctrl+Shift+F10 を押します。

実行 / デバッグ構成を使用すると、よりカスタマイズ可能な方法でテストを実行できます。詳細については、テストの実行を参照してください。

テスト結果を確認する

テストの実行が終了すると、結果が実行ツールウィンドウのテストランナータブに表示されます。このタブでは、テストの再実行、テスト結果のエクスポートとインポート、各テストの実行にかかった時間を確認したり、その他のアクションを実行したりできます。

Test results shown on the Test Runner tab of the Run tool window

詳細は、テスト結果を調べるを参照してください。

デバッグテスト

実行 / デバッグ構成を変更する

テストの起動プロパティを変更する場合は、実行 / デバッグ構成を編集します。

  1. 実行 / デバッグ構成スイッチャーで現在の構成をクリックし、実行構成の編集オプションを選択します。

    Select the run/debug configuration
  2. 実行 / デバッグ構成ダイアログで、編集する構成を選択します。

  3. 必要なスタートアッププロパティを構成します。

    Configure startup properties
  4. 変更を適用して OK をクリックします。

実行 / デバッグ構成の詳細については、「実行 / デバッグ構成」を参照してください。

ロケーターテンプレートをカスタマイズする

選択した要素をコードに追加する方法をカスタマイズしたい場合は、テンプレートを変更できます。

  1. ステータスバーのフレームワーク名をクリックします。UI オートメーションフレームワークメニューが開きます。

    Customize template
  2. テンプレートのカスタマイズオプションを選択してください。

  3. ファイルおよびコードテンプレートダイアログで、リストから必要なフレームワークを選択します。

    Customize template
  4. Web 要素ロケーターのコード生成アルゴリズムを書き換えます。

  5. 変更を保存するには、OK をクリックします。

その結果、更新されたコード生成アルゴリズムに従ってロケーターがコードに追加されます。

Cypress Launchpad を開く

必要に応じて、現在のプロジェクトを Cypress ランチパッド(英語)で開くことができます。これを行うには、⌘⌃ ] を押します。

Cypress Launchpad

関連ページ:

テストの実行

ファイルまたはフォルダー内で直接テストを実行するテストを開始する前に特定のアクションが必要なく、追加のオプションを構成したくない場合は、次のオプションを使用してテストを実行できます。そのクラス内のすべてのテストを実行するには、テストクラスにキャレットを置きます。または、テストメソッドにキャレットを置き、を押します。または、テストクラスまたはテストメソッドの横にあるガターアイコンをクリックし、リストから実行 '<test name>' を選択します。ガターアイコンは、テストの状態に応じ...

テスト結果を調べる

PhpStorm でテストが実行されている間、テスト実行は実行ツールウィンドウのその実行構成のタブに表示されます。テスト実行が終了すると、そのタブでテスト結果を確認できます。右側のコンソールには、現在のテストセッションの出力が表示されます。テストの実行に関する詳細情報と、テストが失敗したか無視された理由を確認できます。テスト結果リストの上にあるテスト結果ツールバーを使用すると、成功したテストと無視されたテストの表示と非表示を切り替えたり、各テストの実行にかかった時間を表示したり、テスト結果をエク...

実行 / デバッグ構成

PhpStorm は、実行 / デバッグ構成を使用して、コードを実行、デバッグ、テストします。各構成は、何を実行し、どのパラメーターと環境を使用するかを定義する、名前付きのスタートアッププロパティのセットです。実行 / デバッグ構成には 2 つのタイプがあります。一時的 — コンテキストメニューからを選択するたびに作成されます。コンテキストメニューを呼び出すには、オブジェクトまたは領域を右クリックします。永続的 — テンプレートから明示的に作成されるか、一時的な構成を保存することによって作成されま...

Web UI テスト自動化ツール

PhpStorm の Web UI テスト自動化機能は、テストの自動化プラグインによって提供されます。このプラグインは、自動 UI テストの開発と保守に役立ち、テスト自動化用のスタンドアロン JetBrains IDE である Aqua によって提供される機能の重要な部分を構成します。テストの自動化プラグインは次の機能を提供します。Cypress および Playwright フレームワークの豊富なサポート、Cypress/Playwright テストを実行、デバッグ、検査する機能、広範なコーディング支援...

Cypress カスタムコマンド

カスタムコマンドは、Cypress テストスイート全体で特定のメソッドまたは関数を再利用する方法を提供します。例: ユーザーにログインするコマンドを作成し、必要に応じてプロジェクト内で再利用できます。PhpStorm はカスタムコマンドをサポートしています。つまり、名前変更、ナビゲーション、コード補完、インスペクションなどのすべてのコーディング支援機能がすぐに利用可能になります。カスタムコマンドのコーディング支援:Cypress 固有のインスペクション Cypress はチェーンメカニズムを利用...