Cypress カスタムコマンド

カスタムコマンド(英語)は、Cypress テストスイート全体で特定のメソッドまたは関数を再利用する方法を提供します。例: ユーザーにログインするコマンドを作成し、必要に応じてプロジェクト内で再利用できます。

IntelliJ IDEA はカスタムコマンドをサポートしています。つまり、名前変更、ナビゲーション、コード補完、インスペクションなどのすべてのコーディング支援機能がすぐに利用可能になります。

カスタムコマンドのコーディング支援

Cypress 固有のインスペクション

Cypress はチェーンメカニズム(英語)を利用して、チェーンが終了するかエラーが発生するまで情報が 1 つのコマンドから次のコマンドに受け渡される一連のコマンドを作成できます。

ただし、このメカニズムにはいくつかの特徴があります。例: アクションコマンド(英語)は常にチェーンの最後に配置し、1 回だけ使用する必要があります。

この例では、チェーンに 2 つのアクションコマンドが連続して配置されていますが、これは禁止されています。このテストを実行するとエラーが発生します。

                        it('Click the search button and type Cypress', () => {
                            cy.get("button[data-test='search-button']")
                                .click()
                                .type('Cypress')
                         })
                    
     

この例では、チェーンが 2 つに分割されているため、各チェーンにはアクションコマンドが 1 つだけ含まれています。このテストは問題なく実行されます。

                        it('Click the search button and type Cypress', () => {
                            cy.get("button[data-test='search-button']").click()
                            cy.get("input[data-test$='inner']").type('Cypress')
                        })
                    
     

コマンドチェーンの検証は JavaScript/TypeScript では実行されず、Cypress では実行時にのみ実行されるため、テスト実行中に問題が発生する可能性があります。 IntelliJ IDEA は、連鎖コマンド用のインスペクションを提供し、誤った使用箇所をハイライトします。

機能別インスペクション

IntelliJ IDEA は、プロジェクト内の異常なコードを検出して修正する関数固有のコードインスペクションを実行します。

例: コマンドに間違った数または型の引数を指定すると、間違ったコードがハイライトされます。ハイライトされたコードの上にマウスを置くと、エラーの説明が表示されます。

詳細については、コードインスペクションを参照してください。

名前変更

コマンドの名前を変更する必要がある場合は、 Renameリファクタリングを使用できます。これを行うには、次の手順を実行します。

名前を変更したいコマンドをハイライトしてください。
Shift+F6 を押し、コマンドの新しい名前を入力してください。
(オプション) 追加の検索オプションを構成し、範囲を定義します。
リファクタリングをクリックします。

詳細については、名前の変更リファクタリングを参照してください。

カスタムコマンドの作成

カスタム実行コマンドを作成するには、まずコマンドを記述し、その後で TypeScript の宣言を作成する必要があります。これを行うには、次の手順を実行します。

コードエディターにコマンドを記述します。
コマンドは、 cypress/support/commands.ts または cypress/support/commands.js ファイルで指定することを推奨します。このファイルは、 supportFile が提供する import ステートメント経由で、すべてのテストファイルより先に読み込まれます。
最初に、IntelliJ IDEA は、プロジェクト用に選択されたプログラミング言語に応じて、コマンドをエラーまたは弱い警告としてハイライトします。ただし、TypeScript 宣言を作成すると、問題は解決されます。
ハイライトされたコードの上にマウスを置き、欠落している TypeScript 宣言を作成するをクリックします。
あるいは、ハイライトされたコードにキャレットを置き、 Alt+Enter を押して、欠落している TypeScript 宣言を作成するを選択します。

その結果、TypeScript 宣言が生成され、 cypress/support/index.d.ts ファイルに追加されます。

TypeScript 宣言への移動

コマンド実装と対応する TypeScript 宣言の間を移動することもできます。

TypeScript の宣言へ移動するには、コマンドの実装付近のガターにあるをクリックしてください。
コマンドの実装に戻るには、TypeScript の宣言付近のガターにあるをクリックしてください。

カスタムコマンドの使用

カスタム実行コマンドを作成した後は、コード内で使用することができます。これを行うには、次の手順を実行します。

テストでは、「cy. 」と入力し、その後にカスタムコマンドの名前を入力します。

コマンドファイルの場所を変更する

デフォルトでは、生成された TypeScript 宣言を含むファイルは cypress/support/commands.ts にあります。場所を変更したい場合:

Ctrl+Alt+S を押して設定を開き、言語 & フレームワーク | Cypress を選択します。
カスタムコマンドの TS 宣言を保存する TypeScript ファイルフィールドに新しいパスを指定します。
変更を適用して、ダイアログを閉じます。

2026 年 3 月 30 日