サイプレスの13の例

前回の記事では、サイプレスとは何か、そのアーキテクチャ、インストールプロセス、およびインストールに必要な前提条件について説明しました。 ただし、テストの作成を開始する前に、サイプレスをインストールする必要があります。 クリック (詳細を見る)。 サイプレスをインストールするための詳細な手順を取得します。

サイプレスの例

この記事では、 サイプレスの例、JSONの例、変数とエイリアス、およびテストケースの作成方法。 それでは始めましょう。

サイプレスの例
サイプレスの例

目次

サイプレスJSONの例

最初に、サイプレステストランナーを開くと、 cypress.json 構成ファイルが作成されます。 プログラムまたは自動化コードの実行に役立ついくつかのプロパティを実装および保持する方法を提供するスニペットを保存する傾向があります。 同様に、サイプレスには、構成プロパティとして提供する値を格納するためのJSONファイルもあります。

いくつか調べてみましょう サイプレスJSONで構成できる例 ファイル。

サイプレスには、すでにいくつかのデフォルト構成値が割り当てられています。 要件に基づいてカスタマイズできるオプションがいくつかあります。 たとえば、私たちは提供することができます baseURL 私たちの財産 cypress.json ファイル。 したがって、スクリプトを実行するたびに、baseURLが設定され、トリガーされます。

オプションデフォルト値商品説明
baseUrlヌルこのオプションは、 URL のプレフィックス cy.request() or cy.visit() コマンド。
watchForFileChangestrueこのオプションはデフォルトでtrueに設定されています。 ファイルの変更を監視し、変更が加えられるとファイルを再起動します。

以下は、baseURLプロパティとwatchForFileChangesプロパティを変更したスナップショットです。 Cypress.json ファイル。

注:サイプレス構成のすべてのオプションについては、後で別のトピックとして説明します。

サイプレスの例
cypress.jsonファイル

サイプレスを開く

以前、サイプレスプロジェクトを作成する方法について説明しました。 ここでは、サイプレステストランナーを開いて実行する方法を説明します。 さあ、飛び込みましょう!

npmを介してCypressをインストールした場合は、。/node_modulesディレクトリにインストールされています。 したがって、私たちは私たちを開くことができます npmコマンドを渡してサイプレステストランナー から ルート 私たちのプロジェクトディレクトリの.

サイプレスは次のいずれかの方法で開くことができます

1. フルパスコマンドを与えることによって

./node_modules/.bin/cypress open

2. npmbinのショートカットを使用する

$(npm bin)/cypress open

3. npxを使用して

ここで、npxはnpm> v5.2でのみサポートされていますが、個別にインストールすることもできます。

npx cypress open

4. 糸を使って

yarn run cypress open

次に、ターミナルでフルパスコマンドを渡してサイプレスを開く方法を説明します。

1.上記のポイント1で説明したコマンドを渡す必要があり、ターミナルで次のように表示されます。

ターミナルでサイプレスを開く

2.しばらくすると、サイプレステストランナーが起動し、以下に示すようにテストランナーを表示できるようになります。 テストランナーが起動した後、いくつかのサンプルテストケースを見ることができます。 サイプレスは、プロジェクトルートにテストフォルダーを作成しました。これは、テストケースの基本的なセットアップと作成に役立ちます。

TestRunnerのサンプルファイル

それでは、VSCodeに戻りましょう。 まず、入力されたいくつかのフォルダー構造を表示できます。 次に、各フォルダー構造を分解して、詳細に見ていきましょう。

サイプレスのフォルダ構造

ご覧のとおり、サイプレスはコードエディタでフォルダ構造を作成しました。 それらについて詳しく説明します。

サイプレスの例のフォルダ
  1. 備品 –フィクスチャフォルダーには、静的でプロジェクト全体で再利用可能なデータが含まれています。 ベストプラクティスのXNUMXつは、テストでのハードコアデータ(資格情報、テストメッセージなど)ではありません。 代わりに、JSON、CSV、またはHTMLファイルを介してそれらにアクセスします。 フィクスチャフォルダの下にデータファイルを作成する必要があります。 テストでは、を使用してこのファイルにアクセスします cy.フィクスチャ コマンド。
  2. 統合 –このフォルダーの下に、通常スペックファイルと呼ばれる実際のテストケースを記述します。 統合フォルダー内では、プロジェクトの要件に基づいて、各フォルダーの下に複数のフォルダーと多くのテストファイルを作成できます。 また、いくつかの例で作成されたいくつかのデフォルトのスペックファイルを見ることができます。
  3. プラグイン – Pluginsフォルダーには、サイプレスの内部動作動作をタップ、アクセス、および変更できるファイルが含まれています。 プラグインを使用すると、コード構造のすべての部分(実行前または実行後)に直接アクセスできるテストコマンドの実行に役立つカスタムコードを記述できます。 デフォルトでは、サイプレスはこのパスにプラグインを作成します cypress/plugin/index.js
  4. サポート -サポートフォルダの下に、標準または再利用可能なメソッドを提供するのに役立つファイルがあります。 すべての仕様が実行される前に、サイプレスはSupportフォルダーを実行します。 したがって、サポートファイルを他のすべてのスペックファイルにインポートする必要はありません。 このフォルダーは、他のすべてのスペックファイルで使用するために不可欠な再利用可能なメソッドまたはグローバル関数を追加するのに適した場所です。
  5. ノードモジュール –このフォルダーには、インストールしたすべてのnpmパッケージが含まれています。 ノードモジュールは、任意のノードプロジェクトを実行するために重要です。 サイプレスプロジェクトにあるすべての関数は、ノードモジュールフォルダー内に記述されています。 ノードモジュール内のファイルは変更しません。
  6. サイプレス.json –複数の構成を追加できます サイプレス.json ファイル。 たとえば、環境変数、baseURL、タイムアウト、またはその他のオプションを追加して、サイプレス構成ファイルのデフォルトオプションを上書きできます。

変数とエイリアス

サイプレスの変数とエイリアスについて詳しく説明します。

私たちがサイプレスを理解して学ぶとき、私たちが理解するのは難しいかもしれません 非同期API サイプレスの自然。 しかし、将来多くの例が見られるように、それは簡単なものになるでしょう。 最近のブラウザの多くは非同期APIを使用しており、コアノードモジュールでさえ非同期コードで記述されています。 さらに、非同期コードはJavascriptコードのいたるところに存在します。 したがって、サイプレスの戻り値を調べます。

サイプレスの戻り値

すべてのサイプレスコマンドは エンキュー 及び ラン 非同期的に。 したがって、私たちは 戻り値を割り当てたり、操作したりすることはできません サイプレスコマンドの。 同じ例を少し見ていきます。

const button = cy.get("login-btn");  //this command is to get the element with the button attribute

button.click()

キャップ

上記のコマンドを使用してボタンの属性にアクセスすることはできません。 代わりに、.then()を使用してサイプレスコマンドを生成できます。 私たちはこれらを呼びます クロージャ.

.then()

.then()は、前のコマンドから生成されたスレッドにアクセスするのに役立ちます。 あなたが理解しているなら ネイティブの約束、.then()がサイプレスで機能するのと同じ方法です。 .then()内にさまざまなコマンドをネストすることもできます。 ネストされた各コマンドは、ループ内の前のコマンドにアクセスできます。 例を挙げてそれを見ていきます。

cy.get('login').then(($btn) => {

  // store the button's text
  const buttonText = $btn.text()

  // we are comparing the two buttons' text
  // and ensuring they are different
  cy.get('login').should(($btn2) => {
    expect($btn2.text()).not.to.eq(buttonText)
  })
})

私達は使ったことがある キャップ 上記の例では、前のコマンドの参照をループ内に保持できるようにしています。

Variables

通常、変数に値を割り当てる傾向があります。 しかし、サイプレスでは、ほとんど使用していません const, var, let。 クロージャを使用している場合、変数に割り当てなくても、生成されたオブジェクトにアクセスできます。

しかし、変数を宣言できる場合があります。 オブジェクトの状態が変化します (可変オブジェクト)。 たとえば、オブジェクトを前の値と比較する必要がある場合は、オブジェクトを変数として宣言して、次の値と比較します。 この例を見てみましょう。

<button>increment</button>

You clicked button <span id="num">0</span> times

ここでは、ボタンをクリックするたびに、カウント0のスパンが増加し続けます。 そのため、ボタンオブジェクトは毎回その状態を変更する傾向があります。

次に、これをサイプレスコードの変数に割り当てる方法を見てみましょう。

cy.get('#num').then(($span) => {
  // we are capturing the number by assigning it to a variable
  const num1 = parseFloat($span.text())

  cy.get('button')
    .click()  //we have clicked the button once
    .then(() => {
      // we are capturing the number again by assigning it to another variable
      const num2 = parseFloat($span.text())

      // we are ensuring that num1+1 is equal to num2
      expect(num2).to.eq(num1 + 1)
    })
})

スパンはボタンをクリックするたびに状態が変化するため、変数に割り当てて現在と以前の状態を比較できます。 可変オブジェクトの場合にのみ、変数が必要になり、 const 良いアプローチです。

エイリアス

以前、サイプレスでの変数とその制限について説明しました。 この制限を克服するために、エイリアスが登場します。 Aliasは、サイプレスの強力な構成要素のXNUMXつです。 これについては、例を挙げて詳しく見ていきます。

一般に、エイリアスは変数として機能するのに役立ちます。 ただし、変数の代わりにエイリアスが役立つ場合がいくつかあります。

1. DOM要素を再利用する

DOM要素にエイリアスを付け、後でそれらにアクセスして再利用できます。 エイリアスはまた、の制限を克服します .then() コマンド。

2. コンテキストの共有

簡単に言うと、コンテキストの共有とは、フックとテストの間でオブジェクトを共有することです。 コンテキストを共有するための主なユースケースは、 cy.fixture –これはファイルに固定されたデータセットをロードすることです。

エイリアスにアクセスする方法は?

ここでは、エイリアスにアクセスする方法を説明します。 を使用します .as() 後で使用するために要素を割り当てるコマンド。 必要なパラメータは エイリアス名。 エイリアスの名前は、 cy.get() or cy.wait() @ 接頭辞。

エイリアスにアクセスする方法の例を調べます。

cy.get('#user_login').as('username')
cy.get('@username').type('abc@gmail.com')

最初の行では、DOMからuser_loginのIDを取得しています。 その後、使用しています .as() そして、名前のユーザー名で宣言します。 XNUMX行目では、次のコマンドでエイリアスにアクセスしています。 @ シンボルと実行 type アクション。

サイプレスのテスト例

サイプレスで最初のテストケースを書き始めます。 とてもシンプルで簡単です。 ただし、その前に、サイプレステストの構成を調べます。

基本的なサイプレスコンストラクト

サイプレスはテストケースにMocha構文を採用し、Mochaが提供するすべてのオプションを使用しています。 以下は、テストケースで一般的に使用される基本的なサイプレスコンストラクトです。

  • 説明() –すべてのテストケースをXNUMXつの大きなテストに結合し、それらをグループ化します。 テストの説明とコールバック関数のXNUMXつのパラメーターを取ります。
  • それ() – it()ブロックに個々のテストケースを記述します。 このブロックもXNUMXつのパラメーターを取ります-テストが行​​うことと、XNUMX番目のパラメーターはコールバック関数です。
  • 後() –これは、スペックファイル内のすべてのテストの後に実行されます。
  • afterEach() –これは個々のテストケースごとに実行されます。
  • 前() –スペックファイル内のすべてのテストの前に実行されます。
  • beforeEach() –個々のテストケースの前に実行されます。

テストケースの書き方は?

始める前に、テストケースとは何かを理解し、それを記述し、基本的なテストケースの手順を理解する必要があります。

1. 前提条件 –テストするアプリケーションの状態。

2. アクション –アプリケーションに対して何らかのアクションを実行します。

3. アサーション –私たちは、私たちの行動に関して変更された行動を主張または検証します。

検討します ラムダギークス テスト例のアプリケーション。 同じ手順で、次のシナリオの自動化を検討します

1 ウェブサイトにアクセス https://lambdageeks.com/

2.タイトルがHome– LambdaGeeksであるかどうかを検証します
サイプレスは cy その型定義として。 追加します cy 任意のメソッドを呼び出すコマンド。
まず、コードエディタで新しいファイルを作成しましょう。

1.という名前の新しいフォルダを作成します デモ 統合フォルダーの下。

新しい折り畳みの作成r

2. Demoフォルダーの下に、新しいファイルを作成します sample.js。 このファイルに最初のテストケースを記述します。

新しいファイルの作成

それでは、テストケースの作成を始めましょう。

1. 1.まず、を使用してページにアクセスします 訪問() サイプレスのメソッド。 このコマンドは、提供されたURLに移動します。 それらをdescribe()およびit()ブロック内に含めます。

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("launch the application", function() {
        // visit the lambdageeks page
        cy.visit('https://lambdageeks.com/')

2.アプリケーションが開いたら、を使用してタイトルを検証します get() サイプレスのメソッド .get() DOMからすべてのcssセレクターをフェッチします。

を使用してタイトルにアクセスしています title() メソッドであり、コマンドでChaiライブラリを使用して、最初のパラメータを等しいものとして渡すことでアサートします。 eq。 XNUMX番目のパラメーターは、期待している文字列です。

 cy.title().should('eq','Home - Lambda Geeks')

やあ! XNUMXつの簡単な手順で、サイプレスのテストケースを作成しました。

これが私たちのテストケースの完全なコードです

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("launch the application", function() {

        // visit the lambdageeks page
        cy.visit('https://lambdageeks.com/')

        // validate the title
        cy.title().should('eq','Home - Lambda Geeks')
       
    });
});
サイプレスの例: 最初のテストケース

サイプレスのログイン例

サイプレスを使用してログインページを自動化する方法の例を示します。 前に見たように、サイプレスでテストケースを書くのは簡単です。 次に、テキストフィールドとアサーションの値の設定に移りましょう。

1.ウェブサイトにアクセスします https://demo.applitools.com/ 使用して、 cy.visit コマンド。

 cy.visit('https://demo.applitools.com/')

2. typeコマンドを使用して、usernameフィールドにusernameを入力します。 タイプの文字列としてユーザー名をパラメータとして渡します。

 cy.get('#username').type('test123')

3.同様に、同じコマンドを記述してパスワードを入力します

 cy.get('#password').type('123')

4.次に、を使用してログインボタンをクリックします。 click() サイプレスのメソッド。

cy.get('#log-in').click();

5.ログイン後、アプリページが表示されます。 したがって、URLには /app を使用した拡張 .include() チャイのキーワード。 shouldの最初のパラメーターはアサートしているキーワードであり、XNUMX番目のパラメーターは期待される結果です。

cy.url().should('include', '/app')

ログイン機能の完全なコードをXNUMXつの簡単なステップで記述しました。 以下は、参照用の完全なコードです。

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("should login with username and password", function() {

        // visit the lambdageeks page
        cy.visit('https://demo.applitools.com/')

        cy.get('#username').type('test123')

        cy.get('#password').type('123')

        cy.get('#log-in').click();

        cy.url().should('include', '/app')

    });
});
ログインテストケース

サイプレスとFAQの起動中の一般的な問題の解決策

サイプレスを起動しようとすると、いくつかの一般的な問題が発生する可能性があります。 一般的な問題のいくつかについて説明します。

1. サイプレスを開くコマンド中に「サイプレス」コマンドが見つかりません

インストール後、プロジェクトディレクトリのルートからopencypressコマンドを渡す必要があります。 たとえば、CypressProjectという名前のプロジェクトを作成しました。 あなたは合格する必要があります npm init CypressProjectフォルダーに移動してコマンドを実行します。 ターミナルで以下のコマンドを実行することでナビゲートできます

cd CypressProject

プロジェクトのルートに到達したら、 npm init 依存関係をダウンロードするコマンド。

サイプレスを開くために、何人かの人々はにナビゲートしようとします /node_modules フォルダと ./bin 次に、ヒノキの開くコマンドを渡します。 ただし、このようには機能しません。 したがって、代わりに、プロジェクトディレクトリのルートからopenコマンド全体を実行して、サイプレスを開きます。

./node_modules/.bin/cypress open

また、スラッシュに注意してください '/ '。 常にこれを提供する '/ ' サイプレスを開きます。

2. サイプレス これで実行中のスクリプトが無効になっているため、ロードできません システム

サイプレスをWindowsにインストールする場合、上記のエラーが発生することがあります。 これは、セキュリティ例外が原因です。 PowerShellで以下のコマンドを渡すことにより、このエラーを解決できます。

Set-ExecutionPolicy RemoteSigned

再現する手順:

  • PowerShellを開く
  • このコマンドを実行します Set-ExecutionPolicy RemoteSigned
  • 種類 Yes
  • 通過してサイプレスを開きます ./node_modules/.bin/cypress open。 テストランナーが開きます。

FAQ

1. サイプレスがサポートしているオペレーティングシステムはどれですか?

サイプレスはサポートします Mac, Windows, リナックス オペレーティングシステム。

2. サイプレスはネイティブモバイルアプリの自動化をサポートしていますか?

サイプレスは、ネイティブモバイルアプリで実行できなくなります。 ただし、IconicFrameworksなどのブラウザーで作成されたモバイルアプリケーションをテストすることはできます。

3.サイプレスがJavascriptベースのアプリケーションのみをサポートするかどうか。

番号! サイプレスは、Ruby on Rails、Node、PHP、C#などの言語で記述された任意のWebブラウザーと対話できます。 ただし、テストはJavascriptで記述します。 それ以外の場合、サイプレスは任意のフロントエンド、バックエンド、言語、およびフレームワークと対話できます。

上へスクロール