目次
- サイプレスコマンドとは何ですか？
- サイプレスが提供するUIインタラクションコマンド
- サイプレスの右クリックコマンド
- サイプレスダブルクリックコマンド
- サイプレスクリックコマンド
- サイプレストリガーコマンド
- サイプレスタイプコマンド
- サイプレス選択コマンド
- サイプレスチェックコマンド
- サイプレスクリアコマンド
- サイプレスコマンドは非同期ですか？
- サイプレスカスタムコマンド
- サイプレスでのアサーションコマンドの連鎖
- 既存のサイプレスコマンドを上書きする
- サイプレスチェーン可能コマンド
- サイプレスの親カスタムコマンド
- サイプレスの子カスタムコマンド
- サイプレスのデュアルカスタムコマンド
- サイプレスのカスタムコマンドと例
- サイプレスのインポートコマンド
- サイプレスカスタムコマンドIntelliSense
サイプレスコマンドとは何ですか？
サイプレスは、アプリケーションのUIと対話するためのAPIとメソッドを提供します。 それらはサイプレスコマンドとして知られており、Webアプリケーションの相互作用を支援します。 使用可能なすべてのコマンドにはメソッドが組み込まれており、テストケースでのみメソッドを呼び出します。 サイプレスコマンドは、アプリケーションで操作を実行しようとしているユーザーと同様のアクションをシミュレートします。
サイプレスが提供するUIインタラクションコマンド
UIと対話するサイプレスによって提供されるさまざまなコマンドがあります。 すべてのコマンドのリストを詳しく調べます。
- 。クリック（）
- .dblclick（）
- 。右クリック（）
- 。タイプ（）
- 。クリア（）
- 。チェック（）
- .uncheck（）
- 。選択する（）
- 。引き金（）
サイプレスクリックコマンド
。クリック（） –このコマンドは クリック DOM上の任意の要素。
クリックコマンドの構文は次のとおりです
.click()
.click(options)
.click(position)
.click(position, options)
.click(xCoordinate, yCoordinate)
.click(xCoordinate, yCoordinate, options) 上記のように、クリックは次のようなパラメータを受け入れます オプション、ポジション、 及び 座標.
オプション
クリックに渡すことができる可能なオプションは次のとおりです。
| オプション | デフォルト | 商品説明 |
|---|---|---|
| 代替キー | false | 次のように、代替キー（MacではOptionキー）をオンにします。 optionKey |
ctrlKey | false | コントロールキーをオンにします。 としても知られている： controlKey. |
| メタキー | false | メタキー（Windowsの場合はWindowsキー、Macの場合はコマンドキー）を操作します。 また： commandKey, cmdKey. |
| シフトキー | false | シフトキーを作動させます |
| ログ | true | コマンドラインでログを出力します |
| 力 | false | このオプションは、アクションを強制し、アクション可能性の待機を無効にします |
| 複数 | false | 複数の要素を順番にクリックする |
| タイムアウト | defaultCommandTimeout | タイムアウトを解決する前に.click（）待機する時間 |
| アニメーションを待つ | アニメーションを待つ | コマンドを実行する前に、要素のアニメーションが完了するのを待つオプション |
体位
.click（）に渡すことができるさまざまなタイプの位置は次のとおりです。
- 中心 （デフォルト)
- 左
- 右
- top
- 左上
- 右上
- ボトム
- 左下の
- 右下
例
cy.get（'btn'）。click（）//ボタンをクリックしますcy.get（'btn'）。click（{force：true}）//オプション'force'をtruecyとして渡してボタンをクリックします。 get（'btn'）。click（'bottomRight'）//ボタンの右側の位置にあるボタンをクリックしますcy.get（'btn'）。click（10、70、{force：true}）//ボタンをクリックします位置の値と力をtrue
サイプレスダブルクリックコマンド
ダブルクリックはを使用して達成することができます dblclick() サイプレスの構文。
構文
.dblclick()
.dblclick(position)
.dblclick(x, y)
.dblclick(options)
.dblclick(position, options)
.dblclick(x, y, options)オプション
.dblclick() によって受け入れられるすべてのオプションを受け入れます .click()。 上記のセクションでオプションを見つけることができます。
体位
で指定されているすべての可能な位置 .click() またのために利用できます dblclick()。 ポジションのリストは上記のセクションにあります。
例
cy.get（'button'）。dblclick（）//ボタンをダブルクリックcy.focused（）。dblclick（）//フォーカスのある要素をダブルクリックcy.contains（'Home'）。dblclick（）//ダブル'ホーム'を含む最初の要素をクリックしますcy.get（'button'）。dblclick（'top'）//上部のボタンをダブルクリックしますcy.get（'button'）。dblclick（30、10）// 30と10の座標をダブルクリックします
サイプレスの右クリックコマンド
このサイプレスコマンドは、DOM要素を右クリックします .rightclick() コマンドはブラウザのコンテキストメニューを開きません.rightclick() 次のようなアプリケーションでの右クリック関連イベントの処理をテストするために使用されます。 contextmenu.
構文
.rightclick()
.rightclick(position)
.rightclick(options)
.rightclick(position, options)
.rightclick(x, y)
.rightclick(x, y, options)オプション
上で見たように、によって受け入れられるすべてのオプション .click() コマンドは次のように構成できます .rightclick() コマンドも。
体位
に渡すことができるすべての可能な位置 .rightclick() と同じです .click() 上記の通り。
例
cy.get（'。welcome'）。rightclick（）// .welcomeを右クリックcy.focused（）。rightclick（）//フォーカスのある要素を右クリックcy.contains（'January'）。rightclick（）/ /'January'を含む最初の要素を右クリックcy.get（'button'）。dblclick（'topRight'）//右上のボタンをダブルクリックcy.get（'button'）。dblclick（80、20 ）//80と20の座標をダブルクリックします
サイプレスタイプコマンド
.type() コマンドはDOM要素に値を入力します。
構文
.type(text)
.type(text, options)Arguments
.type() 文字列を引数として受け入れます。 に渡される値 .type() 以下に示す特殊文字シーケンスのいずれかを含めることができます。
| シーケンス | 免責事項 |
|---|---|
{{} | リテラルを入力します { キー |
{backspace} | カーソルの右から左に文字を削除します |
{del} | カーソルの左から右に文字を削除します |
{downarrow} | カーソルを下に移動します |
{end} | 行末にカーソルを移動します |
{enter} | Enterキーを入力します |
{esc} | Escキーを入力します |
{home} | カーソルを行の先頭に移動します |
{insert} | 文字をカーソルの右側に配置します |
{leftarrow} | カーソルを左に移動します |
{movetoend} | カーソルを入力可能な要素の末尾に移動します |
{movetostart} | カーソルを入力可能な要素の先頭に移動します |
{pagedown} | 下にスクロールします |
{pageup} | 上にスクロール |
{rightarrow} | カーソルを右にシフトします |
{selectall} | を作成してすべてのテキストを選択します selection range |
{uparrow} | カーソルを上に移動します |
オプション
オブジェクトをオプションとして渡して、のデフォルトの動作を変更できます。 .type()
| オプション | デフォルト | 商品説明 |
|---|---|---|
delay | 10 | 各キーを押した後の時間遅延のオプション |
force | false | アクションを強制的に実行して無効にします 実用性を待っています |
log | true | のログを表示します コマンドログ |
parseSpecialCharSequences | true | で囲まれた文字列の特殊文字を解析します {}、 といった {esc}。 オプションをに設定できます false リテラル文字を入力します。 |
release | true | このオプションを使用すると、コマンド間で修飾子をアクティブにしたままにすることができます |
scrollBehavior | scrollBehavior | コマンドを実行する前に要素をスクロールするビューポートの位置 |
timeout | defaultCommandTimeout | 待つ時間 .type() タイムアウトする前に解決するコマンド |
waitForAnimations | waitForAnimations | 要素を待つかどうかを言うには アニメーションを終了します コマンドを実行する前。 |
例
の例を見てみましょう .type() command
cy.get（'textarea'）。type（'Hey there'）//テキスト領域に値を入力しますcy.get（'body'）。type（'{shift}'）//シフトキーを有効にしますcy.get （'body'）。type（'{rightarrow}'）//タイプイベントの右矢印
サイプレスクリアコマンド
Clearコマンドは、入力領域またはテキストフィールドの値をクリアします。
構文
clearコマンドの構文は次のとおりです。
.clear()
.clear(options)オプション
に渡すことができるオプションを調べます .clear() コマンド。
| オプション | デフォルト | 商品説明 |
|---|---|---|
force | false | これにより、アクションが強制され、アクション可能性が発生するのを待つことができなくなります |
log | true | コマンドログにコマンドを表示します |
scrollBehavior | scrollBehavior | コマンドを実行する前に要素をスクロールする必要があるビューポートの位置 |
timeout | defaultCommandTimeout | このオプションは待つ時間です .clear() タイムアウトする前に解決する |
waitForAnimations | waitForAnimations | これは、コマンドを実行する前に、要素のアニメーション化が完了するのを待ちます。 |
例
明確なコマンドの例を見てみましょう
cy.get（'[type = "text"]'）。clear（）//タイプテキストの入力をクリアしますcy.get（'textarea'）。type（' Welcome！'）。clear（）//textareacyをクリアします.focused（）。clear（）//フォーカスされた入力/テキストエリアをクリアします
サイプレスチェックコマンド
checkコマンドは、チェックボックスまたはラジオボタンをチェックするか、簡単に言うとチェックボックスをオンにします。 チェックボックスまたはラジオボタンのチェックを外すには、 .uncheck() コマンド。
構文
サイプレスのcheckコマンドの構文を理解します。
//Syntax for check command
.check()
.check(value)
.check(options)
.check(values, options)
//Syntax for uncheck command
.uncheck()
.uncheck(value)
.uncheck(options)
.uncheck(values, options)オプション
チェック/チェック解除コマンドに渡すことができる可能なオプションは、上記のclearコマンドと同じオプションです。
例
checkコマンドとuncheckコマンドを使用する方法の例を調べます。
cy.get（'[type = "checkbox"]'）。check（）//チェックボックス要素をチェックしますcy.get（'[type = "radio"]'）。first（）。check（）//最初のラジオをチェックしますelement cy.get（'[type = "radio"]'）。check（'Male'）//男性のある無線要素をチェックしますcy.get（'[type = "checkbox"]'）。uncheck（）/ /チェックボックス要素のチェックを外しますcy.get（'[type = "radio"]'）。uncheck（）//最初のラジオ要素のチェックを外しますcy.get（'[type = "checkbox"]'）。uncheck（'Breakfast'） //朝食要素のチェックを外します
サイプレス選択コマンド
select Cypressコマンドを使用すると、内の要素を選択できます。鬼ごっこ。
構文
selectコマンドの構文は次のとおりです
.select(value)
.select(values)
.select(value, options)
.select(values, options)オプション
オプションを渡して、selectコマンドのデフォルトの動作を変更できます。
| オプション | デフォルト | 商品説明 |
|---|---|---|
force | false | このオプションは、アクションを強制的に実行し、アクション可能性の待機を無効にします |
log | true | コマンドログにログを表示し、デフォルトでtrueに設定されています |
timeout | defaultCommandTimeout | このオプションは待つ時間です .select() タイムアウトする前に解決する |
例
selectコマンドの例を見てみましょう
cy.get（'select'）。select（'butterfly'）//'butterfly'オプションを選択しますcy.get（'select'）。select（0）//インデックスが0の要素を選択しますcy.get（'select '）.select（[' parrot'、' peacock']）//オウムと孔雀のオプションを選択します
サイプレストリガーコマンド
Triggerコマンドは、要素のイベントをトリガーするのに役立ちます。
構文
トリガーコマンドにアクセスするための構文を調べます
.trigger(eventName)
.trigger(eventName, position)
.trigger(eventName, x, y)
.trigger(eventName, position, options)
.trigger(eventName, options)
.trigger(eventName, x, y, options)オプション
Triggerコマンドは、に記載されているすべてのオプションを受け入れます .clear() 指図。 さらに、以下にリストされている構成可能なオプションがいくつかあります。
| オプション | デフォルト | 商品説明 |
|---|---|---|
bubbles | true | イベントがバブルするかどうか |
cancelable | true | イベントをキャンセルできるかどうか |
eventConstructor | Event | イベントオブジェクトを作成するためのコンストラクター（例： MouseEvent, keyboardEvent) |
例
さまざまな使い方をしましょう .trigger() コードで
cy.get（'a'）。trigger（'mouseover'）//リンクでマウスオーバーイベントをトリガーしますcy.get（'。target'）。trigger（'mousedown'、{button：0}）//マウスダウンはでトリガーされますbutton 0 cy.get（'button'）。trigger（'mouseup'、topRight、{bubbles：false}）//bubbleをfalseに設定してtopRight位置でマウスアップをトリガー
サイプレスコマンドは非同期ですか？
すべてのサイプレスコマンドは非同期です。 それらは後で実行するためにキューに入れられ、コマンドの完了を待ちません。 サイプレスコマンドは、呼び出し時に何も実行しません。代わりに、後で実行するために保存します。 サイプレスの非同期動作を理解できます (詳細を見る)。
サイプレスチェーン可能コマンド
サイプレスでは、一連のコマンドを使用してDOMの要素を操作できます。 コマンドの連鎖が内部でどのように機能するかを理解することが不可欠です。 特定の行でコマンドをチェーンしている場合、サイプレスはコマンドチェーンに基づいてpromiseを処理し、コマンドチェーンが終了するかエラーが発生するまで、次のコマンドの件名に基づいてコマンドを生成します。
サイプレスでは、要素をクリックしたり、要素を使用して要素に入力したりできます。 .click() or .type() を使用して要素を取得することによるコマンド cy.get() or cy.contains()。 コマンドを連鎖させる簡単な例を見てみましょう
cy.get（'textarea'）。type（'お元気ですか？'）
上記の例では、 cy.get() サイプレスコマンドのXNUMXつであり、 .type() 別のコマンドです。ここでは、 .type() にコマンド cy.get() コマンド、から生成されたサブジェクトに入力するように指示します cy.get() エレメント。 同様に、上記で説明したすべてのコマンドをチェーンできます。
サイプレスでのアサーションコマンドの連鎖
サイプレスを使用して複数のコマンドをチェーンするのと同様に、コマンドを使用してアサーションをチェーンすることもできます。 アサーションは、説明するためのコマンドです。 予想される アプリケーションの状態または動作。 サイプレスは、要素が期待される状態に達するまで待機し、アサーションが合格しない場合、テストは失敗します。 要素をアサートする際にチェーンコマンドを使用する方法を見ていきます。
cy.get（'button'）。should（'be.disabled'）//ボタンを無効にする必要があるかどうかを期待しますcy.get（'form'）。should（'have.class'、'form-vertical'）/ /フォームのクラスを'form-vertical'cy.get（'input'）。should（'not.have.value'、'Name'）//入力に値を持たせないかどうかをアサートする'Name '
上記のように、私たちは使用しています cy.get() コマンドとそれを連鎖させる .should() 結果に基づいて動作を期待するアサーションコマンド。 このように、チェーンを使用できます サイプレスのアサーションコマンド.
サイプレスカスタムコマンド
サイプレスは、要件に基づいてコマンドを作成するためのAPIを提供しています。 サイプレスのカスタムコマンドは、既存のデフォルトコマンドと似ていますが、 ユーザー定義の。 カスタムコマンドを使用すると、コマンドをいじって、ユースケースに基づいてそれらを連鎖させることができます。 サイプレスのカスタムコマンドは、テストで何度も再利用する必要がある場合に、ワークフローで役立ちます。
サイプレスで新しいカスタムコマンドを作成するための構文を見てみましょう。
Cypress.Commands.add(name, callbackFn)
Cypress.Commands.add(name, options, callbackFn)
Cypress.Commands.overwrite(name, callbackFn)ここで、引数は次のとおりです
名 –追加または上書きする文字列内のコマンドの名前
コールバックFn –この関数は、コマンドに渡された引数を取ります
オプション –オプションオブジェクトを渡して、コマンドの動作を定義します
注意 ：オプションは、追加コマンドと 上書きコマンドをサポートしていません
| オプション | 受け入れる | デフォルト | 商品説明 |
|---|---|---|---|
prevSubject | Boolean, String or Array | false | 以前に生成されたサブジェクトを処理する方法を定義します。 |
そのオプション prevSubject 受け入れは次のとおりです
false–前のサブジェクトを無視する（親コマンド）true–前のサブジェクトを受け入れる（子コマンド）optional–新しいチェーンを開始するか、既存のチェーンを使用するかを渡します（デュアルコマンド）
サイプレスの親カスタムコマンド
サイプレスで親カスタムコマンドを追加する方法を見ていきます。 前のコマンドをチェーンオフした場合でも、親コマンドは常に新しいコマンドチェーンを開始します。 以前にチェーンされたコマンドは無視され、新しいコマンドは常にチェーンされます。 親コマンドのいくつかは cy.visit(), cy.get(), cy.request(),cy.exec(), cy.route()
例
サイプレスで親カスタムコマンドを作成する方法の例を示します
Cypress.Commands.add（'clickLink'、（label）=> {cy.get（'a'）。contains（label）.click（）}）//「今すぐ購入」リンクをクリックcy.clickLink（'Buy今'）
上記の例では、 'クリックリンク'はカスタムコマンドの名前です。 検索します ラベル。 2行目で、コマンドは 'を取得しますa'、ラベルを含むリンクを検索し、要素をクリックします。 cy.clickLink() テストファイルでアクションを実行し、「今すぐ購入」リンク。
サイプレスの子カスタムコマンド
サイプレスの子カスタムコマンドは、親コマンドまたは別の子コマンドからチェーンされています。 前のコマンドの件名は、コールバック関数に渡されます。
子コマンドとしてチェーンできるサイプレスコマンドのいくつかは次のとおりです。 .click(), .trigger(), .should(), .find(), .as()
例
子カスタムコマンドをチェーンする方法の例を調べます
Cypress.Commands.add（'forceClick'、{prevSubject：'element'}、（subject、options）=> {//既存のサブジェクトをラップして何かを行うcy.wrap（subject）.click（{force：true }）}）//テストファイルのforceClickにアクセスするcy.get（ "[data-test ='panel-VALUES']"）。forceClick（）;
上記の例では、カスタムコマンドに「」という名前を付けています。フォースクリック'。 prevSubject引数を要素に渡し、既存のサブジェクトをラップします。 と cy.wrap()、件名を強制クリックしています。 次に、テストファイルで、カスタムコマンドにアクセスしています。フォースクリック'に cy.get() コマンド。
サイプレスのデュアルカスタムコマンド
デュアルカスタムコマンドは、親コマンドと子コマンドのハイブリッドです。 新しいコマンドチェーンを開始することも、既存のコマンドをチェーンオフすることもできます。 デュアルコマンドは、既存のサブジェクトの有無にかかわらず、コマンドをさまざまな方法で機能させる場合に役立ちます。
デュアルコマンドに使用できるコマンドのいくつかは次のとおりです。 cy.contains(), cy.screenshot(), cy.scrollTo(), cy.wait()
例
デュアルカスタムコマンドの使用方法の例を見てみましょう
Cypress.Commands.add（'getButton'、{prevSubject：'optional'}、（subject）=> {if（subject）{cy.get（subject）.get（'btn'）。its（'button'）; } else {cy.get（'btn'）。its（'button'）;}}）
場合によっては、要素のすべてのボタンを取得するgetButtonを使用してテキストのボタンを取得する必要があります。 これで、getButtonを使用して、を親要素とチェーンしたり、子要素をチェーンしたりして、親の要素を呼び出すことができます。
から prevSubject オプションの場合、以下のように、サブジェクトを引数として渡すか、テストファイルにサブジェクトなしでコマンドを呼び出すことができます。
cy.getButton（）//件名なしcy.get（'＃loginBtn'）。getButton（）//件名あり
既存のサイプレスコマンドの上書き
最後に元のコマンドを使用しようとする別のコマンドが作成されないように、既存のサイプレスコマンドを上書きして動作を変更できます。
上書きできる元のサイプレスコマンドの一部は次のとおりです。 cy.visit(), cy.type(), cy.screenshot(), cy.contains()
例
見てみましょう 既存のサイプレスを上書きする方法の例 コマンド。
Cypress.Commands.overwrite（'contains'、（originalFn、subject、filter、text、options = {}）=> {//フィルター引数が渡されたかどうかを判別if（typeof text ==='object'）{options = text text = filter filter = undefined} options.matchCase = false return originalFn（subject、filter、text、options）}）
上で見たように、私たちは使用しています Cypress.Commands.overwrite 既存のサイプレスコマンドを変更します。 カスタムコマンドに次の名前を付けています contains そして、フィルター引数が渡されたかどうかを判別するために引数を渡しています。
サイプレスのインポートコマンド
このセクションでは、サイプレスコマンドをインポートする方法を理解します。
サイプレスのカスタムコマンドを作成する必要があります サイプレス/サポート/commands.js ファイル。 command.jsファイルにカスタムコマンドを追加し、テストケースファイルにインポートして使用します。
サイプレスのカスタムコマンドと例
カスタムコマンドを作成し、リアルタイムの例を使用してスペックファイルで使用する方法を理解します。
上で見たように、下に新しいカスタムコマンドを追加する必要があります コマンド.js ファイル。 そのファイルに、ログイン機能のカスタムコマンドを追加しましょう
Cypress.Commands.add（ "login"、（username、password）=> {// loginという名前の新しいコマンドを追加しますcy.get（'[id = Email]'）。clear（）; cy.get（'[id = Email]'）。type（username）; cy.get（' [id = Password]'）。clear（）; cy.get（' [id = Password]'）。type（password）; cy.get（ '[type = submit]'）。click（）;}）;
上記のコードでは、カスタムコマンドに次の名前を付けています。 ログイン。 カスタムコマンド内に、ユーザー名フィールドをクリアし、テキストフィールドに値を入力する手順を追加しました。 同様に、フィールドをクリアし、パスワードフィールドにパスワードを追加します。 後で、送信ボタンをクリックします。 これは、ユーザー名とパスワードのXNUMXつの引数を受け入れる単純なカスタムコマンドです。 スペックファイルでユーザー名とパスワードの値を渡します。
それでは、という名前のスペックファイルを作成しましょう。 customCommand.spec.js 統合フォルダの下。 スペックファイルには次のコードが含まれます
describe（ "カスタムコマンドの例"、（）=> {it（ "カスタムコマンドを使用してログインする必要があります"、（）=> {cy.visit（ "https://admin-demo.nopcommerce.com/"）; cy .login（ "admin@yourstore.com"、 "admin"）; cy.url（）。should（'be.equal'、'https://admin-demo.nopcommerce.com/admin/'）}）; }）;
上で見たように、カスタムコマンドに次のようにアクセスしています cy.login() 、ユーザー名とパスワードの値を渡します。
サイプレスカスタムコマンドIntelliSense
IntelliSenseは、テストの作成中にIDEまたはコードエディターでインテリジェントなコード提案を直接提供します。 コマンド定義、ドキュメントページへのリンク、およびコード例を表示するポップアップを表示すると便利です。 Visual Studio CodeやIntellJなどの最新のコードエディターを使用している場合は、IntelliSenseが非常に役立ちます。
IntelliSenseは、Typescriptを使用して構文を理解し、表示します。 カスタムコマンドを記述し、カスタムコマンドのTypeScript定義を提供すると、プロジェクトでJavaScriptのみを使用している場合でも、トリプルスラッシュを使用してIntelliSenseを表示できます。
IntelliSenseを構成するには、コードを次のように記述する必要があります。 サイプレス/サポート/index.d.ts ファイル。
//サイプレスオブジェクト"cy"のタイプ定義/// 名前空間を宣言するCypress{interfaceChainable {/***クレデンシャルでログイン*@example* cy.login（username、password）* / login（username：String、password：String）：Chainable }}
ここで、スペックファイルにTypescript定義がいくつかあることを通知する必要があります。 index.d.ts ファイル。 したがって、スペックファイルの先頭に、以下のコードを追加して、IntelliSenseが提案を提供できるようにします。
//「login」などのカスタムコマンドのタイプ定義//「cypress/support/index.d.ts」に解決されます//
上で見たように、IntelliSenseは、command.jsファイルで提供した引数を提供し、自動補完に役立ちます。
