Selenium

Selenium の利用法

目次： 1. Selenium とは？ 2. Selenium IDE(Firefox 拡張機能)のインストール 3. Selenium IDE でテストケースを作成 4. Selenium IDE でテストを実行 5. Selenium RC の便利な機能

参考サイト： 　■ OpenQA:Selenium (Selenium 公式サイト) 　　http://www.openqa.org/selenium/ 　■ CodeZine:Selenium 0.7 利用手順書 　　前編　http://codezine.jp/a/article/aid/436.aspx?p=3 　　後編　http://codezine.jp/a/article/aid/452.aspx?p=1

1. Selenium とは？ Selenium（セレニウム）は、オープンソースの Web アプリケーション用テストツール で、Web ブラウザを使って行われる機能テストや回帰テストの実行を自動化するツール です。例えば、 1.「ユーザ ID」フィールドに、 「takeda」を入力　 2.「名前」フィールドに「武田」を入力　 3.「新規登録」ボタンをクリック 4.「新規登録を受け付けました」と表示があるか確認 というような、今まで手動でブラウザを操作して目視で確認していた作業を、Selenium で自動化して実施することができます。 また、OS/ブラウザ互換をうたっており、OS は Windows、Linux、Macintosh、ブラウザは Internet Explorer、Firefox、Safari などさまざまな環境において動作させることがで きます。 　Selenium は以下の 3 つのプロダクトから構成されており、それぞれの詳細は公式 HP で見ることができます（公式 HP：http://www.openqa.org/selenium/）。 ■ Selenium Core Selenium の中心部分。テストを HTML テーブルで書くことができます。アプリケー ションが動作しているサーバ上にインストールして使用します。 ■ Selenium RC (Remote Control) 　　アプリケーションが動作しているサーバに手を加えずにテストを実行するツー ル。テストを HTML のテーブルだけでなく、プログラミング言語でも書くことがで きます。 ■ Selenium IDE 　　　テストケースを簡単に作成するための Firefox の拡張機能。Firefox で Web アプ リケーションを操作した内容を、Selenium Core や Selenium RC のテストとして 記録できます。Selenium IDE は Selenium Core で使用するテストケース（html） を作成するツールであると共に、それ自体が Selenium Core を含むテスト実行環 境でもあります。 　この手順書では、簡単にテストケースが作成・実行できる Firefox の拡張機能 「Selenium IDE」を使用したテスト手順について説明いたします。

2

2. Selenium　IDE(Firefox 対応)のインストール 　Selenium IDE は Firefox 拡張機能ですので、Firefox を起動し以下の手順でインスト ールします。 1. Firefox で以下の URL を開きます。 http://www.openqa.org/selenium-ide/download.action 2. 「selenium-ide-x-xx-x.xpi」をインストールし、Firefox を再起動します。

↓クリック

これで、Selenium IDE のインストールは完了です。Selenium　IDE をインストールす ると、Firefox のメニューバー [ツール]に[Selenium IDE] という項目が追加されます。

3

3. Selenium　IDE の設定を変更します。 Firefox のメニューバー から[ツール]-[ Selenium IDE]を選択し、Selenium　IDE を 起動します。Selenium　IDE のメニューバー から[オプション]-[設定]を選択します。

　「assertTitle を自動的に記録する」にチェックをつけ、 「OK」をクリックします。

この設定は、遷移先のページタイトルを取得して自動的にタイトルの検証を追加する ためのものです。

以上で Selenium　IDE の設定は終了です。

4

3. Selenium　IDE でテストケースを作成 　今回は、PLAYLOG への新規登録画面のテストを作成します。あらかじめ、招待メールを 取得しておきます。 1. テストケースを作成するサイト(招待メールに載っている URL)を開き、Firefox のメ ニューバー から[ツール]-[ Selenium IDE]を選択します。

Selenium IDE のウィンドウが別ウィンドウで開きます。Selenium IDE は起動した初 期状態で記録可能になっています。

このボタンが押されている状態 のときは、記録中です。

5

2. テストケースを記録します。 今回は、 「メンバ ー URL(半角英数 3-16 文字)に半角英数 2 文字を入力した場 合、入力チェックが行われるか」というテストケースを作成します。

「ニックネーム」を入力し、Tab キーを押下します。

Selenium　IDE に入力した内容が記録されました。

6

「メンバー URL」に半角英数 2 文字を入力し、Tab キーを押下します。Selenium　IDE に 入力した内容が追加されました。

同様に、 「パスワード」 、 「パスワー

ド(確認)」 、 「氏名」 、 「氏名よみ」に値を入力します

7

。

入力が完了したら、 「規約に同意して登録」をクリックします。メンバ ー ID の入力値 が正しくないため、元のフォーム画面に戻りました。Selenium　IDE には、クリック と画面遷移の記録が追加されています。

今回のテストケースでは、現在表示されている画面のように「メンバー ID の値が正 しくありません。」と表示されることが正しい動きです 。 ですので、次にこれを正しいテスト結果として記録します。

8

「メンバー ID の値が正しくありません。」という文字列をドラッグで選択し、右ク リ ックのメニューから verifyTextPresent を選択します。

この文字列があることを確認す るステップを追加します。

Selenium　IDE に文字列が記録されました。 以上でテストケースの記録は終了ですので、Selenium IDE の記録を止めます。 Selenium IDE の右上、赤い丸の Record ボタンが選択状態になっているのでクリッ クし、停止します。

このテストケースに名前を付け、保存します。

9

3. Selenium　IDE のメニューバー から[ファイル]-[テストに名前を付けて保存]を選 択します。

テストに名前を付け、任意のフォルダに保存します。

以上で、テストケースの作成は終了です。

10

4. Selenium　IDE でテストケースを実行 　先ほど作成したテストケースを実行します。 1. Selenium　IDE にテストケースを開きます。 Firefox を起動後、PLAYLIOG のサイトトップ(http://playlog.jp/)を開きます。 Firefox のメニューバー から[ツール]-[ Selenium IDE]を選択し、Selenium　IDE を起動します。Selenium　IDE のメニューバー から[ファイル]-[テストを開く]を 選択します。

　　テストしたいテストケースを選択し、「開く」をクリックします 。

Selenium　IDE に先ほど記録したテストが表示されました。

11

2. テストを実行します。 「ゆっくり」を選択し、「実行ボタン」をクリックします 。

テストの実行ボタン。

テストの実行スピードが選択できます。

ソースタブを開くと、生成されたソースコード (HTML) を見ることができます。ここで直接ソー スを編集し、保存することもできます。

　　画面では、記録したとおりの操作が実行されます。 Selenium　IDE では、実行中のステップは黄色、成功したステップは緑、エラーが起 こったステップは赤で表示されます。

　　最終的に全て緑で終了した場合、「テストの結果 は OK」と判断できます。

12

5. Selenium　RC の便利な機能 　今回は Selenium　IDE を使用した機能のみ扱いましたが、ここでは Selenium RC の便 利な機能について簡単に紹介します。 1. Selenium RC でテストの起動～結果の記録を自動化できます 作成したテストケースをまとめた「テストスイート」を作成し、バッチで実行するこ とにより、ブラウザの起動(さまざまなブラウザからの起動が可能)からテストの確 認までを自動化し、テストが成功したか失敗したかを記録することができます。 テストスイートに登録されている テストケースとテスト結果。

実行中のテストケース。 テストの経過。

2. 3.

実行中のテスト画面。

4. 5. △　Selenium RC で自動実行中の画面

13

△　自動実行したテストの結果 赤がエラーのあったテストケース、緑が成功したテストケース。エラーのテストケ ースが１つあったため、全体の結果として「テストスイート」がエラー（赤）にな っています。

2. プログラミング言語でテストが書けます 条件分岐、ループ、DB にアクセスして状態を確認　など複雑なテストケースの場合、 HTML だけでは表現が難しくなってきます。そこで、Selenium　RC では、Ruby や Java などのプログラミング言語を使ってテストを書くことができます。また、Selenium IDE で作成したテストは、プログラミング言語で書かれた Selenium　RC のテストケ ースに変換することも可能です(Selenium　IDE のメニューバー から[ファイル][テストをエクスポート]を選択し、保存)。

14