*

Selenium入門その4[Selenium WebDriver(Java/Junit4)の基本コマンド]

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


スポンサードリンク



前回はEclipse環境でSelenium WebDriverでJava/Junit4を利用したテストの実装方法を説明させていただきました。

今回は、よく利用する基本的なコマンドと要素を特定する方法の説明を記載させていただきます。

EclipseでJava/Junit4を利用しますので、前回の「Selenium入門その3[Selenium WebDriver(Java/Junit4)の使い方] 」を先にご覧下さい。

本エントリーの内容は以下の通りです。

  1. 要素を特定する方法
  2. Webブラウザを利用した各種情報の取得方法
  3. 非同期処理を考慮したテストの作成方法
  4. よく利用する基本的なコマンド


1 要素を特定する方法

どんな処理でもそうですが、処理対象を決めないと処理できないですよね。
Seleniumで実現する自動テストも同様です。

少し話しは変わりますが、最近のWebアプリケーションではお決まりの非同期処理も自動テスト泣かせです。
この非同期処理にどのように対処すればよいかも合わせて説明させていただきます。

Seleniumにおける処理の基本

SeleniumではWebDriverのfindElementもしくはfindElementsでHTML要素を検索し、得られたorg.openqa.selenium.WebElementに対して何らかの操作を実行するとの処理を行うことにより自動テストが実現されます。

findElementに指定する引数によって操作対象のHTML要素を特定します。

この引数の指定方法(ストラテジー)として以下のがあります。

ストラテジー ロケータ 説明
idによる特定 By.id
CSSセレクタによる特定 By.cssSelector
nameによる特定 By.name 要素のname属性で特定
タグ名による特定 By.tagName 要素のHTMLタグ名で特定
CLASSNAMEによる特定 By.className 要素のclass属性で特定
リンクテキストによる特定 By.linkText リンクテキストで特定
リンクテキスト(部分一致)による特定 By.partialLinkText リンクテキスト(部分一致)で特定
XPathによる特定 By.xpath
idもしくはnameによる特定 ByIdOrName id属性もしくはname属性で特定

上記の通り、それぞれのストラテジーには対応したロケータが存在していますので、対応するロケータに条件の文字列を指定し、その値をfindElementの引数に指定します。
詳細はこれから説明させていただきます。

説明に利用するサンプルHTML

各ストラテジーの説明に利用するHTMLは以下の通りです。

画面イメージは以下の通りです。
スクリーンショット 2016-05-03 19.58.05

idによる特定

この方法が一番一般的だと思います、
HTMLのid属性を指定してHTML要素を特定する方法です。当然ですがidが付与されており、一意である必要があります。

利用方法

利用方法は以下のようになります。

これはid属性に限ったことではないのですが、findElementは、指定した条件に合致する要素が複数存在する場合は、一番はじめに出現した要素を返却します。

なお、指定した条件に合致する要素が存在しない場合は
org.openqa.selenium.NoSuchElementExceptionがスローされます。

実装例

サンプルHTMLのid=”testForm”の要素を検索しクリックするコードは以下の通りです。

「idによる特定」なのでロケータはBy.idですので、findElementの引数にはBy.idを指定し、By.idの引数に検索したいidの値である”testForm”を渡しています。

って、フォームクリックしても意味ないですが・・・

CSSセレクタによる特定

JQueryをご利用の方はおなじみだとは思います。
よく利用するのは、タグ名、.クラス名、#id名、タグ名.クラス名、タグ名#id名
ぐらいだと思いますので、このバリエーションで実装例を説明させていただきます。

利用方法

利用方法は以下のようになります。

実装例

タグ名、.クラス名、#id名、タグ名.クラス名、タグ名#id名を指定した実装例は以下の通りです。

コメントで説明を記載していますのでこれ以上の説明は省略いたしますが、1点だけ追加させてください。
CSSセレクタでidやclassの文字列に空白が存在する場合は前述の方法ではうまく要素が検索できません。

この場合はCSSセレクタの「属性セレクタ」を用いる必要があります。

属性セレクタは以下のように記述します。
タグ名[属性名=’属性値’]

先ほどの

を属性セレクタを利用して書き直すと以下のようになります。

このようにどの属性を条件にするかを明示的に指定できますので、id、class以外の属性を指定することも可能です。

nameによる特定

HTMLのname属性を指定してHTML要素を特定する方法です。

利用方法

利用方法は以下のようになります。

実装例

実装例は以下の通りです。

タグ名による特定

HTMLのタグ名を指定してHTML要素を特定する方法ですが、実際にはあまり利用しません。理由は変更に弱いからです。

このストラテジーで要素を一意に識別できることも少ないですし、であればfindElementsで複数検索して、インデックスを指定して利用することになるのですが、そんなことをするのであればCSSセレクタを利用すべきです。

一度検索した要素の配下に対して検索する時に利用するぐらいだと思います。

利用方法

利用方法は以下のようになります。

実装例

実装例は以下の通りです。

CLASSNAMEによる特定

HTMLのCLASS属性を指定してHTML要素を特定する方法です。
CLASSNAMEを要素の特定に使うのは最後の手段だと言えます。例えばマウスオーバしたときにボタンの見た目が変わるなど、色々な不確定要素が介在するようになり、テストの動作を安定させるのに時間がかかってしまうからです。

利用方法

利用方法は以下のようになります。

実装例

利用方法は以下のようになります。

リンクテキストによる特定

HTMLのLinkのテキストを指定してHTML要素を特定する方法です。
なお、リンクテキスト(部分一致)による特定もほとんど同じ利用方法なのでここで説明させていただきます。

利用方法

利用方法は以下のようになります。

実装例

実装例は以下のようになります。

XPathによる特定

XPahでHTML要素を特定する方法です。複雑な要素の階層構造を指定して検索できるので自由度は高いですが、他のストラテジーと比べると手間がかかる方法と言えます。

XPathは色々な記載方法がありますので、XPathの詳細な説明は省略いたしますが、Chromeを利用すると要素のXPathを簡単に取得できます。Chromeを利用した情報収集方法は後述させていただきます。

利用方法

利用方法は以下のようになります

実装例

実装例は以下のようになります

上記の処理ではname=”password”のインプットがクリックされます。一般的なプログラミング言語ですと配列のインデックスは0から開始されるのですが、XPathだと1から開始となるからです。

idもしくはnameによる特定

このストラテジーはあまり知られていませんが、とっても便利です。Capybaraのような高生産性を目指したフレームワークであれば勝手にやってくれるのですが、素のJavaでSeleniumのテストスクリプト書くのであれば生産性向上に寄与してくれます。

id属性に一致する要素がない場合には、name属性を持つ要素との動作となります。

利用方法

利用方法は以下のようになります

実装例

実装例は以下のようになります

2 Webブラウザを利用した各種情報の取得方法

「1.要素を特定する方法」では、HTML要素を取得する方法を説明させていただきました。ではどうやってその情報(例えばBy.idの引数の文字列)を調べるの?、となると思います。

SeleniumIDEで操作を録画し、得られたテストケースを実行することで画面操作が正しく行えるのであれば幸せなんですが、なかなかうまくいかないんですよね・・・、ユニットテストもテストを実装しずらい構成でアプリを作ってしまうと苦しいですよね。

SeleniumIDEでの録画も同様で、録画しづらいWebアプリケーションを作ってしまうと苦しいです。
SeleniumIDEの利用を選定としたベストプラクティスみたいなのが必要だと感じます。

と話が脱線していますので、Webブラウザを利用した各種情報の取得方法の説明をさせていただきます。

Chromeを利用した各種情報の取得方法

そこで、Chromeを利用する方法を説明させていただきます。
(ほんと、近年は便利なツールがありますよね・・・)

HTMLの要素の属性の調査方法

Chromeでテスト対象の画面を開いて、情報を調べたい要素にマウスのフォーカスを当てます。
とりあえず「login」ボタンを調べてみます。
スクリーンショット 2016-05-04 12.06.37

「login」ボタンにフォーカスを当てた状態でマウスの右クリックメニューを表示し、「検証」をクリックします。
スクリーンショット 2016-05-04 12.10.51

画面表示が変化して、要素の情報が表示されました。
スクリーンショット 2016-05-04 12.12.07

この情報からHTMLの属性を調べることができます。
なお、情報が表示されている部分の他の要素に対応する部分をクリックすると、対応するHTMLの要素が分かるようになります。
下記の画像は「clear」ボタンを選択した時のものとなります。
スクリーンショット 2016-05-04 12.27.50

CSSセレクタの情報を一目で分かるように表示してくれています。
buttonタグのidがactionですからバッチリですね。
スクリーンショット 2016-05-04 12.12.07

でも元のHTML内でCSSセレクタ=”button#action”の要素が複数なんですよね・・・
そんな時は、FireFoxの「一意なセレクタをコピー」機能を利用します。詳細は「FireFoxを利用した各種情報の取得方法」で説明させていただきます。

XPathの調査方法

XPathを取得したい要素の情報を選択した状態で、右クリックメニューを表示し、[Copy]-[Copy Xpath]をクリックします。
これでクリップボードにXPathがコピーされます。
スクリーンショット 2016-05-04 12.30.39

FireFoxを利用した各種情報の取得方法

FireFoxでも同じようなことができますが、XPathの取得はできません。
逆にFireFoxでできることは「一意なセレクタをコピー」です。

「login」ボタンにフォーカスを当てた状態でマウスの右クリックメニューを表示し、「要素を調査」をクリックします。
スクリーンショット 2016-05-04 13.42.31

Chromeと同じように画面下部に情報が表示されますので、セレクタを取得したい要素を選択した状態でマウスの右クリックメニューの「一意なセレクタをコピー」をクリックします。
スクリーンショット 2016-05-04 13.44.13

「Login」を対象に「一意なセレクタをコピー」を行うと以下の文字列が取得できました。
id=testFormの小要素のinputタグの小要素の3番目との情報ですね、正しいですね。

この機能はとても便利で、一意に認識できるCSSセレクタを生成してくれますので、テスト作成時の生産性向上に寄与すると思います。

3 非同期処理を考慮したテストの作成方法

処理対象を検索する方法は前述の通りなのですが、
最近のWebアプリケーションではお決まりの非同期処理を考慮に入れていないと、せっかく作成した自動テストが失敗してしまいます。

この非同期処理にどのように対処すればよいかを説明させていただきます。

非同期処理への対処方法の概説

結論は待つしかないです。基本戦略としては、任意のボタンを押して任意の要素が出現するまで待てばよいです。

待つ方法としては
①単純にスリープを行う。
②findElementのタイムアウト時間を調整する。
③任意の条件を満たすまで待つ。

の3つが存在していますが、基本的には②でほぼ充足できます。
画面表示に変更が起こらない処理などは、①である程度長めのスリープを入れるしかないです。
③は、要素は出現しているが、なんらかの属性が変更されるまで待つ時に利用します。

以下、②、③の実現方法を説明させていただきます。

findElementのタイムアウト時間を調整する。

findElement、findElementsに共通な設定となります。
なお、ページリクエスト時のタイムアウトは別な設定が存在しており、この設定とは異なります。

ページリクエスト時のタイムアウト設定は以下のように設定できます。
下記の例では60秒にセットしています。

findElementのタイムアウト時間に話を戻して、テストが失敗することを前提としたタイムアウトなので長めにしちゃえ!!、と安易に長めにするとテストの再現性は高まりますが、失敗するテストケースが多い時にテスト実行時間がとても長くなりますので注意が必要です。

RemoteWebDriver.RemoteWebDriverOptions.RemoteTimeouts
のimplicitlyWaitメソッドでタイムアウトの設定が行えます。

実装例は以下の通りです。

任意の条件を満たすまで待つ。

org.openqa.selenium.support.ui.WebDriverWait

org.openqa.selenium.support.ui.ExpectedConditions
を利用することで実現可能です。

待ち合わせ方法の詳細ついては前述のAPIをご覧ください。
今回は、findElement相当な処理と要素が非表示になるまで待つ処理を説明させていただきます。

findElement相当な処理

要素が非表示になるまで待つ処理

と、このように待ち合わせ処理は実現できるのですが複雑な待ち合わせはできないです。
複雑な待ち合わせ(Htmlの属性の値が任意の値に変更されたらなど)はWebDriverWaitを継承して実現しないといけないです。

やっぱり素のJavaでSeleniumやるのは生産性の面でイマイチな気がします。

4 よく利用する基本的なコマンド

コマンド一覧的なエントリーも後々作成する予定ですが、とりあえず本エントリーでは、よく利用するコマンドの説明をさせていただきます。

WebDriverのよく利用するメソッド

WebDriverのよく利用するメソッドは以下の通りです。

メソッド名 説明
get 引数で指定したURLを開く
findElement org.openqa.selenium.WebElementを返却
findElements org.openqa.selenium.WebElementの配列を返却
quit テストで起動したブラウザを終了

org.openqa.selenium.WebElementのよく利用するメソッド

click

要素をクリックするメソッドです。
Selenium IDEの対応するコマンドはclickAndWaitとなります。
clickだけなのにclickAndWaitかよ!!、と思いますが、Seleniumではクリックするとリクエスト時のタイムアウトまで勝手に待つのでclickAndWaitなんですよね・・・
タイムアウトにつきましては後述いたします。

利用例

sendKeys

テキストボックスに文字列を入力するときに利用するメソッドです。
Selenium IDEの対応するコマンドはsendKeysとなります。

なお、制御キー的な(CtrlやEnter)は
org.openqa.selenium.Keysで定義されていますので、詳細はAPIドキュメントを参照ください。

シンプルな利用例
文字列を普通に入力する例は以下の通りです。

複数の文字列を順番に入力する例

複数の文字列を同時に入力する例
Ctrl + vみたいなキー入力ですね

上記のコードでWindowsだとペーストはできるのですが、Macだと動作しません。
Webアプリケーションの自動テストでMacを対象にすることはないですが、基本的に制御キーは環境に依存するので極力使わない方が安全です。

clear

テキストボックスに入力されている内容をクリアします。それ以外のコンポーネントの場合はなんの変化もおこりません。

isSelected

初期画面表示時のチェックボックス、セレクトのオプション、ラジオボタンのデフォルト状態を検証する時に利用します。

利用例

getText

要素のインナーテキストを取得します。テキストの前後の空白は除去されます。

利用例

getCssValue

CSSプロパティを取得するメソッドです。
利用例

Webアプリケーションでよく利用するコンポーネントの操作方法

ここだけ少し切り口が異なりますが、Webアプリケーションでよく利用するコンポーネントの操作方法の説明を記載させていただきます。

基本的にはWebElementを検索してクリックで操作はできますが、それ以外のが提供されている場合もあります。

セレクトのオプションの選択

以下のような画面を例に説明させていただきます。

スクリーンショット 2016-05-04 19.33.19

以降の例は全て「自営業」のoptionを選択する例となります。

・WebElementでoptionを検索して選択する方法

org.openqa.selenium.support.ui.Selectを利用する方法

ラジオボタンの選択

ラジオはfindElementで要素を検索してクリックするだけです。

以下のような画面を例に説明させていただきます。
スクリーンショット 2016-05-04 19.40.35

上記画面の「woman」を選択する実装例は以下の通りです。

チェックボックスの選択

チェックボックスの専用のクラスが存在しませんのでfindElementで検索しクリックするだけです。
とはいえ、チェックしたいのであればチェックされていなければとの条件分岐が必要になります。そうしないとクリックしてチェックを外してしまう事になります。

検証時によく利用するメソッド

旧来の手動で行うテストでは、画面操作を行ったあとに画面項目を検証するとの作業を行いますよね!
Seleniumの自動テストでも同様の事が行えます。

検証は、フレームワークとSeleniumのコマンドを組み合わせて実現します。
本エントリーではJunit4をターゲットとしていますのでJunit4の検証の仕組み用います。

画面タイトルの検証

Selenium IDEの対応するコマンドはassertTitleとなります。

HTMLのタイトルの検証は以下のように実現できます。

まあ、これは好みなのですがassertThatを利用すると以下のようになります。

HTMLの属性の検証

Selenium IDEの対応するコマンドはassertAttributeとなります。

ラジオボタンの選択の例で利用したHTMLの「woman」の属性=typeがradioであるとの検証は以下のようになります。

テキストの検証

リンクテキストの検証ですね。
Selenium IDEの対応するコマンドはassertTextとなります。

aタグのhrefが”…”のリンクテキストが”Seleniumの使い方”であるとの検証は以下のようになります。

「Selenium入門その4[Selenium WebDriver(Java/Junit4)の基本コマンド]」は以上です。


スポンサードリンク



関連記事

JUnit入門その1[Eclipse4.4のJUnitプラグインの基本的な使い方]

利用する環境の作成につきましては、「Eclipseの使い方(Windows環境のEclipse4.3

記事を読む

Eclipse4.4(Java)におけるビルド・パス関係の設定方法[JRAおよびクラス・フォルダー/ライブラリー]

Eclipse4.4(Java)におけるビルド関係のビルド・パス上の「JRAおよびクラス・フォルダー

記事を読む

Eclipseのインストールと日本語化とJDK8(Java8)対応[Eclipse4.4とEclipse4.3]

インストールするEclipseのバージョンですが、とりあえず4.3をターゲットとしておき、 4.4

記事を読む

Eclipse(4.4)でJava言語のリファクタリング機能の使い方[「メソッド・シグニチャーの変更」と基本的な抽出処理、及び「インライン化」、「定数の抽出」]

本エントリーでは、Eclipse(4.3)でJava言語のリファクタリング機能の使い方に引き続き

記事を読む

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

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

記事を読む

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

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

記事を読む

JUnit入門その5[DBUnitの概要説明]

前回エントリーでは「JUnit入門その4」と題してDBUnitをEclipseで動作させるための環境

記事を読む

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

Java8になりラムダ式と「Stream API」が利用できるようになりました。 C#では一足早く

記事を読む

Eclipse4.4(Java)におけるビルド・パス関係の設定方法[ビルド・パス上のソース・フォルダー]

Eclipse4.4(Java)におけるビルド関係のビルド・パス上のソース・フォルダーの利用方法を説

記事を読む

java8(JDK8)の新機能のラムダ式の利用方法をEclipseとJUnitで説明[その2:関数型インターフェースを例としたラムダ式]

「JDK8(Java 8)の新機能のラムダ式の利用方法」では、 指定できる場所の概説と関数型インタ

記事を読む

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 ↑