*

Selenium入門その2[Selenium IDEの使い方]

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


スポンサードリンク



「Selenium入門その1[自動テストの概要]」
に引き続き、今回はSeleniumIDEの使い方を説明させていただきます。

「Selenium IDE」のインストール方法は
「Selenium入門その1[自動テストの概要]」
「Selenium IDEの利用方法」
をご覧下さい。

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

  1. Selenium IDEの使い方
  2. サンプルHTMLの説明
  3. サンプルHTMLをターゲットとした利用方法の説明

 

となります。

1.Selenium IDEの使い方

概要は「Selenium入門その1[自動テストの概要]」
で説明させていただきましたので、各メニューの説明を行い、その後にボタンの説明を記載させていただきます。

Selenium IDEの起動

以下の画像の赤枠部分をクリックすると起動できます。
スクリーンショット 2016-04-29 15.12.01

ご利用のFirefoxのアドオンのインストール状況によりアイコンの表示場所は異なります。

ファイルメニュー

ファイルメニューの中身は以下のとおりです。
スクリーンショット 2016-04-29 15.22.01

テストケースの新規作成

これは特に説明は不要かと思いますが、Windowsのメモ帳、Word等と同じ動作となります。

テストケースを開く

既に作成しているテストケースのファイルを開くことができます。

テストケースを保存

Selenium IDEで記録した操作をファイルに保存できます。

テストケースに名前を付けて保存…

「テストケースを保存」だとファイルの上書き保存で
(と言っても、新規作成時はどのファイルに保存するか不明なのでファイル選択ダイアログが表示されます。)

「テストケースに名前を付けて保存…」だと保存先のファイル名が指定できます。

テストケースをエクスポート..

テストスクリプトの言語やフレームワークを指定し、テストケースを保存できます。

指定できる項目は以下の画像のとおりです。
スクリーンショット 2016-04-29 15.35.50

最近開いたテストケース

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

テストケースを追加

テストスイートにテストケースを追加することができます。

テストスイートとは、テストを一括して管理、実行する仕組みを意味します。
テストスイートには複数のテストケースが含まれます。

テストケースはテストが失敗すれば、途中で終了しますが、テストスイートは任意のテストケースで失敗しても、全てのテストケースが実行されます。

テストスイートを新規作成

テストスイートを新規作成します。
テストスイートを開く、テストスイートを保存、テストスイートに名前を付けて保存、テストスイートをエクスポート、最近開いたテストスイートの説明は省略させていただきます。

編集メニュー

説明は不要と思います。
スクリーンショット 2016-04-29 17.22.29

アクションメニュー

スクリーンショット 2016-04-29 17.23.14

テストの記録

テストの記録を開始、停止する時に利用します。
テストの記録が開始されていると左側にチェックが付きます。
スクリーンショット 2016-04-29 17.25.21

テストスイート全体を実行

テストスイートを実行します。

現在のテストケースを実行

現在開いているテストケースを実行します。

現在開いているテストケースは「Selenium IDE」のタイトルに表示されているテストケースとなります。
スクリーンショット 2016-04-29 17.30.19

他のテストケースを開く場合は、画面左側の各テストケースをダブルクリックします。
スクリーンショット 2016-04-29 17.32.09

Play test suite periodically

テストを定期的に実行するかどうかを指定します。これは定期実行するかどうかのトグルメニューとなります。

テストを定期的に実行するを選択している場合は、メニューの左側にチェックが付きます。
スクリーンショット 2016-04-29 17.48.47

定期的に実行って言われても、どんな条件で実行するんや??
となると思います。

この機能に関しては、画面とメニューの設計思想がイマイチに思えます。
条件の指定は以下の部分をクリックし、設定画面を表示することで指定可能です。
スクリーンショット 2016-04-29 17.44.02

画面の方とメニューの動きが異なるんですよね・・・

設定画面は以下の通りです。
スクリーンショット 2016-04-29 17.47.00

この画面の項目自体は分かりやすいと思いますので、詳細の説明は省略いたしますが
実行する曜日、時分秒を指定できます。
スケジューラーにありがちな、時間間隔指定の実行なども指定可能です。

ブレークポイントの指定/解除

テストスクリプトを実行のブレークポイントを指定することができます。

開始位置の指定/解除

これはなかなか珍しいですよね、開始位置も指定できるようになっています。

一時停止/再開

そのままですが、テストの実行を停止/再開できます。

1ステップ実行

Visual StudioやEclipseでもおなじみですね、ステップ実行ができます。

このコマンドを実行

選択しているテストケースの選択行だけを実行できます。

最速、高速化、遅い、遅い

テストの実行スピードを調整する時に利用します。
基本的には、自動化されたテストは最速で実行されるべきですが、
動いているか確認したい時にはじっくり見える速度で実行したいですよね
そんな時に利用するメニューとなります。

と書いて気付いたのですが
遅い、遅いって・・・
バグってはるなーーーー

正しくは最速、高速化、遅い、早い
です。以前はバグってなかったような気がします。

オプション

スクリーンショット 2016-04-29 18.06.03

設定

各種設定が行えます。

・一般タブ
ファイルのエンコーディング、録画時のデフォルトタイムアウトなどの指定ができます。
スクリーンショット 2016-04-29 19.30.34

assertTitleは便利ですよね、
assertTitleのチェックを入れると、ページ遷移後に自動的にHTLMのタイトルのアサート文を生成してくれます。
スクリーンショット 2016-04-29 19.34.54

これ以外の特筆すべき項目としては、「Selenium Core拡張スクリプト(user-extensions.js)」があります。
これは「UIマップファイル」を利用するための設定となります。
「UIマップファイル」は操作対象のコンポーネントを識別するための情報を1つのファイルに集約し、
変更に強いテストスクリプトを作成するための仕組みとなります。

「UIマップファイル」につきましては
Selenium入門その5[ページオブジェクトパターン(Page Object Design Pattern)を利用して変更に強いテストを作成する方法]
をご覧下さい。

・フォーマットタブ
各種言語・フレームワークのフォーマット設定が行えます。
正確には、各種言語・フレームワークのフォーマットのテンプレートを編集すると言えます。
用意されているテンプレートではなく、独自のテンプレートを追加することも可能です。

各種言語・フレームワークでも同じような設定内容となりますので
Java/Junit4/WebDviberの設定を説明させていただきます。
スクリーンショット 2016-04-29 19.38.27

各設定の説明は以下のようになります。

名称 説明
Variable for Selenium instance SeleniumのWebDviberのインスタンス変数の名前を指定します。
Package 生成するスクリプトのJavaのクラス名を指定します。
Header Package宣言、Import文、クラス定義、setUpメソッド、テストケースのメソッド定義のフォーマット等が指定できます。
Footer tearDownメソッド、isAlertPresentメソッド、isElementPresentメソッドのフォーマット等が指定できます。
Indent 生成するスクリプトのインデント方法が指定できます。
Bromine Java、PHP

・Pluginsタブ
プラグインを利用している時の設定が行えます。

「Automatically disable plugin provided code on plugin errors」は、
選択するとプラグインが提供するエラー情報を無視する設定です。処理速度に影響します。

「Disabling plugin should completely disable the addon in Firefox」は、
良く分からない・・・です。

・Locator Buildersタブ
操作を録画する時のコントロールの識別方法の優先順位を設定できます。
録画する対象のWebアプリの実装上の特徴に応じてこの設定を変更することをオススメいたします。

変更したい場合は、変更したい項目をドラッグ&ドロップすることで優先順位が変更できます。

・WebDriverタブ
テストを実行するブラウザを変更することができます。
「Enable WebDriver Playback」にチェックを入れ、ブラウザ名指定することで変更し、SeleniumIDEを再起動することで変更が反映されます。

SeleniumIDE側での設定は以上ですが、テスト実行前に「Selenium Server」を起動しておく必要があります。
「Selenium Server」の起動方法については別エントリーで説明させていただきます。

クリップボードのフォーマット

テストを記録し、記録されたコマンドを選択後しコピーを行うことでクリップボードにテストスクリプトがコピーされるのですが、その時のフォーマットが選択できます。
フォーマットは今までに出てきた物と同じとなります。

コマンドを選択します。
スクリーンショット 2016-04-29 21.52.52

マウスの右クリックメニューのコピーをクリックします。
スクリーンショット 2016-04-29 21.53.06

以上でクリップボードにスクリプトがコピーされます。

上記の説明はクリップボードへのコピーですが、逆にクリップボードのデータをSeleniunIDEに貼り付ける時にもこのフォーマットが適用されます。

リセットIDEのウィンドウ

IDEのウィンドウを画面の左上に移動します。

Clear history

ブラウザキャッシュをクリアできます。

サブメニューは以下の通りです。
スクリーンショット 2016-04-30 12.35.30

Schedule tests run periodically

前述のスケジュール実行の時刻を設定する画面が表示されます。

画面上の各ボタン

スクリーンショット 2016-04-30 13.41.40

①Speed Control(速度調節)

テストケースの実行速度を調節します。

②Run All(すべて実行)

テストスイートに含まれる全てのテストケースを実行します。

③Run(実行)

選択しているテストケースを実行します。

④Pause/Resume(一時停止/再開)

実行中のテストを一時停止または再開します。

④Step(ステップ実行)

テストケースの「1ステップ(1コマンド)実行」を行います。

⑥TestRunner Mode実行

テストケースを Selenium-Core TestRunner で読み込んでブラウザで実行することができます
テストケースを評価して、TestRunnerとの後方互換性があるかどうかを調べるために用意されていますが、現在ではこのボタンを使うことはないです。

⑦スケージュール実行のOn/Off

スケジュール実行の有効/無効を設定するトグルボタンです。

⑧スケージュール実行の設定

スケージュール実行の設定画面が表示されます。

⑨Recordス(記録)

ブラウザ操作の記録を行う/行わないを変更するトグルボタンです。

⑩テストケース一覧

テストケースの一覧が表示されます。

⑪テーブル/ソースの切替

テーブルタブが選択されていると、⑫の領域にコマンド一覧が表示されます。
スクリーンショット 2016-04-30 14.49.15

ソースタブが選択されていると、⑫、⑬の領域にテストケースのソースが表示されます。
スクリーンショット 2016-04-30 14.50.59

⑬コマンド変更

選択しているコマンドの内容を変更できます。
変更できる内容として、コマンド、対象、値となります。

検証コマンドを追加する時にも利用できます。
検証コマンドを追加するためにコマンド一覧の最後の空白行を選択し、適切なコマンド、対象、値を選択します。
スクリーンショット 2016-04-30 14.59.53

assertTitleの検証を追加してみます。

コマンド欄はコード補完が効いていて「assertTi」まで入力すると「assertTitle」のみが候補として表示されるので選択します。
スクリーンショット 2016-04-30 15.06.36

対象に文字列のGoogleを入力します。
この画面項目だったら期待値は値の所に入れるべきであると感じますが、対象が存在しないコマンドの場合は、値を対象に指定する仕様となります。

これでHTMLのタイトルが”Google”であるかどうかの検証コマンドが追加できました。

上述の例ではassertTitleを利用しましたがverityTitleでもタイトルの検証が可能です。
assertXXXとそれに対応するverityXXXが存在しています。

両者の違いは
assertXXXは検証が失敗するとテストケースがその時点で終了する。
verityXXXは検証が失敗してもテストケースの実行は継続される。
となります。

任意の検証が失敗してしまうのであればテストを継続しても意味がない場合はassertXXXを利用すべきです。

「ログ」、「リファレンス」、「UI-Element]」、「Rollup」の4タブがあります。
・「ログ」
テストケース実行時のログが出力されます。

ログを消去するには 「消去」をクリックします。
スクリーンショット 2016-04-30 17.13.47

log4jのように出力されるログレベルを変更することができます。
スクリーンショット 2016-04-30 17.16.31

・「リファレンス」
選択しているコマンドのリファレンスが表示されます。
以下の画像はassertTitleコマンドを選択している時の物となります。
スクリーンショット 2016-04-30 17.18.53

・「「UI-Element]
「対象」要素がUIマップを使っている場合に、ロケーターの値を確認することができます。詳細は別エントリーで説明させていただきます。

・「Rollup」
Seleniumでは複数のコマンドをグループ化し、単独のコマンドとして利用することができます。「対象」要素がこのグループ化したコマンドの場合に、グループ化されたコマンドが表示されます。

2.サンプルHTMLの説明

一通りの使い方の説明が終わりましたで、実際の利用イメージを説明するためのサンプルHTMLの説明をさせていただきます。

1ファイルでSeleniumIDEの利用イメージを説明できるようにしました。テスト対象のWebアプリケーションを用意しなくても実際に確認していただける事がその理由です。

2.サンプルHTMLの画面と動作説明

初期表示時の画面は以下の通りです。
Webアプリケーションでよく利用されるテキストボックス、セレクトボックス、ラジオボックスを配置しています。
スクリーンショット 2016-04-30 19.19.55

名前、性別、職業を入力し後に追加ボタンをクリックします。
すると画面は以下のようになります。
スクリーンショット 2016-04-30 19.22.14

貧相ですが、入力項目の下に入力した内容が追加されています。
複数回追加を行うと何度でも追加できますが、とりあえず追加ボタンは1回だけ押す前提で作成しております。

HTMLの中身は以下の通りです。

3.サンプルHTMLをターゲットとした利用方法の説明

先ほど説明させていただいたHTMLをターゲットとして、実際のSeleniumIDEの使い方を説明させていただきます。
なお、本エントリーではWebサーバにサンプルHTMLを格納して参照しておりますが、ローカルファイルへのアクセスでも問題ありません。

画面操作を録画する

SeleniiumIEDを起動し録画モード変更

録画ボタンをクリックして、録画モードになっていることを確認します。
(SeleniumIDE起動時には録画モードになっているのでクリックする必要はありません。)
スクリーンショット 2016-04-30 21.07.41

FireFoxでテスト対象のURLにアクセス

http://localhost/testTarget.html
にアクセスします。

画面を操作

名前にセレニウム男、性別に男、職業にその他をそれぞれ入力し、追加ボタンをクリックします。
画面は以下のようになっているはずです。
スクリーンショット 2016-04-30 21.21.32

録画ボタンをクリックして、録画モードを解除します。

テストケースを実行

赤枠部分をクリックして録画したテストを実行してみます。
スクリーンショット 2016-04-30 21.21.32

録画した操作がうまく実行されました。

録画されたテストケース

録画したテストケースをJava/JUnit4/WebDeiverでエクスポートしてみます。
スクリーンショット 2016-05-01 11.34.39

エクスポートで生成されたファイルの内容は以下の通りです。

うんうん、あれ・・・
30行目なのですが、sexNameで検索してクリックしてますよね・・・

driver.findElement(By.name(“sexName”)ではnameが”sexName”の一番目のエレメントが返却されるので問題はないです。

おかしいなー、と言いつつ、録画を開始して女性を選択してみました。
すると以下のコマンドが出力されました。

今度は2番目・・・、普通にJavaでWebDriverを使うときはこの場合は1になりますよね・・・
実は、これはXPathの仕様なんですよね、XPathでは要素の参照のインデックスは1,2,3となりまのでこれで正しいです。

ざっくり説明させていただくと
3行目 テスト対象のURLをオープン
4行目 id=nameInputIdのエレメントの入力値をクリア
5行目 id=nameInputIdのエレメントに”セレニウム男”を入力
6行目 name=”sexName”である最初に出現するエレメントをクリック
7行目 id=”jobSelectId”でラベルが”その他”のエレメントを選択
8行目 CSSセレクタが”button”のエレメントをクリック

との処理となっています。特に分かりにくいところもないと思います。

検証処理を追加する

追加ボタンクリック処理の検証

操作するだけでは自動テストとしての意味がないですので、検証を追加してみます。
具体的には、入力された内容が追加ボタンクリックによって画面に正しく反映されることの検証です。

名前の検証を追加してみます。
表示されているコマンド一覧の最後の次行を選択します。
スクリーンショット 2016-05-01 12.15.00

値の検証を追加したいので、コマンドにassertTextを入力します。
スクリーンショット 2016-05-01 12.35.20

次にassertValueしたい対象を設定します。
設定方法は何通りかありますが、今回は「Select」ボタンを使ってみます。
「Select」ボタンをクリックします。
スクリーンショット 2016-05-01 12.18.53

テスト対象のアプリを開いているブラウザの画面を表示します。
すると以下の画像のようにエレメントが選択できるようになります。
スクリーンショット 2016-05-01 12.24.00

名前の検証ですので、以下の部分をクリックします。
スクリーンショット 2016-05-01 12.24.59

するとSeleniumIDEに対象がセットされます。
スクリーンショット 2016-05-01 12.36.33

id=nameValueとなっているので予想どおりですね!

最後に値です。これは”セレニウム男”をセットします。
スクリーンショット 2016-05-01 12.37.46

テストケースを実行して確認してみます。
スクリーンショット 2016-05-01 12.39.08

うまくいきましたが、本当に検証が動いているか心配ですよね、
そんなあなたには、ログの確認をオススメします。
最下部のログをクリックし、検証のログが出力されていることを確認します。
スクリーンショット 2016-05-01 12.40.45

が出力されているのでOKですね。

保存したテストケースを編集する

保存したテストケースを編集し、SeleniumIDEで実行してみます。

テストケースの保存

まずは、テストケースの保存を行います。
[ファイル]-[テストケースの保存]をクリックします。
スクリーンショット 2016-05-01 12.48.41

ファイル選択ダイアログが表示されますので、ファイル名を指定して保存します。
保存したファイルの内容は以下のようになっています。

テストケースの編集

assertTextで性別と職業の検証を追加します。
テキストエディタでファイルを編集します。

編集後のファイル内容は以下の通りです。
44行目以降にassertTextで性別と職業の検証が追加されているだけです。

テストケースを開く…

ファイル選択ダイアログが表示されますので、編集したファイルを開きます。
と思ったのですが、自動変更が検出されますので、「OK」ボタンをクリックします。
スクリーンショット 2016-05-01 12.58.11

追加したコマンドが反映されていることが確認できます。
スクリーンショット 2016-05-01 13.04.17

でも反映はされますが、テストケースを実行すると前の状態に戻ってしまいますので
[ファイル]-[テストケースを開く…]でファイルを読み込んでください。
(どう考えてもバグってます。)

テストケースを実行する

テストケースを実行しテストが通りことを確認します。
スクリーンショット 2016-05-01 13.04.17

うんうんOKですね。
ログも確認してみます。
スクリーンショット 2016-05-01 13.09.03

うんうんうんOKですね。

「Selenium入門その2[SeleniumIDEの使い方]」は以上です。


スポンサードリンク



関連記事

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

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

記事を読む

Selenium入門その1[自動テストの概要]

ソフトウェア業界って3Kですよね・・・ アジャイル開発手法が話題に上がるようになってもう10年

記事を読む

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

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

記事を読む

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

Selenium入門その2 では「UIマップファイル」と言う仕組みが存在していることに言及させてい

記事を読む

Selenium入門その3[Selenium WebDriver(Java/Junit4)の使い方]

WebDriverでは、予め中継サーバを起動しなくても、テスト実行時にブラウザ拡張機能や、OSのネイ

記事を読む

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

前回はEclipse環境でSelenium WebDriverでJava/Junit4を利用したテス

記事を読む

Message

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

Spring5入門[簡単なWebアプリのユニットテストをJUnit5とJMockitで作成]

Spring5入門ではJUnit4とmockitを利用したSpring

Spring5入門[STS(Spring Tool Suite)で簡単なWebアプリの典型的なユニットテストの実現方法]

前回は「Spring入門」で、Spring MVCを利用した簡単なWe

Spring5入門[STS(Spring Tool Suite)の環境作成と簡単なWebアプリの作成]

Struts1ももう過去の遺物になり、SAStrutsもEOLとなりも

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

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

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

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

→もっと見る

Optimization WordPress Plugins & Solutions by W3 EDGE
PAGE TOP ↑