ページモデルとは自動テストのパターンで、ページのアブストラクションを作成したりページエレメントの参照を行うことができます。
この記事ではJavaScriptのテストにおいてページモデルが優れている理由と使い方をご紹介します。
今回の例ではTestCafeを利用しています。
ページモデルを使う理由は？
こんなふたつのテストを想像してみてください。
ひとつはTestCafeのデモページで開発者名を編集し、もうひとつは特色セクションでチェックボックスにチェックを入れるものです。
どちらのテストもかなりのコード量です。
ひとつ目のテストでは入力エレメントを参照するたびに#developer-nameセレクタが重複して作成されています。
ふたつ目のテストでは各チェックボックスに対するロジックが重複しています。
ウェブアプリを速いペースで開発する場合、ページのマークアップやデザインには頻繁に変更が加えられます。
こうなると変更のたびに全てのテストでセレクタを書き換えなければなりません。
ページモデルは全てのセレクタを一ヶ所で管理するため、ウェブページに変更が起こってもページモデルを書き換えるだけで済むのです。
ページモデルパターンによって注意を払う要素を分離させることができます。
ページの見た目はページモデルで管理し、テストはそのふるまいの確認に注力できるのです。
ページモデルを作成する
新しい.jsファイルを作成し、Pageクラスを宣言してください。
このクラスにはページモデルが入ることになるので、名前はpage-model.jsとしましょう。
モデルにDeveloper Nameエレメントを追加しましょう。nameInputプロパティを加えてselectorを割り当ててください。
このテストファイルではpage-model.jsをインポートしPageクラスのインスタンスを作成します。その後、Developer Nameエレメントを特定するためpage.nameInputプロパティを使用しましょう。
ページモデルに特色セクションのチェックボックスを追加します。
セクションの各アイテムがチェックボックスとラベルを含んでいるため、新しいクラスFeatureを作成し、labelとcheckboxというふたつのプロパティを追加してください。
PageクラスにFeatureオブジェクトの配列を含むfeatureListプロパティを追加しましょう。
配列内のチェックボックスを管理することで複数のチェックボックスに繰り返しテストを実行する動作をシンプルにできます。
ふたつめのテストはひとつのループに集約できます。
これで完成です。
ページモデルを使ってエレメントを参照するふたつのテストを作ることができました。
ページモデルを活用してテストの効率を高めてください。
※本稿は「How to Use Page Model Pattern in End-to-End Web Testing」を翻訳・再編集したものです。
おすすめ新着記事
おすすめタグ