アイフラッグラボ
iFLAG Labs is a technical information site which iFLAG offers.
iFLAG Labs provides you with the opportunity to experience and evaluate new and emerging innovations, technologies, and service from iFLAG.

トップページ»  SeleniumIDE導入Tips

Selenium IDE を使った回帰テストについて

 

皆様始めまして。アイフラッグのQuality Control(品質管理)チームのKです。
品質管理チームでは、開発メンバーが実装した各機能のリリース前検証(動作確認)を日々行っています。

この章では、テストツールのSelenium IDEを使った回帰テストの導入と、テスト作成時に困った点、便利な使い方などをお話したいと思います。
※ユニットテスト的な使い方ではなく、ユーザー操作をトレースしておかしな動きがないかをチェックする目線で、Selenium IDEを使用しています。

Seleniumとは?

オープンソースのテストツール。人力での動作確認では手間も時間も非常にかかるところを、Seleniumが人間に代わって「早く、正確に、同じ手順で」テストを実行してくれます。※「Selenium」という単語自体は、自動テストツールのプロジェクトの名前です。
Seleniumプロジェクトホーム(http://docs.seleniumhq.org/projects/)
Seleniumプロジェクトで開発されているテストツールには、いくつかの種類があります。


Selenium-IDE    Firefox のアドオンとして、配布されています。Web アプリケーションに対するユーザ操作を記録し、Selenium テストとして保存・再生します。FireFox上の操作を録画し、テストケースとして保存する機能があります。執筆当時の最新バージョンは1.10.0です。適宜最新のアドオンをダウンロードし、そのままFireFoxへインストールしてください。
Selenium IDEダウンロードページ(http://docs.seleniumhq.org/download/)
Selenium-RC    サーバ・クライアント型のテスト実行ツール。複数のブラウザと複数のプログラミング言語に対応し、ページに JavaScript を埋め込むことで動作します。
Selenium-Grid    複数の環境で同時にテストを実行できるツール。テストは Selenium-RC にリダイレクトされて実行されます。
Selenium WebDriver    サーバ・クライアント型のテスト実行ツール。複数のブラウザと複数のプログラミング言語に対応し、各ブラウザの提供する機能を呼び出して自動操作を実現します。

非常にざっくりとした説明でスミマセン。では早速Selenium IDEのインストールと使い方についてご説明します。

Selenium IDEのインストールと起動方法

Selenium IDEは、FireFoxブラウザのアドオンとして動作します。したがって、まずはFireFoxの最新版をインストールする必要があります。OSはMacOSでも大丈夫です。
FireFoxでSeleniumのダウンロードページ(http://docs.seleniumhq.org/download/)へアクセスしていただくと、アドオンインストールまでは簡単です。
Selenium IDEダウンロードページ
ダウンロード画面。英文の中にダウンロードリンクが入っています。リンクをクリックするとダイアログが表示され、インストールが始まります。
インストールが終り、FireFoxを再起動するとSelenium IDEがアドオンに入ってきます。

FireFoxの上部メニュー「ツール」をクリックすると「Selenium IDE」が選択できるようになっていると思います。ショートカットキーで起動する場合は「Alt + Ctrl + S」ですね。私はショートカットキーで起動する方が楽だと思います。

Selenium IDEの画面について

以下のURLに細かい説明(英語)がありますので、ご参照ください。
http://docs.seleniumhq.org/docs/02_selenium_ide.jsp


次回は実際にテストケースを作成し、実行するまでをご紹介します。ありがとうございました。

2013/03/07


こんにちは。本日はテストケースの作成についてご説明します。
その前にいくつかSelenium IDEの基本的な知識なども書いておきたいと思います。

Selenium IDEの画面UI説明

Selenium IDEの画面全体は以下のようになっています(画像をクリックすると拡大します)。

■ツールバー
テストケースを作ったり、テストを実行する際にツールバーのボタンを使用します。

・BaseURL

Selenium IDEはテスト先のドメインをBaseURLとして指定する事が出来ます。テストケースの方には、ドメイン配下の相対パスを記述しテストを進めていきます。こうすることによって、環境ごとにテストケースを準備する必要がなくなります。
例えば
www.webservice.com が本番サイトだとします。開発環境としてdev.webservice.com  本番検証環境として rq.webservice.com など複数の環境があった場合、BaseURLを変更するだけで任意の環境で同じテストケースをテストする事が可能です。

・スピード調節つまみ

テストを実行する際のスピードを調節します。慣れないうちは一番遅い状態(slow)にして、ゆっくり動作を確認すると良いと思います。

・テストスイート実行ボタン

後述するテストスイートを実行する際に、クリックします。

・テストケース実行ボタン

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

・一時停止、再開ボタン

テスト実行中にストップしたい場合、このボタンをクリックします。クリックすると、再開ボタンが表示されます。

・ステップ実行ボタン

テストを1ステップごとに実行するボタンです。動きを細かく確認したい場合に使用します。

・レコードボタン

このボタンを一度クリックすると、画面操作の録画モードになります。エクセルのマクロ機能と似たような感じで操作します。
レコードボタンクリック⇒テストしたい操作を実行⇒レコードボタンを再度クリックすると、録画モードは終了します。

■テストコマンド表示枠

選択したテストケース内にある、実行コマンドを1ステップ1行ごとに表示します。
表示枠には2つのタブがあり、「1行ごとに表示する」タブ(テーブル)と、「HTMLタグとして表示する」タブ(ソース)があります。
普段はテーブルのタブを表示してテスト作成、実行を行います。ソースのタブについては、似たようなコマンドをたくさん記述する必要がある場合に、エクセルでコマンドを大量に記述しペーストする、といった作業で使用します。

・テストコマンド入力枠
実際にテストで実行したい動作(コマンド)を入力します。入力枠は3つ有り、上から順に
①コマンド ⇒どう動かすか
②対象   ⇒どこを動かすか
③値    ⇒渡したい(もしくは取得したい)値
となっています。このあたりは後ほど詳述します。

■テストケース表示枠
実行したいテストケースの名前が表示されます。複数表示、並び順の入替などをすることが可能です。

■ログ、リファレンス等表示枠
テストを実行した際の実行ログや、コマンドのリファレンスが表示されます。

2013/03/14


 

ここでSelenium IDEを使用する上での用語について、まとめておきます。

テストケースとテストスイート

Aというボタンをクリックしたら、Bという結果が出る、といった単体の機能を確認するテストのことをテストケースといいます。
例えば
「ログインID」「ログインパスワード」を入力し、「ログイン」ボタンを押し、管理画面にログインできたことを確認する
といった動作を1つのテストケースとしてまとめます。

それらテストケースを複数まとめて、モジュール単位で動作をテストするようにしたものがテストスイートです。
例えば
「管理画面にログインする」「商品カテゴリを作成する」「商品画像をアップロードする」「商品を新規登録する」
個々のテストを組み合わせてテストスイートを作成し、テストスイート実行ボタンを1回クリックするだけで一気に全てのテストを実行することが出来ます。

コマンドと対象

コマンドとは、Selenium-IDEがテストを実行する際の命令のことです。よく使うコマンドをご紹介します。

open 対象のページを開きます。ページの内容を全て読み込んだ後に次の行へ進みます。
click 対象のボタンやリンク等をクリックします。
clickAndWait 対象のボタンやリンク等をクリックした後、全てのページ要素を読み込むまで待機します。
verifyTextPresent 指定したテキストがページのどこかに存在しているかどうかをチェックします。
verifyText 対象の部分に指定したテキストが存在しているかをチェックします。
waitForElementPresent 指定したエレメント(htmlタグやID要素など)がページに現れるまで、待機します。

このようなコマンドがたくさんあります。詳しくは以下のリファレンスページを参照するか、Selenium-IDEのリファレンス表示枠をご参照ください。
http://release.seleniumhq.org/selenium-core/1.0.1/reference.html

対象とは、Seleniumコマンドを実行する際に指定する場所のことです。
例えば以下のように使用します。
 

clickAndWait link=ログアウト

この「link=ログアウト」の部分が「対象」です。Selenium コマンドを「対象」に対して実行する、といった説明だとわかりやすいでしょうか。
この対象は、いろいろな形式で指定することが出来ます。
・htmlタグに記載されているID名やname属性
・xpath
・リンクのリンクテキスト
・dom
・CSSパス
・正規表現等を使ったテキストマッチング

私が実際にテストケースを作っている際には、ID名で対象を指定する場合が一番多いです。ID名がない部分には、domを使って対象を指定しています。
任意でお好きな指定方法を使うと良いと思います。xpath やCSSパスであれば、FireBugのアドオンなどで簡単に取得する事が出来ます。


テストケースを書いてみる

では、早速テストケースを書いてみましょう。
①まずSelenium IDEを起動します。FireFoxを開いて「alt + ctrl + s」
②開くとテストケース「Untitled」、でレコードボタンが押された状態(録画モード)で起動されてくると思います。この録画モードのまま、③~⑤を操作します。
③google ホームページを開きます。(http://google.co.jp/)
④検索窓に「Selenium」と入力し、検索ボタンをクリックします。
⑤結果が表示されます。
⑥Selenium IDEのレコードボタンをクリックして、録画モードを終了させます。
ここまで終った段階で、Selenium IDEのコマンド表示枠にはいくつかのコマンドが並んでいると思います。
私が実行した画面は以下のようになっています(画像をクリックすると拡大します)。

まずBaseURLがhttps://www.google.co.jp/ になりました。相対パスでのテストなので、最初のopen コマンドは/ だけが対象になっています。
テストケース表示枠の「Untitled *」と*印がつきました。こちらは保存していないことを示していますので、任意のディレクトリにテストケースを保存します。普通に「ctrl + s」で保存可能です。
ファイル形式はhtml で保存されます(保存されたテストケースをブラウザで確認すると、シンプルなテーブルレイアウトにコマンドが記述されている事がわかります)。

さて、ここまででテストケースとしては出来上がっていますので、(スピードを遅くして)テストケース実行ボタンをクリックしてみます。
全て実行されると、テストケース表示枠の下側がグリーンになり「Runs :1」という表示になったと思いますが、これでテストケースの実行は完了し、テストOKだった、という意味になります。
実際には何もチェックしていないので、チェックするコマンドを記述してみましょう。

googleで「Selenium」と検索したので、検索結果にSeleniumの公式ページタイトルがあるかをチェックします。

verifyTextPresent Selenium - Web Browser Automation

これで保存し、再度テストを実行します。いかがでしょうか。

このようにして、Selenium IDEの操作に慣れながらケースを作成していくやり方で、少しずつ覚えていくと良いと思います。
・Selenium IDEのレコードボタンを使用してざっくりテストケースを作成
・チェックコマンドを付け足していく


少し長くなりましたが、次回はテストスイートの作成について簡単にご紹介します。ありがとうございました。

2013/03/14


テストスイートの作成、保存

皆さんこんにちは。
前回の記事で軽くテストスイートについて触れましたが、今回はもう少し踏み込んでテストスイートの作成について解説したいと思います。

前回でもお話したとおり、テストスイートとは

  1. 個々のテストケースを作成して
  2. 実行したいテストケースを順番に並べ
  3. テストスイートボタン一回で、全てのテストケースを順番に実行

といった流れになります。プログラムごとの単体の動作チェック(ユニットテスト)自体はすでにクリアになっていることが大前提ですね。
では実際の画面を見ていきます。

Selenium IDE の画面を開いたら、事前に作成したテストケースを開きます。Selenium IDE画面の左上「メニュー」⇒「テストケースを開く」を選択。ショートカットでは普通にCtrl + o で開けます。

次に「テストケース表示枠」部分で右クリックし、「テストケースを追加」をクリックします。ショートカットではCtrl + d で動作します。
ファイル選択画面が表示されますので、そこでテストスイートに入れたいテストケースを全て選択して追加する事が出来ます。
※「メニュー」⇒「テストスイートの新規作成」からも同様にテストスイートを作成する事が出来ますが、先にテストケースを作成して保存しているのであれば、この流れでテストスイートを作成しない方が良いかもしれません。未保存の「Untitled」テストケースが残ってしまい、削除する事が出来ません。

テストスイートに入れたいテストケースを全て選択できましたら、順番の調整を行います。テストケース表示枠の各テストケースは、ドラッグ&ドロップで表示を並び替える事が出来ます。

テストケースの選択、テストケースの実行順番の調整が完了したら、テストスイートとして保存します。Selenium IDE画面の左上「メニュー」⇒「テストスイートを保存」から、任意のディレクトリへテストスイートを(html形式で)保存します。
保存されたテストスイートのソースを確認すると、テーブルの中にテストケースへのリンクが記載された単純なファイルとなっています。

つまりテストスイートは「テストケースの場所と実行順番」を指定しているだけ、と言うのがわかります。Selenium IDEでテストスイートを実行中に何らかの修正が必要になった際は、個々のテストケースの修正をするだけでテストスイート側には何の変更もかからない、と言うことになります。

このような形でテストスイートを大量に作成し、何らかのプログラム修正が入った(関連)箇所について一気にテスト実行する運用を行っています。ユーザーが選択できる項目が複数あった場合のテストについては、「(テストケースの組み合わせによって)テストスイートの数を増やし、実際のテストはテストスイートを実行して確認する」ように考えています。

テストスイートを実行する

テストスイートの実行はテストケースの実行とほぼ変わりません。をクリックすると一番上のテストケースから順に実行されます。とあるテストケースの実効途中でエラーとなってしまった場合、そのエラー箇所以下は実行せずに次のテストケースへ移ってテストが進みます。
※テストデータを評価し、エラーになったらテストをストップしたい場合は、評価のコマンドに「verify○○」を使用します。Seleniumコマンドの細かい使い方は、また次回にご説明したいと思います。ありがとうございました。

2013/04/01


 

コラム1:テストのたびに変更されるデータを使ってテストする

Selenium IDEでテストを実行する際、「投入するデータを変更し、他のテストはまったく同じ」場合があります。データの変更に合わせていちいちテストケースを作っていると、ケースの数が膨大な量になってしまいます。
そこで、「変更されるデータを設定する」テストケースと、「変更されるデータとは関係ない部分」のテストケースを分けてテストスイートとして登録しておくと非常に便利です。

具体的には、ユーザーアカウントの切り替え、テスト送信するメールアドレスの設定などに使用しています。

アカウントセット
store test-site.com siteURL
store test-userA loginID
store abcd1234 loginPW
store testuser1@test-site.com testMailAdress

以前の記事で軽く触れましたが、Selenium IDEのテストケース、テストスイートのhtmlファイルをブラウザで開くと上のようなテーブル表記になります。左から順に「コマンド」、「対象」、「値」です。
Selenium IDEの「store」というコマンドを使用します。store とは、「対象」に書かれたデータを「値」として保存するコマンドです。
呼び出し方は、${値} です。実際に見ていきましょう。

・「対象」を「値」に保存する

ここでは、テストWEBページのURL、ログインID、PW、メールアドレスを保存しています。

・「値」を呼び出してテストに使用する

ここでは、ログイン画面を開き、先ほど指定したログインID、PWを使用してログイン認証を試みるテストをしています。

先に値を保存するテストケースを実行し、後からその値を使用したテストケースを実行すると動作します。 このように使用すると、複数人で別々のテストアカウントを使用したテスト実行が(テストケースを一切変更することなく)スムーズに行えます。
よろしければお試しください。

2013/04/01


アイフラッグラボ(IFLAG Labs)とは

アイフラッグラボとは、アイフラッグが提供する技術情報サイトです。アイフラッグが提供するスモールビジネス向けのITサービスの開発実績から培った技術ノウハウを公開していきます。技術情報が皆さまのサポートになれば幸いです。