サイプレスの備品：知っておくべき5つの重要な事実

By

テスト自動化のベストプラクティスのXNUMXつは、テストデータをテストファイルから分離することです。 この側面は、テストフレームワークを設計する際の主要な要件のXNUMXつです。 サイプレスは、テストデータを分離する機能を支援します サイプレス 備品。 このトピックでは、 実践的な実装とリアルタイムの例を備えたサイプレスフィクスチャ

目次

サイプレスの器具とは何ですか？

サイプレスフィクスチャを使用できます 外部ファイルからのソースデータ。 サイプレスの備品はあなたがするのに役立ちます ファイルからの読み取りまたはファイルへの書き込み。 テスト自動化で人気のあるフレームワークのXNUMXつは、テストファイルからデータを分離するデータ駆動型フレームワークです。 通常、データはExcelなどの外部ファイルに保存し、外部ライブラリを使用して読み取ります。 サイプレスは、ファイルからデータを読み取るための同じ機能を提供します。

サイプレスは私たちにというフォルダを提供します 備品、JSONファイルを作成し、そこからデータを読み取って、複数のテストファイルでそれらのファイルを読み取ることができます。 データを次のように保存します Key-Value ペアリングしてアクセスします。

テストでサイプレスフィクスチャを使用する方法は？

以下に示す構文を使用して、サイプレスフィクスチャにアクセスできます。

cy.fixture(filePath)
cy.fixture(filePath, encoding)
cy.fixture(filePath, options)
cy.fixture(filePath, encoding, options)

フィクスチャで渡すことができるパラメータを理解します

ファイルパス –テストデータを保存した場所へのパス

エンコーディング –ファイルの使用中に使用されるエンコーディング。 エンコーディングには、ASCII、base64、hex、binaryなどがあります。

オプション –オプションでは、合格することができます タイムアウト 応答。 解決するタイムアウトを指定することです cy.fixture（）

サイプレスのフィクスチャからデータを読み取る方法は？

以下のファイルでテストデータを定義します。 治具 フォルダ。 サイプレスフィクスチャを使用して、テストスクリプトのJSONファイルからテストデータにアクセスします。

さて、理解しましょう サイプレスの例 備品。 ユーザー名とパスワードを使用してURLにログインします。 それでは、ユーザー名とパスワードの値をファイルに保存しましょう。

という名前のファイルを作成しましょう クレデンシャル.json フィクスチャフォルダの下。 変数をJSON形式で定義します。 

{
    "username" : "admin@yourstore.com",
    "password" : "admin",
    "adminUrl" : "https://admin-demo.nopcommerce.com/admin/"
}
フィクスチャファイルの例

フィクスチャファイルからテストファイルへの値へのアクセス

JSON値をで定義したので クレデンシャル.json ファイルでは、サイプレスフィクスチャを使用してテストファイルでそれらにアクセスする方法を確認します。

を使用してフィクスチャデータにアクセスします this ビフォアフックのキーワード

describe（ "Cypress Fixtures Example"、function（）{before（function（）{cy.fixture（'credentials'）。then（function（testdata）{this.testdata = testdata}）}）}）

上記の例では、を介してJSONファイルにアクセスしています cy.fixture（ 'credentials'）。 JSONファイル名は クレデンシャル.json、我々は cy.fixture（）でファイル名を渡す。 現在、エイリアスの概念を使用して、データを次のように定義しています。 テストデータ。 変数を使って テストデータ、テストファイルでユーザー名とパスワードの値を使用できます

describe（ "Cypress Fixtures Example"、function（）{before（function（）{cy.fixture（'credentials'）。then（function（testdata）{this.testdata = testdata}）}）it（"有効な資格情報でログインする"、function（）{cy.visit（this.testdata.adminUrl）cy.get（'[id = Email]'）。clear（）cy.get（'[id = Email]'）。type（this.testdata .username）cy.get（'[id = Password]'）。clear（）cy.get（'[id = Password]'）。type（this.testdata.password）cy.get（'[type = submit] '）.click（）; cy.url（）。should（' be.equal'、this.testdata.adminUrl）}）;}）;

あなたが上で見ることができるように、 .type() 私たちはcredentials.jsonファイルから値を次のように渡します this.testdata.username。 同様に、パスワードについては、を使用して値にアクセスしています this.testdata.password。 URLには、ユーザー名とパスワードと同じ方法を使用しています。

テストケースを実行すると、ダッシュボードに値が出力されていることがわかります。 このように、サイプレスフィクスチャを使用してテストケースを実行しました

フィクスチャテスト結果

サイプレスの複数の備品

このセクションでは、複数のフィクスチャファイルでサイプレスフィクスチャを使用する方法を理解します。

たとえば、同じテストファイルに異なるフィクスチャデータを使用する場合、ログインページで確認する必要のあるクレデンシャルのセットがXNUMXつありますが、ファイルにアクセスするにはどうすればよいですか？

XNUMXつの方法は複数を書くことです it 同じコードを何度も複製するブロック。 逆に、私たちは使用することができます さまざまなテストにアクセスするためのサイプレスフィクスチャ スペックファイルのデータ。 サイプレスフィクスチャを使用してそれを達成する方法を見てみましょう

すでにフィクスチャファイルがあります クレデンシャル.json.

{
    "username" : "admin@yourstore.com",
    "password" : "admin",
    "adminUrl" : "https://admin-demo.nopcommerce.com/admin/"
}

次に、という名前の別のフィクスチャファイルを作成しましょう userData.json ここでは、異なる無効なユーザー名とパスワードを使用します。

{
    "username" : "user@yourstore.com",
    "password" : "user",
    "adminUrl" : "https://admin-demo.nopcommerce.com/admin/"
}

次に、テストファイル内のXNUMXつの異なるデータにアクセスする方法を見てみましょう。

XNUMXつの異なるフィクスチャファイルを使用するという条件を使用して、同じテストファイルをリファクタリングします。 

const testValueFixtures = [{"name"： "credentials"、 "context"： "1"}、{"name"： "userData"、 "context"： "2"}] describe（'Automation Test Suite --Fixtures'、 function（）{//両方のフィクスチャをループするtestValueFixtures.forEach（（fixtureData）=> {describe（fixtureData.context、（）=> {//フィクスチャファイルからテストデータにアクセスするbefore（function（）{cy。フィクスチャ（fixtureData.name）.then（function（testData）{this.testData = testData;}）}）it（ "login"、function（）{cy.visit（'https://admin-demo.nopcommerce.com / admin /'）cy.get（' [id = Email]'）。clear（）cy.get（' [id = Email]'）。type（this.testData.username）cy.get（' [id =パスワード]'）。clear（）cy.get（' [id = Password]'）。type（this.testData.password）cy.get（' [type = submit]'）。click（）; cy.url（ ）.should（'be.equal'、this.testData.adminUrl）}）}）}）}）
XNUMXつのフィクスチャデータの例へのアクセス

最初に、という変数を作成しています testValueFixtures として 配列 ここでは、XNUMXつのフィクスチャファイルのコンテキストを作成しています。 最初のコンテキストでは、名前を'として渡します。資格情報'とXNUMX番目は'ユーザーデータ'、値が定義されているJSONファイル名を表すため。

次に、describeブロックの両方のフィクスチャ変数をループします。 前に説明したように、ブロックを使用する前にデータにアクセスしています .this()

残りのコードは同じで、データを cy.get()

テストを実行すると、XNUMXつのセットで実行され、最初のケースは有効な資格情報で合格し、XNUMX番目のケースは無効な資格情報のために失敗します

最初のフィクスチャファイルを使用したフィクスチャ

上記のスナップショットでわかるように、最初のテストケースに合格し、最初のフィクスチャファイルから値を入力しました クレデンシャル.json

XNUMX番目のフィクスチャファイルを使用したフィクスチャの例

上のスクリーンショットでわかるように、テストは失敗し、合格した値はXNUMX番目のフィクスチャファイルからのものです userData.json

ページオブジェクトモデルを使用してサイプレスフィクスチャを作成する方法を表示することもできます (詳細を見る)。

上へスクロール