Cypress（サイプレス）
Cypress(英語) は、Web アプリケーション用のオープンソーステストフレームワークです。 開発者に、エンドツーエンドのテストを自動化するための高速で信頼性の高いソリューションを提供します。 Cypress は、その独自のアーキテクチャと包括的な機能セットにより、効率的なテスト作成、デバッグ、一般的なフレームワークや CI/CD パイプラインとの統合を可能にします。
新しい Cypress プロジェクトを作成する
メインメニューで へ移動します。
または、 ようこそ 画面を表示している場合は、 新規プロジェクト をクリックします。
左側のリストから Cypress（サイプレス） を選択します。
場所 フィールドでプロジェクトの場所を指定します。 プロジェクト名は、指定されたパス内のフォルダー名から自動的に派生されます。
Node.js ランタイム を指定します。
パッケージマネージャー を指定します。
作成 をクリックしてください。
選択したオプションに従って新しいプロジェクトが作成されます。
コードに要素を追加する
要素を追加するファイルを開きます。
右側のサイドバーの
をクリックして、 Web インスペクター ツールバーウィンドウを開きます。アドレスバーにページの URL を指定します。
「
」をクリックし、Web インスペクターで追加する要素を選択します。
要素を選択したら、「
」をクリックして要素をコードに追加します。
特定のタイプのセレクター (ID、 名前、 クラスでタグ付けするなど) を追加するには、
をクリックして必要なオプションを選択します。
CSS ロケーターと XPath ロケーターの間で具体的に切り替える場合は、
をクリックして、必要なロケーター型を選択します。
その結果、コードの一部が生成され、コードエディターに追加されます。
テストの実行
テストを実行するには、テストクラスまたはテストメソッドの横にある
ガターアイコンをクリックし、リストから 実行 オプションを選択します。あるいは、キャレットをテストクラスに置いてそのクラス内のすべてのテストを実行するか、テストメソッドにキャレットを置き、 Ctrl+Shift+F10 を押します。
実行 / デバッグ構成を使用すると、よりカスタマイズ可能な方法でテストを実行できます。 詳細については、 テストの実行 を参照してください。
テスト結果を確認する
テストの実行が終了すると、結果が 実行 ツールウィンドウの テストランナー タブに表示されます。 このタブでは、テストの再実行、テスト結果のエクスポートとインポート、各テストの実行にかかった時間を確認したり、その他のアクションを実行したりできます。
詳細については、 テスト結果を調べる を参照してください。
デバッグテスト
実行 / デバッグ構成を変更する
テストの起動プロパティを変更したい場合は、実行 / デバッグ構成を編集します：
実行 / デバッグ構成スイッチャーで現在の構成をクリックし、 Edit Configurations… オプションを選択します。
実行 / デバッグ構成 ダイアログで、編集する構成を選択します。
必要なスタートアッププロパティを構成します。
変更を適用して OK をクリックします。
実行 / デバッグ構成の詳細については、 実行 / デバッグ構成 を参照してください。
ロケーターテンプレートをカスタマイズする
選択した要素をコードに追加する方法をカスタマイズしたい場合は、テンプレートを変更できます：
ステータスバーのフレームワーク名をクリックします。 UI オートメーションフレームワーク メニューが開きます。
テンプレートのカスタマイズ オプションを選択してください。
ファイルおよびコードテンプレート ダイアログで、リストから必要なフレームワークを選択します。
Web 要素ロケーターのコード生成アルゴリズムを書き換えます。
変更を保存するには、 OK をクリックします。
その結果、更新されたコード生成アルゴリズムに従ってロケーターがコードに追加されます。
Cypress Launchpad を開く
必要に応じて、現在のプロジェクトを Cypress ランチパッド(英語)で開くことができます。 これを行うには、 ⌘ ⌃ ] を押します。
