Cypress カスタムコマンド

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

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

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

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

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

click() などのアクションコマンドの後では、次のコマンドに渡される要素が古くなる可能性があります。 GoLand は安全でないコマンドチェーンについて警告します。要素を再度検索するには、新しいチェーンを開始してください。

このチェーンは入力フィールドを検索する代わりに、クリックされたボタンを type() に渡します。

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

ボタンをクリックした後に入力フィールドを検索するには、新しいチェーンを開始してください:

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

コマンドチェーンのインスペクションでは、コマンドが互換性のない要素や値を受け取った場合にも警告します。

機能別インスペクション

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

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

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

名前変更

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

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

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

カスタムコマンドの作成

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

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

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

TypeScript 宣言への移動

コマンド実装と対応する TypeScript 宣言の間を移動したい場合があります：

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

カスタムコマンドの使用

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

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

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

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

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

2026 年 11 月 6 日