サイプレスのステップバイステップページオブジェクトモデルと例

By

ページオブジェクトモデル、通称 POMは、自動化フレームワークで人気のあるパターンです。 ページオブジェクトモデルはサイプレスにも適用できます。 ページオブジェクトモデルには、コードの重複を減らし、保守性と可読性を向上させるなど、テスト自動化のフレームワークを作成する上で多くの利点があります。 サイプレスは、テストスクリプトにページオブジェクトモデルを組み込む柔軟性を提供します。 この記事では、ページオブジェクトモデルの作成について説明します。 サイプレスステップ 例を使って段階的に。

目次：

ヒノキのページオブジェクトモデル
サイプレスページオブジェクトモデル

ページオブジェクトモデルとは何ですか？

ページオブジェクトモデルは、 ページオブジェクトは、自動化テストスクリプトから分離されています。 自動化テストは、テストで私たちに利益をもたらす多くのレバレッジを提供します。 ただし、コードの重複や、プロジェクトの成長に伴う保守性のリスクの増加など、いくつかの結果があります。 例を挙げてPOMの重要性を理解しましょう。

ログインページ、登録ページ、フライトの予約ページなど、アプリケーションに複数のページがあるとします。

  • ログインページには、ログイン機能のすべてのWeb要素が含まれています
  • 登録には、登録プロセスのすべてのメソッドとWeb要素が含まれています
  • フライトの予約には、フライト予約ページのWeb要素が含まれています

1つのテストケース、つまりTC2、TC3、およびTCXNUMXがあります。

  • TC1には、ログインテストケースが含まれています。
  • TC2には、ログインと登録のテストケースが含まれています
  • TC3には、ログイン、登録、およびフライト予約のテストケースが含まれています
POMなしの例

これで、ログインページがTC1と対話します。

登録ページはTC1およびTC2と対話する必要があり、

フライト予約ページは、TC1、TC2、およびTC3と対話する必要があります

ご覧のとおり、XNUMXつのテストケースすべてに共通の機能があります。 すべてのテストケースファイルにログインのメソッドとロケーターを書き込む代わりに、それらを個別に取得して、ファイル全体でアクセスすることができます。 このように、コードは繰り返されず、簡単に読み取ることができます。

コーディングのベストプラクティスのXNUMXつは、 DRY。 その意味は 繰り返さないでください。 完全な形式で明確に示されているように、コード行を何度も繰り返すべきではありません。 これを克服するために、 ページオブジェクトモデル コーディングのベストプラクティスにおいて重要な役割を果たします。

ページオブジェクトモデルフレームワークアーキテクチャ

世界 ページオブジェクトモデルフレームワーク アーキテクチャは、簡単な方法でカスタマイズできる実証済みのアーキテクチャです。 今日、ほとんどすべての企業は、継続的インテグレーション、開発、およびテストを含むアジャイル手法に従います。 自動化テスターは、テストフレームワークを維持して、開発プロセスと連携して機能します。 ページオブジェクトモデル。 それは重要です 自動化テストフレームワークを維持するためのデザインパターン コードが新しい機能とともに成長するにつれて。

ページオブジェクトは、テストしているアプリケーションのページと対話するオブジェクト指向クラスであるデザインパターンです。。 ページオブジェクトはで構成されます ページクラス および テストケース. ページクラス Web要素と対話するためのメソッドとロケーターで構成されています。 アプリケーションのページごとに個別のクラスを作成します。 機能ごとに個別のメソッドを作成し、スペックファイルでそれらにアクセスします。

ページオブジェクトモデル

サイプレスでページオブジェクトモデルを使用する利点

  1. メソッドは 再利用可能な プロジェクト全体にわたって、プロジェクトの成長時に保守が容易です。 コードの行は次のようになります less 読みやすいです および 最適化。
  2. ページオブジェクトパターンは、 操作とフロー からUIで実行していること 検証 ステップ。 POMパターンに従うと、次のように書く傾向があります。 クリーンでわかりやすいコード.
  3. ページオブジェクトモデルでは、 オブジェクト および テストケース 互いに独立しています。 プロジェクト全体のどこからでもオブジェクトを呼び出すことができます。 このように、機能テストにTestNG / JUnitや受け入れテストにCucumberなどのさまざまなツールを使用している場合は、簡単に実行できます。 アクセス可能な.

ステップバイステップページオブジェクトモデルサイプレスと例

このセクションでは、でページオブジェクトモデルを作成する方法を理解します。 リアルタイムの例を使用したサイプレス プロジェクトに実装できます。 ページオブジェクトモデルを作成するための基本的なセットアップとステップバイステップのプロセスから理解します。

この例で関数を作成するシナリオについて説明しましょう。

  1. 案内する https://admin-demo.nopcommerce.com/ ウェブサイト
  2. 有効なユーザー名とパスワードを入力してください
  3. ログインボタンをクリックします
  4. URLが追加されているかどうかを検証します /admin ログイン後

この例では、PageObjectファイルとspecファイルのXNUMXつのファイルを作成します。 始めましょう！

ステップ1：プロジェクトをVSコードで開きます。 というフォルダを作成します PageObject 下 統合 フォルダ。 このフォルダの下に、任意のモジュールのページオブジェクトファイルを作成できます。

PageObjectという名前の新しいフォルダ

ステップ2：という名前のファイルを作成します LoginPage.js 下 PageObject フォルダ。 LoginPage.jsでは、ログイン機能を含むメソッドを記述します。

PageObjectフォルダーの下でのLoginPage.jsの作成

ステップ3：最初のテストメソッドを書き始めましょう LoginPage.js ファイル。 まず、スペックファイルにエクスポートするクラスを作成する必要があります。 クラスを次のように呼びます ログインページ

クラスLoginPage{}

擬似コードに基づいて、最初のステップはURLに移動することです。 メソッドを次のように呼び出します。 navigate()。 ナビゲートメソッド内に、 cy.visit() サイプレスからの機能。

 ナビゲート（）{cy.visit（'https://admin-demo.nopcommerce.com/'）}

ナビゲートメソッド

ステップ4：次に、メールフィールドにユーザー名を入力する必要があります。 メソッドに名前を付けます メールアドレスを入力して（）。 まず、メールフィールドのロケーターを取得し、経由でそれらにアクセスする必要があります cy.get() 指図。 次に、を使用してフィールドをクリアします clear() コマンドを実行し、を使用してユーザー名を追加します type() 指図。 このメソッドでは、パラメーターを渡します ユーザ名 スペックファイルの値を渡します。 このように、別の電子メールIDが必要な場合に、このメソッドにアクセスすることを一般的にしています。

enterEmail（username）{cy.get（'[id = Email]'）。clear（）cy.get（'[id = Email]'）。type（username）; これを返す}

書く代わりに cy.get() 上記のコードでコマンドをXNUMX回実行すると、単純にループできます。 ドット オペレータ。

  enterEmail（username）{cy.get（'[id = Email]'）.clear（）.type（username）; これを返す}

enterEmailメソッド

お気づきかもしれません return this 9行目。 この は、 メールアドレスを入力して メソッドは特定のものに属します ログインページ クラス。 基本的、 この クラスを表します。

ステップ5：enterEmailメソッドと同様のパスワードのメソッドを作成する必要があります。 パスワードメソッドを次のように呼び出します。 enterPassword()。 最初に、パスワードのロケーターを取得し、フィールドをクリアして、入力値を入力します。 と呼ばれるメソッドにパラメータを渡します PSWD とアクセス type() コマンド。

enterPassword（pswd）{cy.get（'[id = Password]'）.clear（）.type（pswd）return this}
enterPasswordメソッド

ステップ6：最後の方法は、ログインボタンをクリックすることです。 メソッドに名前を付けます submit()。 ロケーターを取得し、を使用してボタンをクリックします click() サイプレスからの方法。

 submit（）{cy.get（'[type = submit]'）。click（）}

送信方法

手順 7：ここで、スペックファイル全体で使用するには、このクラスをエクスポートする必要があります。 このために、クラスの外にXNUMX行追加するだけで、スペックファイルで簡単にアクセスできます。

デフォルトのLoginPageをエクスポート

エクスポートコマンド

やあ！ プロジェクトのページオブジェクトファイルを作成しました。 とてもシンプルで簡単でした！

スペックファイル内のページオブジェクトへのアクセス

それでは、テストケースファイルに移りましょう。 統合フォルダーにスペックファイルを作成する必要があります。 スペックファイルと呼びます POMDemo.spec.js.

POMDemo.spec.jsファイルの作成

ステップ1：LoginPage.jsファイルのメソッドにアクセスするには、次のことを行う必要があります インポート それらをスペックファイルに入れます。 importステートメントを使用してインポートします。 を使用してLoginPage.jsファイルに移動する必要があります ../

私たちの場合、パスは ../integration/PageObject/LoginPage。 したがって、importステートメントは次のようになります。

「../integration/PageObject/LoginPage」からLoginPageをインポートします

ステップ2：Mochaを使用しているので、テストケースを内部に記述します describe() および it() ブロック。 describe（）は テストスイート、およびit（）は テストケース。 両方のブロックは関数であり、を含む文字列パラメータを受け入れます 説明 テストの。

describe（ "Cypress POM Test Suite"、function（）{}）

ブロックを説明する

記述ブロック内に、 it() 有効な資格情報を使用したログインとして説明を追加します。

it（ "有効な資格情報でログイン"、function（）{}）

それはブロックします

ステップ3：Pageオブジェクトファイルからメソッドにアクセスするには、Loginクラスのインスタンスを作成する必要があります。 ログインクラスのインスタンスを作成するには、変数を宣言し、を使用してクラスファイルに割り当てる必要があります。 新製品 キーワード。 宣言された変数を使用すると、Pageオブジェクトファイルからメソッドに簡単にアクセスできます。

                                               const login = new LoginPage（）;
クラスのインスタンス

注意：変数付き login、Pageオブジェクトクラスからメソッドにアクセスできます。 入力を開始すると login。 、vscodeは、LoginPage.jsファイルで使用可能なすべてのメソッドの提案を一覧表示します。 これは、クラスが正しくエクスポートおよびインポートされたことを確認するのに役立ちます。

ステップ4：私たちの navigate() URLにアクセスする方法。 これは、テストケースの最初のアクションです。

/// import LoginPage from "./PageObject/LoginPage" describe（ "Cypress POM Test Suite"、function（）{it（ "Login with validcredentials"、function（）{const login = new LoginPage（）; login.navigate（）; }）;}）;

ステップ5：メールフィールドにユーザー名を入力する必要があります。 アクセスします enterEmail() ログイン オブジェクト。 enterEmail() メソッドはパラメータを受け入れます ユーザ名。 したがって、ユーザー名の値を次のように渡す必要があります。 文字列 私たちのスペックファイルで

/// import LoginPage from "./PageObject/LoginPage" describe（ "Cypress POM Test Suite"、function（）{it（ "Login with validcredentials"、function（）{const login = new LoginPage（）; login.navigate（）; login.enterEmail（'admin@yourstore.com'）;}）}）

ステップ6：ステップ5と同様に、 enterPassword() 文字列のパラメータとしてパスワードを渡すことによるメソッド。

/// import LoginPage from "./PageObject/LoginPage" describe（ "Cypress POM Test Suite"、function（）{it（ "Login with validcredentials"、function（）{const login = new LoginPage（）; login.navigate（）; login.enterEmail（'admin@yourstore.com'）; login.enterPassword（'admin'）;}）}）

ステップ7：次に、ログインボタンをクリックする必要があります。 メソッドを呼び出します submit() ページオブジェクトファイルから。

/// import LoginPage from "./PageObject/LoginPage" describe（ "Cypress POM Test Suite"、function（）{it（ "Login with validcredentials"、function（）{const login = new LoginPage（）; login.navigate（）; login.enterEmail（'admin@yourstore.com'）; login.enterPassword（'admin'）; login.submit（）;}）}）

ステップ8：ログイン後、URLをアサートする必要があります。 URLが 等しい ログイン後のURLに。 アサーションには、 チャイ サイプレスに組み込まれているアサーションライブラリ。

/// import LoginPage from "./PageObject/LoginPage" describe（ "Cypress POM Test Suite"、function（）{it（ "Login with validcredentials"、function（）{const login = new LoginPage（）; login.navigate（）; login.enterEmail（'admin@yourstore.com'）; login.enterPassword（'admin'）; login.submit（）; cy.url（）。should（'be.equal'、'https：// admin-demo .nopcommerce.com / admin /'）}）}）

ログインテストケース

上の画像は、ログインテストケースを表しています。 非常に簡単な手順で、ページオブジェクトモデルを使用してテストケースを作成することができました。 次に、テストケースを実行して結果を確認しましょう。

サイプレスのテストランナーを開き、スペックファイルをクリックして、テストケースを実行します。 これをチェックして 記事 サイプレステストランナーを開く方法について。

サイプレスでのテスト結果

やあ！ サイプレスでページオブジェクトモデルを使用するテストケースを正常に作成しました。 このパターンをリアルタイムプロジェクトに組み込むことができます。 ページオブジェクトファイルにメソッドを書き込む方法はたくさんあります。 標準であり、どのプロジェクトでも機能する例を示しました。 だけ書くこともできます リターン関数 ページオブジェクトファイルで、をクリックして type スペックファイルに直接。

プロジェクトで使用できる別のパターンが表示されます。 この方法も完全にうまく機能します。

このタイプでは、メソッドでロケーター関数のみを返し、テストファイルでアクションを実行します。 上で見たのと同じシナリオのコードを記述します。

ページオブジェクト– LoginPage.js

class LoginPage {navigate（）{cy.visit（'https://admin-demo.nopcommerce.com/'）} enterEmail（）{return cy.get（'[id = Email]'）} enterPassword（）{return cy.get（'[id = Password]'）} submit（）{return cy.get（'[type = submit]'）}} export default LoginPage

上で見たように、関数内にロケーターのみを記述して返します。 戻り値は、特定のメソッドがに属していることを表します クラスLoginPage.js。 メソッドにアクションを追加していません。

ページオブジェクトファイルの例

スペックファイル– POMDemo.spec.js

スペックファイルのメソッドにアクセスする例を見ていきます。

/// import LoginPage from "./PageObject/LoginPage" describe（ "Cypress POM Test Suite"、function（）{it（ "Login with validcredentials"、function（）{const login = new LoginPage（）; login.navigate（）; login.enterEmail（）。clear（）login.enterEmail（）。type（'admin@yourstore.com'）; login.enterPassword（）。clear（）login.enterPassword（）。type（'admin'）;ログイン。 submit（）。click（）; cy.url（）。should（'be.equal'、'https://admin-demo.nopcommerce.com/admin/'）}）;}）;

スペックファイル例

ここでは、PageObjectファイルからメソッドを呼び出し、テストケースアクションを実行します。 まず、参照変数を呼び出します ログイン 次に、メソッドを追加します enterEmail() そして最後にアクションを追加します type。 当社における type()、ユーザー名を渡します 値.

テスト結果

ご覧のとおり、すべてのコマンドが実行され、テストケースに合格しました。

プロジェクトと意見に合ったページオブジェクトモデルを選択できます。 XNUMXつの手順だけに固執する特別な規則はありません。

サイプレスのページオブジェクトモデルでフィクスチャをテストデータソースとして使用するにはどうすればよいですか？

ページオブジェクトモデルの例では、ユーザー名とパスワードの値をページオブジェクトファイルに直接渡すか、テストケースファイルに直接渡しました。 このセクションでは、使用方法を理解します サイプレスの備品 データを安全に保ち、公開されないようにするため。 すべての資格情報とデータをXNUMXつのファイルに保存して、それらにアクセスするようにしてください。 このように、保守が容易であり、ユーザー名やパスワードなどの機密データが公開されることはありません。 このメソッドは、ページオブジェクトパターンで従う必要のある手順のXNUMXつでもあります。

前に説明したように、 フィクスチャは、JSONファイルやExcelファイル、またはApachePOIなどの外部ライブラリにデータを保存するのに役立ちます。 変数を作成してこれらのデータを使用し、スペックファイルでそれらにアクセスします。 例を挙げて理解しましょう。

サイプレスは「備品。」 作成します JSONの と呼ばれるファイル 資格情報.JSON 'Fixtures'フォルダーの下。

JSONファイルの作成

検証する必要のあるユーザー名、パスワード、URLの値をJSON形式で宣言しましょう。 クレデンシャル.json ファイル。

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

credentials.jsonファイルで値を渡す

テストケースファイルのJSONファイルから値にアクセスする

JSONファイルで値を定義したので、次を使用してテストケースファイルで値にアクセスします。 備品 サイプレスから。 JSON値にアクセスします この キーワード。 フィクスチャ関数をでラップしましょう 前（） ブロック。

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

cy.fixture（ 'credentials'）。then（function（testdata）{this.testdata = testdata}） –この行は、通過していることを表します クレデンシャル.json 私たちのパラメータとしてファイル cy.fixture（） 指図。 ここでは、JSONファイルであるかどうかを渡す必要はありません。 ファイル名だけを渡すだけです。 後で、私たちは合格します テストデータ 関数のパラメータとして、にアクセスします テストデータ を使用した変数 この.

/// import LoginPage from "./PageObject/LoginPage" describe（ "Cypress POM Test Suite"、function（）{before（function（）{cy.fixture（'credentials'）。then（function（testdata）{this.testdata = testdata }）}）it（ "有効な資格情報でログイン"、function（）{const login = new LoginPage（）; login.navigate（）; login.enterEmail（this.testdata.username）login.enterPassword（this.testdata.password ）login.submit（）; cy.url（）。should（'be.equal'、this.testdata.adminUrl）}）;}）;

login.enterEmail（this.testdata.username） –これにより、credentials.jsonファイルからユーザー名の値が取得され、電子メールフィールドに入力されます。

login.enterPassword（this.testdata.password） –これにより、credentials.jsonファイルからパスワード値がフェッチされ、パスワードフィールドに入力されます。

cy.url（）。should（ 'be.equal'、this.testdata.adminUrl） –これにより、credentials.jsonファイルからadminUrlが取得され、アサーションで検証されます

JSONファイルからスペックファイルにデータを渡す

それでは、結果のテストケースを実行してみましょう。

テスト結果

ご覧のとおり、テストケースは実行され、合格しています。 この例は、基本的なデータ駆動型テストケースを作成するのに役立ちます。 この方法を使用して、プロジェクトに組み込むことができます。 Fixtureフォルダーの下に新しいJSONファイルを作成し、テストデータに関連する値を追加して、任意のテストファイルからアクセスできます。

よくあるご質問

サイプレスはページオブジェクトモデルをサポートしていますか？

もちろん。 サイプレスは、リポジトリ内のページやオブジェクトを自由に操作できるようにします。 実装は簡単です。

上記の例からどのページオブジェクトモデルを使用する必要がありますか？

ページオブジェクトモデルのXNUMXつの方法だけに固執する特別なルールはありません。 上記で説明した任意のモデルを使用できます。 プロジェクトに応じてモデルを自由にカスタマイズできます。

サイプレスのページオブジェクトモデルでフィクスチャを使用する必要があるのはなぜですか？

Fixtureは、ユーザー名、パスワード、URLなどの機密データをJSONやExcelなどの別のファイルに保存するのに役立ちます。 これにより、アプリケーションのセキュリティが確保され、プロジェクト全体の任意のファイルで簡単にアクセスできます。 JSONファイルにアクセスするには、 備品 スペックファイルで使用します。

上へスクロール