Cypress カスタムコマンド
カスタムコマンド(英語)は、Cypress テストスイート全体で特定のメソッドまたは関数を再利用する方法を提供します。例: ユーザーにログインするコマンドを作成し、必要に応じてプロジェクト内で再利用できます。
WebStorm はカスタムコマンドをサポートしています。つまり、名前変更、ナビゲーション、コード補完、インスペクションなどのすべてのコーディング支援機能がすぐに利用可能になります。
カスタムコマンドのコーディング支援
Cypress 固有のインスペクション
Cypress はチェーンメカニズム(英語)を利用して、チェーンが終了するかエラーが発生するまで情報が 1 つのコマンドから次のコマンドに受け渡される一連のコマンドを作成できます。
ただし、このメカニズムにはいくつかの特徴があります。例: アクションコマンド(英語)は常にチェーンの最後に配置し、1 回だけ使用する必要があります。
この例では、チェーンに 2 つのアクションコマンドが連続して配置されていますが、これは禁止されています。このテストを実行するとエラーが発生します。
この例では、チェーンが 2 つに分割されているため、各チェーンにはアクションコマンドが 1 つだけ含まれています。このテストは問題なく実行されます。
コマンドチェーンの検証は JavaScript/TypeScript では実行されず、Cypress では実行時にのみ実行されるため、テスト実行中に問題が発生する可能性があります。WebStorm は、連鎖コマンド用のインスペクションを提供し、誤った使用箇所をハイライトします。
機能別インスペクション
WebStorm は、プロジェクト内の異常なコードを検出して修正する関数固有のコードインスペクションを実行します。
例: コマンドに間違った数または型の引数を指定すると、間違ったコードがハイライトされます。ハイライトされたコードの上にマウスを置くと、エラーの説明が表示されます。
詳細は、コードインスペクションを参照してください。
名前変更
コマンドの名前を変更する必要がある場合は、名前変更リファクタリングを使用できます。
名前を変更するコマンドをハイライトします。
Shift+F6 を押して、コマンドの新しい名前を入力します。
(オプション) 追加の検索オプションを構成し、範囲を定義します。
リファクタリングをクリックします。
カスタムコマンドの作成
カスタムコマンドを作成するには、まずコマンドを作成し、次にそのコマンドの TypeScript 宣言を作成する必要があります。
コードエディターにコマンドを記述します。
ハイライトされたコードの上にマウスを置き、欠落している TypeScript 宣言を作成するをクリックします。
あるいは、ハイライトされたコードにキャレットを置き、Alt+Enter を押して、欠落している TypeScript 宣言を作成するを選択します。
その結果、TypeScript 宣言が生成され、cypress/support/index.d.ts ファイルに追加されます。
TypeScript 宣言への移動
コマンド実装と対応する TypeScript 宣言の間を移動することもできます。
TypeScript 宣言に移動するには、コマンド実装の近くのガターにある
をクリックします。
コマンド実装に戻るには、TypeScript 宣言の近くのガターにある
をクリックします。
カスタムコマンドの使用
カスタムコマンドを作成したら、それをコード内で使用できます。
テストでは、「
cy.」と入力し、その後にカスタムコマンドの名前を入力します。
コマンドファイルの場所を変更する
デフォルトでは、生成された TypeScript 宣言を含むファイルは cypress/support/commands.ts にあります。場所を変更したい場合:
Ctrl+Alt+S を押して設定を開き、 を選択します。
カスタムコマンドの TS 宣言を保存する TypeScript ファイルフィールドに新しいパスを指定します。
変更を適用し、ダイアログを閉じます。
関連ページ：
Web UI テストの自動化
WebStorm の Web UI テスト自動化機能は、テストの自動化プラグインによって提供されます。このプラグインは、自動 UI テストの開発と保守に役立ち、テスト自動化用のスタンドアロン JetBrains IDE である Aqua によって提供される機能の重要な部分を構成します。テストの自動化プラグインは次の機能を提供します。Cypress および Playwright フレームワークの豊富なサポート、Cypress/Playwright テストを実行、デバッグ、検査する機能、広範なコーディング支援...
コードインスペクション
WebStorm には、プロジェクト内の異常なコードを検出して修正する一連のコードインスペクションがあります。IDE は、さまざまな問題を見つけてハイライトし、デッドコードを見つけ、考えられるバグやスペルの問題を見つけ、全体的なコード構造を改善することができます。インスペクションは、すべてのプロジェクトファイルまたは特定のスコープでのみ（たとえば、本番コードまたは変更されたファイルでのみ）コードをスキャンできます。すべてのインスペクションには、問題がコードに影響を与える可能性がある程度の重大度レ...
Cypress
Cypress は、Web アプリケーション用のオープンソーステストフレームワークです。開発者に、エンドツーエンドのテストを自動化するための高速で信頼性の高いソリューションを提供します。Cypress は、その独自のアーキテクチャと包括的な機能セットにより、効率的なテスト作成、デバッグ、一般的なフレームワークや CI/CD パイプラインとの統合を可能にします。新しい Cypress プロジェクトを作成する：メインメニューで、に移動します。または、ウェルカム画面を表示している場合は、新規プロジェク...
Playwright
Playwright は、オープンソースのテスト自動化フレームワークです。Chrome、Firefox、Safari などの Web ブラウザーを自動化するための高レベル API を提供します。新しい Playwright プロジェクトを作成する：メインメニューで、に移動します。または、ウェルカム画面を表示している場合は、新規プロジェクトをクリックします。左側のリストから、Playwright を選択します。新しいプロジェクトに名前を付け、必要に応じてその場所を変更します。Node.js ランタイ...