サイプレスアサーションは、特定のアサーションをアサートするのに役立ちます。アサーションは、期待される結果が実際の結果と等しいかどうかを確認する検証手順です。 テスト自動化では、テストが期待される結果を生成していることを確認するステートメントをアサートします。 アサーションが失敗した場合、テストケースは失敗し、バグがあることを確認します。 この記事では、 Handsonの実装と例を使用したサイプレスアサーション.
コンテンツの表
- サイプレスアサーションとは何ですか？
- サイプレスアサートテキスト
- サイプレス共通アサーション
- サイプレス再試行アサーション
- サイプレスアサーションの例
- サイプレスでの暗黙のアサーション
- サイプレスでの明示的なアサーション
- ネガティブサイプレスアサーション
- サイプレスカスタムアサーションメッセージ
- サイプレスアサーションのベストプラクティス
サイプレスアサーションとは何ですか？
Cypressは、Chaiアサーションライブラリと、SinonやJQueryなどの拡張機能を使用してラップします。 サイプレスは、アサーションが解決されるまで自動的に待機して再試行します。 アサーションは、アプリケーションがどのように見えるかを説明するために使用できます。 サイプレスアサーションは、待機、再試行、目的の状態に達するまでブロックを組み合わせて使用できます。
サイプレスアサートテキスト
一般的な英語では、次のようなアサーションを説明します。 ボタンにはログインテキストが含まれていると思います。 同じアサーションをサイプレスで書くことができます
cy.get('button').should('have.value', 'login')
上記のアサーションは、ボタンに「ログイン」値がある場合に合格します。
サイプレスの一般的なアサーション
テストケースで使用する一般的なサイプレスアサーションのセットがあります。 一緒に使用します .should() 。 ユースケースと例を見てみましょう。
一般的なサイプレスアサーションの一部を以下に示します
- 着丈
- 値
- テキストコンテキスト
- CLASS
- 存在
- CSS
- 透明性
- 都道府県
- 無効なプロパティ
サイプレスの長さのアサーション
length() 特定の要素の長さがチェックされます
cy.get('dropdown').should('have.length', 5)サイプレスバリューアサーション
サイプレスの値は、特定の要素が期待値を持っている場合にアサートされます
cy.get('textfield').should('have.value', 'first name')サイプレステキストコンテキストアサーション
要素に特定のテキストがある場合、テキストコンテキストがアサートされます
cy.get('#user-name').should('have.text', 'John Doe')サイプレスクラスアサーション
クラスが存在するか、特定の要素にクラスが必要かをアサートします
cy.get('form').find('input').should('have.class', 'disabled')サイプレス存在アサーション
Existenceコマンドは、特定の要素がDOMに存在するか、存在するかどうかを確認します
cy.get('#button').should('exist')サイプレスCSSアサーション
CSSアサーションは、特定の要素に特定のプロパティがあるかどうかをチェックします
cy.get('.completed').should('have.css', 'text-decoration', 'line-through')サイプレスの可視性アサーション
Cypress Visibility Assertionは、DOM要素がUIに表示されているかどうかをアサートします
cy.get('#form-submit').should('be.visible')サイプレス状態アサーション
DOM要素の状態をアサートします
cy.get(':radio').should('be.checked')サイプレス無効プロパティアサーション
Cypress Disabledプロパティアサーションは、要素が無効かどうかをアサートします
cy.get('#example-input').should('be.disabled')サイプレス再試行アサーション
単一のコマンドの後にアサーションが続くと、順番に実行されます。 最初にコマンドが実行され、次にアサーションが実行されます。 単一のコマンドとそれに続く複数のアサーションも順番に実行されます–それぞれ最初とXNUMX番目のアサーション。 したがって、最初のアサーションが通過すると、最初とXNUMX番目のアサーションがコマンドとともに再度実行されます。
たとえば、次のコマンドには両方が含まれています .should() 及び .and() アサーションコマンド、ここで .and() 別名 .should()
cy.get（'。todo-listli'）//コマンド.should（'have.length'、2）//アサーション.and（（$ li）=> {//さらに2つのアサーションexpect（$ li.get （0）.textContent、'最初のアイテム'）.to.equal（'todo A'）expect（$ li.get（1）.textContent、'XNUMX番目のアイテム'）.to.equal（'todo B'）}）
サイプレスアサーションの例
このセクションでは、サイプレスのさまざまなタイプのアサーションについて説明します。
- 暗黙のアサーション
- 明示的なアサーション
例を使用して、両方のタイプについて詳しく説明します。
サイプレスでの暗黙のアサーション
暗黙のアサーションでは、 .should() or .and() コマンド。 これらのアサーションコマンドは、一連のコマンドで現在生成されているサブジェクトに適用されます。 それらは以前に得られた主題に依存しています。
使い方の例を見ていきます .should() or .and() コマンド
cy.get（'button'）。should（'have.class'、'enabled'）
.and() これはのエイリアスです .should() 、複数のアサーションをチェーンできます。 これらのコマンドはより読みやすくなっています。
cy.get（'＃title'）.should（'have.class'、'active'）.and（'have.attr'、'href'、'/ post'）
上記の例は .should() クラスが「アクティブ」である必要があることを示し、その後に .and() 同じコマンドに対して実行されます。 これは、複数のコマンドをアサートする場合に非常に役立ちます。
サイプレスでの明示的なアサーション
アサーションで明示的なサブジェクトを渡すことは、サイプレスアサーションの明示的なタイプに分類されます。 ここでは、 expect 及び assert アサーションとしてのコマンド。 明示的なアサーションは、同じサブジェクトに対して複数のアサーションを使用する場合に使用されます。 また、明示的なアサーションを使用します カスタムをしたいときのサイプレス アサーションを作成する前のロジック。
調べてみます 明示的なサイプレスの例 アサーション
expect（true）.to.be.true //ブール値のexpect（object）.to.equal（object）をチェックします
ネガティブサイプレスアサーション
ポジティブアサーションと同様に、サイプレスにもネガティブアサーションがあります。 アサーションステートメントのプレフィックスに追加された「not」キーワードを使用します。 否定的な主張の例を見てみましょう
cy.get('#loading').should('not.be.visible')ネガティブアサーションは、アプリケーションによって特定のアクションが実行された後、特定の条件が使用できなくなったことを確認する場合にのみ推奨されます。
たとえば、トグルがチェックされていると考えて、それが削除されていることを確認しましょう。
//最初にアイテムは完了とマークされますcy.contains（'li.todo'、'テストの書き込み'）.should（'have.class'、'completed'）.find（'。toggle'）.click（）/ / CSSクラスが削除されましたcy.contains（'li.todo'、'Write tests'）。should（'not.have.class'、'completed'）
サイプレスカスタムアサーションメッセージ
サイプレスでは、マッチャーのライブラリを使用して、アサーションの追加情報またはカスタムメッセージを提供できます。 マッチャーは、値を区別し、詳細なエラーメッセージをスローする小さな関数で構成されています。 チャイ アサーションライブラリは、コードがより読みやすくなり、テストの失敗が非常に役立つようになります。
const expect = require（'chai'）。expect it（'checks a number'、（）=> {const value = 10 const expected = 3 expect（value）.to.equal（expected）}）
サイプレスアサーションのベストプラクティス
コマンドのチェーンを使用して、XNUMXつのブロックに複数のアサーションを書き込むことができます。 単体テストのように単一のアサーションを記述する必要はありません。 多くの人が以下のようなアサーションを書きます。 そのように書くことは問題ありませんが、それはコードの行と冗長性を増やします。
describe（'my form'、（）=> {before（（）=> {cy.visit（'/ users / new'）cy.get（'＃first'）。type（'ashok'）}）it（ '検証属性があります'、（）=> {cy.get（'＃first'）。should（'have.attr'、'data-validation'、'required'）//#firstに必須フィールドがあるかどうかをアサートします} ）it（'has active class'、（）=> {cy.get（'＃first'）。should（'have.class'、'active'）// #firstにアクティブクラスがあるかどうかをアサートする}）it（ 'は名をフォーマットしました'、（）=> {cy.get（'＃first'）。should（'have.value'、'Ashok'）// #firstが最初の文字を大文字にしたかどうかを表明します}）}）
上記のように、同じセレクターとアサーションタイプが繰り返されています。 代わりに、これらのコマンドをXNUMXつのアサーションにチェーンして、すべてのチェックを線形に実行できます。
describe（'my form'、（）=> {before（（）=> {cy.visit（'/ users / new'）}）it（'validates and format the first name'、（）=> {cy.get （'#first'）.type（'ashok'）.should（'have.attr'、'data-validation'、'required'）.and（'have.class'、'active'）.and（'have .value'、' Ashok'）}）}）
上記のように、単一のセレクターを複数のアサーションでチェーンできます。 これは、サイプレスでアサーションを作成するための推奨されるベストプラクティスのXNUMXつです。
サイプレスのページオブジェクトモデルについて理解するには、をクリックします (詳細を見る)。.
