*

Selenium入門その5[ページオブジェクトパターン(Page Object Design Pattern)を利用して変更に強いテストを作成する方法]

公開日: : 最終更新日:2016/12/05 Java, Selenium, SeleniumIDE , ,


スポンサードリンク



Selenium入門その2[Selenium IDEの使い方]
では「UIマップファイル」と言う仕組みが存在していることに言及させていただきましたが、詳細には触れておりませんでしたので、詳細な説明をさせていただきますが、残念なことに「UIマップファイル」はSelenium RCでは利用できますが、Selenium WebDriverでは利用できません。

今後Selenium IDEの機能改善により対応されるかも知れませんが、期待薄だと感じています。

Selenium WebDriverを前提とするのでしたら「Page Object Design Pattern(ページオブジェクトパターン)」を利用するしかないです。

と言うことで、本エントリーでは以下の内容を説明させていただきます。

  • UIマップファイルやPage Object Design Patternが必要な理由
  • UIマップファイルの利用方法
  • Page Object Design Patternの利用方法


UIマップファイルやPage Object Design Patternが必要な理由

UIマップファイルを利用しないテストスクリプトの問題点

Selenium入門ももう5回目となりますが、今までのテストスクリプトは全てdriver.findElementの引数にロケータを記述してきました。

例えば

のような物です。
By.idならまだしも、By.xpathだと結構複雑な文字列を記載する必要がありますよね、

簡単な文字列だとしても、By.id(“nameInputId”)が多く出現するスクリプトは変更に強いとは言い難いです。
変更に強い!、これはソフトウェア開発者の永遠の課題ですよね。

Selenium IDEでテストスクリプトを生成する時は、その問題点に気付きにくいのですが、何も考えないでテストを作り上げてしまうと大変なことになります。

せっかく自動テストを実現しても、変更に弱ければ価値が半減してしまいますし、
時間の経過とともテストのメンテのコストが大きくなっていき、最後には放置される。
そんな状況を何度も経験してきました。
(いやいや、お前の能力が低いんだろ・・・、って言われても仕方ないですが・・・)

まあ、Selenium IDEでテストスクリプトを生成した後にリファクタリングを行うとの手順でも問題はないのですが、標準機能でリファクタリングを回避できますので便利です。

とは言え、前述したように「UIマップファイル」はSelenium WebDriverでは利用できませんので、「UIマップファイル」より高度な仕組みのPage Object Design Pattern(ページオブジェクトデザインパターン)」を利用する必要があります。

UIマップファイルの利用方法

説明に利用するHTML

説明に利用するのは
Selenium入門その4[Selenium WebDriver(Java/Junit4)の基本コマンド]
と同じ物となります。

スクリーンショット 2016-05-03 19.58.05

UIマップファイルの作成と利用

定型の記載とaddPageでページの追加、エイリアスの追加を記載したjs(JavaScript)ファイルを作成します。
ファイルのエンコーディングはUTF-8にする必要があります。

エイリアスはページ毎に一意である必要があります。違うページには同じエイリアスが追加できることを意味します。

うーん、イマイチな説明ですね・・・
ページAにエイリアス=youserName
ページBにエイリアス=youserName
が存在しても問題ないと言うことです。

当然、2つのエイリアスのロケータは異なっていても問題ないです。

34行目で”testpage”という名前でページを追加し
37、39行目でエイリアスを追加しています。

37行目はname属性の値がusernameのエレメントに”username”と言うエイリアスを与えています。

ロケータの指定方法は
ロケータのスタティクス=識別文字列
となります。

By.cssであれば、css=実際のCSSセレクタの値
By.nameであれば、name=name属性の値
By.tagNameであれば、tagname=タグ名
になります。

上記内容のファイルをuser-extensions.jsの名前で保存し、Selenium IDEに設定します。

Selenium IDEのメニューの[オプション]-[設定]をクリックします。
5508d7b8fc9af8c13631791075beaed0

参照ボタンをクリックし、先ほどのファイルを選択します。
スクリーンショット 2016-05-15 22.24.46

選択後にOKボタンをクリックします。
スクリーンショット 2016-05-14 19.57.47

Selenium IDEを再起動します。

再起動後にUIマップファイルが利用できるようになります。
スクリーンショット 2016-05-14 21.17.08

このようにスクリプトを録画し、そのスクリプトの対象をSelenium IDEから選択し直す直すことでUIマップファイルが利用可能になります。

どう考えてもイマイチな実現方法ですよね・・・

ページ毎にエイリアスを一意にするとの考え方は正しい選択だと思います。
それによってUIマップファイルのエイリアスを自動選択できないとの動作もある程度は納得できます。しかし、何らかの方法で自動的にエイリアスをSelenium IDEの録画スクリプトに埋め込む方法があると思います。
かつ、WebDriverで使えないのであれば「UIマップファイル」を利用する意味が感じられません。

Page Object Design Patternの利用方法

説明に利用するアプリ

seleniumのテスト用サイトを利用させていただきます。
http://example.selenium.jp/reserveApp/

複数画面で、入力と確認画面があるサンプルを用意しようとも思ったのですが、上記のサイトのアプリでやりたいことが充足できていますので、これを例に説明させていただきます。

入力画面

スクリーンショット 2016-05-15 16.05.55

正しい値が入力された状態で「次へ」確認画面に遷移します。
正しくない値が入力された状態で「次へ」エラー画面に遷移します。
(正確には確認画面なのですが・・・)

確認画面

スクリーンショット 2016-05-15 16.06.28

エラー画面

スクリーンショット 2016-05-15 16.06.17

Page Object Design Pattern(ページオブジェクトパターン)とは

テスト対象ページ毎のクラスとテストケースクラスを分離し、変更に強いテストを作成するための仕組みとなります。

テスト用サイトの「入力画面」、「確認画面」、「エラー画面」を対象にテストを作成する場合は、
「入力画面」のページクラス(PageObject)、「入力画面」のテストクラス
「確認画面」のページクラス、「確認画面」のテストクラス
「エラー画面」のページクラス、「エラー画面」のテストクラス
の6クラスを作成します。

厳密に言うと「確認画面」と「エラー画面」は同じURLですので同じクラスとしてもOKですが、今回は明示的に異なるページクラスにマッピングしてみます。

ページクラスは画面操作の部分を担当し、テストケースクラスは画面への入力値の保持し、ページクラスのメソッド呼び出しを行うことによりWebブラウザを操作と検証の実行を行います。
これによって、入力項目が異なるだけのテストの変更コストが格段に削減できます。
それ以外にも工夫次第で様々な効果が期待できます。

ページクラスのインスタンス化とWebElementの特定を行うために以下の2つの仕組みが提供されいます。

PageFactory(ページファクトリー)

ページクラスの作成時にはPageFactoryのinitElementsメソッドを利用します。
この操作を行うことによってSeleniumが提供しているページオブジェクトパターンが利用できるようになります。

FindByアノテーション

org.openqa.selenium.WebElement型のクラスメンバに@FindByアノテーションを付与することにより、クラスメンバにアクセスした時にSeleniumがアノテーションで指定されたHTML要素をインジェクションしてくれます。

上記の例ではhogeElementにアクセスすると、HTMLのname属性がhogeの要素が返却されます。

実際にテストを実装してみる

入力画面から確認画面の遷移のテストまでを実装してみる

第一段階として、入力画面への入力と確認画面への遷移の部分を実装してみます。

なお、検証する内容は宿泊日(開始)と宿泊日(終了)のみとしています。
・InputPageクラス

ポイントは84行目のinputSuccessDataメソッドです。
guestName(お名前), reserveTerm(宿泊期間)を引数として取ります。
その他の情報は
・宿泊日はシステム日付に1日加算した日付
・その他の値はデフォルトなので変更なし
となっています。

このようにシステム日付を利用することによってテストデータを固定で指定する必要がなくなります。
当然ですが、固定の日付をテストする必要がある場合はテストケースに固定値でセットする必要があります。

情報を入力した後に確認画面で表示される宿泊日(開始)と宿泊日(終了)もクラスメンバにセットしています。
このデータを利用して確認画面に表示される宿泊日(開始)と宿泊日(終了)の検証を行うためです。
(入力に対する検証用データを動的に対応させるため)

・ConfirmPageクラス

ConfirmPageは特に説明は不要かと思います。

・InputTestクラス

ポイントは34行目からのテストメソッドとなります。
36行目で入力画面に入力を行い、「OK」ボタンをクリックし、戻り値にConfirmPageクラスのインスタンスが返却されます。
「Page Object Design Pattern」ではこのように画面操作後の遷移先のページをページオブジェクトのメソッドが返却するように実装します。
こうすればテストケースで今どのページを操作しているかを意識しなくても済むからです。
(と言っても遷移先のオブジェクトの型は意識しているので微妙ではあります。)

38行目でConfirmPageのインスタンスの宿泊開始日と、期待される宿泊開始日の比較
40行目でConfirmPageのインスタンスの宿泊終了日と、期待される宿泊終了日の比較
をそれぞれ行っています。

エラー確認画面のテストを追加してみる

入力画面から確認画面への遷移のテスト例は説明できましたので、次はエラー画面への遷移を追加してみます。
入力画面のデフォルトの内容のまま「次へ」ボタンをクリックすると、エラー画面に遷移して「お名前が指定されていません」とのエラーメッセージが表示されます。
(本来であれば入力画面でエラーメッセージが表示されるべきですが・・・、まあ画面遷移のテストには持ってこいですね!、きっとその意図で作成されているのでしょう!!)
・InputPageクラス
InputPageクラスにinputFailDataメソッドを追加して、上記の操作を実装してみました。

今度は遷移先がエラー画面ですので、ErrorPageのインスタンスを返却しています。

・ErrorPageクラス
ErrorPageは以下のようになります。

エラーメッセージはid=”errorcheck_result”に対応するdivに囲まれているテキストとなりますので、対応するHTML要素にアクセスするメンバー変数と、
そのメンバー変数からテキストを取り出すメソッドgetErrorMessageを含んでいます。

・InputTestクラス
InputTestクラスにはテストケースであるinputPage_errorを追加しました。

処理内容はコメントのままですので、説明は不要と思います。

今回の例だけでは、ページオブジェクトデザインパターンの有効性がイマイチ訴求できないとは思いますが、変更に強いテストを作成するためには必須の仕組みとなりますので、是非ご利用ください。

「Selenium入門その5[ページオブジェクトパターン(Page Object Design Pattern)を利用して変更に強いテストを作成する方法]」は以上です。


スポンサードリンク



関連記事

Selenium利用時のトラブルシューティング方法[クリック編]

Seleniumは便利なテスト自動化ツールですし、今後は更なる利用者の増加が見込まれます。 とは言

記事を読む

JDK8(java 8)の新機能のラムダ式の利用方法[その1:概要]

「JDT betaを利用してJDK8対応のEclipse開発環境を作成する」では、「Eclipse」

記事を読む

Eclipse4.4(Java)におけるビルド・パス関係の設定方法[ビルド・パス上に必要なプロジェクト/プロジェクト参照の追加]

Eclipse4.4(Java)におけるビルド関係のビルド・パス上の「ビルド・パス上に必要なプロジェ

記事を読む

EclipseでAndroidアプリケーションの開発環境の構築と”Hello World!”まで

対象のOSはMac(OS X 1.9.5)とWindows7 64bitとなります。 といっても手

記事を読む

Eclipse(4.3,4.4)のJava言語のリファクタリング機能の使い方[リファクタリングの説明と「名前変更」と「移動」]

本エントリーでは、Eclipse(4.3,4.4)の「リファクタリング」機能の使い方を説明させていた

記事を読む

Selenium入門その6[Selenium3でWebDriver(Java/Junit4)の環境を作成しEdge,Chrome,Firefoxで確認してみる]

Selenium3も3.0.1がリリースされましたし、今後は本格的にSelenium3が利用されてい

記事を読む

Eclipse4.3のチュートリアル機能で”Hello World”アプリケーションの作成方法を説明する。

Eclipseのインストールが終了したので、各画面エリアの名称の説明、各画面エリアの使い方の説明を

記事を読む

Eclipse4.4,4.3の使い方[エディタのフォントサイズの変更方法]

今回は、Eclipse4.4と,4.3におけるエディタエリアのフォントサイズの変更方法を説明させてい

記事を読む

Eclipseの使い方(Eclipse4.4のブックマーク機能とタスク機能)

今回は、Eclipseのブックマーク機能とタスク機能の説明をさせていただきます。 両機能とも効率的

記事を読む

Eclipse(4.3,4.4)の使い方[各画面エリアの名称とパースペクティブのビューのカスタマイズ]

本エントリーでは、Eclipse(Eclipse4.3,4.4)の各画面エリアの名称の説明と、ビュー

記事を読む

Comment

  1. […] RCでは利用できますが、Selenium WebDriverでは利用できません。 [紹介元] Selenium入門その5[ページオブジェクトパターン(Page Object Design Pattern)を利用して変更に強いテストを作成する方法] […]

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Selenium入門その6[Selenium3でWebDriver(Java/Junit4)の環境を作成しEdge,Chrome,Firefoxで確認してみる]

Selenium3も3.0.1がリリースされましたし、今後は本格的にS

Selenium利用時のトラブルシューティング方法[クリック編]

Seleniumは便利なテスト自動化ツールですし、今後は更なる利用者の

Java8のラムダ式とStream APIを利用してコーディング量の削減サンプル集

Java8になりラムダ式と「Stream API」が利用できるようにな

Selenium入門その5[ページオブジェクトパターン(Page Object Design Pattern)を利用して変更に強いテストを作成する方法]

Selenium入門その2 では「UIマップファイル」と言う仕組みが

Javaによる非同期処理入門その1[非同期処理の実装方法の概説]

Javaによる非同期処理に関するエントリーを前々から作成したいと思って

→もっと見る

Optimization WordPress Plugins & Solutions by W3 EDGE
PAGE TOP ↑